From 1161ad73c5d0c45c205d1e53b4cb946ddb3859c0 Mon Sep 17 00:00:00 2001
From: Jared White <jared@jaredwhite.com>
Date: Thu, 2 Nov 2023 17:58:48 -0700
Subject: [PATCH] feat: replace UIC `GridSection` with Seeds `Grid` (#3643)

* feat: uptake Grid component from Seeds

* feat: finish Grid component uptake

* feat: update recent changes from main

* fix: mangled syntax

* fix: switch prop to class name

* chore: address linting issues

* fix: typo

* fix: make sure old UIC labels look more modern

* test: use new seeds classes in test selector

* test: resolve issue with grid and Cypress selector

* test: fix bad ids

* fix: grid and form layouts based on feedback

* fix: remove old GridCell, tighten up spacing on Partners aside

* fix: column layout issues from feedback

* chore: grid spacing updates (anticipating Seeds fixes)

* chore: update to latest Seeds
---
 .../cypress/e2e/default/03-listing.spec.ts    |   4 +-
 sites/partners/package.json                   |   4 +-
 sites/partners/postcss.config.js              |   9 +-
 .../src/components/applications/Aside.tsx     |  26 +-
 .../DetailsAddressColumns.tsx                 |  60 +-
 .../DetailsMemberDrawer.tsx                   | 161 +++--
 .../sections/DetailsAlternateContact.tsx      |  92 +--
 .../sections/DetailsApplicationData.tsx       |  37 +-
 .../sections/DetailsHouseholdDetails.tsx      |  26 +-
 .../sections/DetailsHouseholdIncome.tsx       |  21 +-
 .../sections/DetailsHouseholdMembers.tsx      |  16 +-
 .../sections/DetailsMultiselectQuestions.tsx  |  45 +-
 .../sections/DetailsPrimaryApplicant.tsx      | 201 +++---
 .../sections/DetailsTerms.tsx                 |  18 +-
 .../PaperApplicationForm/FormMember.tsx       | 221 +++---
 .../sections/FormAlternateContact.tsx         |  94 +--
 .../sections/FormApplicationData.tsx          |  35 +-
 .../sections/FormDemographics.tsx             |  79 ++-
 .../sections/FormHouseholdDetails.tsx         | 165 ++---
 .../sections/FormHouseholdIncome.tsx          |  43 +-
 .../sections/FormHouseholdMembers.tsx         |  37 +-
 .../sections/FormMultiselectQuestions.tsx     |  37 +-
 .../sections/FormPrimaryApplicant.tsx         | 138 ++--
 .../sections/FormPrograms.tsx                 |  26 +-
 .../sections/FormTerms.tsx                    |  68 +-
 .../listings/ListingFormActions.tsx           |  62 +-
 .../PaperListingDetails/DetailsUnitDrawer.tsx |  95 +--
 .../sections/DetailAdditionalDetails.tsx      |  50 +-
 .../sections/DetailAdditionalEligibility.tsx  | 152 ++--
 .../sections/DetailAdditionalFees.tsx         |  76 +-
 .../sections/DetailApplicationAddress.tsx     | 252 ++++---
 .../sections/DetailApplicationDates.tsx       | 116 ++--
 .../sections/DetailApplicationTypes.tsx       | 102 ++-
 .../sections/DetailBuildingDetails.tsx        |  71 +-
 .../sections/DetailBuildingFeatures.tsx       | 104 ++-
 .../sections/DetailCommunityType.tsx          |  52 +-
 .../sections/DetailLeasingAgent.tsx           |  69 +-
 .../sections/DetailListingData.tsx            |  18 +-
 .../sections/DetailListingIntro.tsx           |  36 +-
 .../sections/DetailListingPhoto.tsx           |  75 --
 .../sections/DetailListingPhotos.tsx          |  37 +-
 .../sections/DetailNotes.tsx                  |  28 +-
 .../sections/DetailPreferences.tsx            |  35 +-
 .../sections/DetailPrograms.tsx               |  30 +-
 .../sections/DetailRankingsAndResults.tsx     |  50 +-
 .../sections/DetailUnits.tsx                  |  44 +-
 .../PaperListingDetails/sections/helpers.tsx  |  71 +-
 .../PaperListingForm/OpenHouseForm.tsx        | 188 +++--
 .../listings/PaperListingForm/UnitForm.tsx    | 509 +++++++-------
 .../sections/AdditionalDetails.tsx            |  83 +--
 .../sections/AdditionalEligibility.tsx        | 121 ++--
 .../sections/AdditionalFees.tsx               | 120 ++--
 .../sections/ApplicationAddress.tsx           | 316 +++++----
 .../sections/ApplicationDates.tsx             | 130 ++--
 .../sections/ApplicationTypes.tsx             | 145 ++--
 .../sections/BuildingDetails.tsx              | 312 ++++-----
 .../sections/BuildingFeatures.tsx             | 150 ++--
 .../sections/BuildingSelectionCriteria.tsx    | 174 ++---
 .../sections/CommunityType.tsx                |  79 +--
 .../sections/LeasingAgent.tsx                 | 225 +++---
 .../sections/ListingIntro.tsx                 | 158 +++--
 .../sections/ListingPhotos.tsx                |  27 +-
 .../sections/LotteryResults.tsx               |  29 +-
 .../sections/RankingsAndResults.tsx           |  87 ++-
 .../sections/SelectAndOrder.tsx               | 100 +--
 .../PaperListingForm/sections/Units.tsx       | 141 ++--
 .../components/settings/PreferenceDrawer.tsx  | 657 +++++++++---------
 .../src/components/shared/SectionWithGrid.tsx |  50 ++
 .../src/components/shared/StatusAside.tsx     |   8 +-
 .../src/components/users/FormUserManage.tsx   | 194 +++---
 .../users/JurisdictionAndListingSelection.tsx | 167 +++--
 .../src/pages/application/[id]/review.tsx     |   5 +-
 sites/partners/styles/overrides.scss          |  76 +-
 sites/public/package.json                     |   2 +-
 yarn.lock                                     |  64 +-
 75 files changed, 3705 insertions(+), 3900 deletions(-)
 delete mode 100644 sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhoto.tsx
 create mode 100644 sites/partners/src/components/shared/SectionWithGrid.tsx

diff --git a/sites/partners/cypress/e2e/default/03-listing.spec.ts b/sites/partners/cypress/e2e/default/03-listing.spec.ts
index cd2625fc1a..22936abaeb 100644
--- a/sites/partners/cypress/e2e/default/03-listing.spec.ts
+++ b/sites/partners/cypress/e2e/default/03-listing.spec.ts
@@ -89,7 +89,9 @@ describe("Listing Management Tests", () => {
     cy.get(".mt-6 > .is-primary").contains("Save & Exit").click()
     cy.get("#add-preferences-button").contains("Add Preference").click()
     cy.get(".border > .button").contains("Select Preferences").click()
-    cy.get(":nth-child(1) > .grid-section__inner > .field > div > .label")
+    cy.get(
+      ":nth-child(1) > .seeds-grid > .seeds-grid-row > .seeds-grid-cell > .field > div > .label"
+    )
       .contains("Live/Work in County")
       .click()
     cy.get("#addPreferenceSaveButton").contains("Save").click()
diff --git a/sites/partners/package.json b/sites/partners/package.json
index 1789baa473..7e7d6bc152 100644
--- a/sites/partners/package.json
+++ b/sites/partners/package.json
@@ -29,7 +29,7 @@
     "@bloom-housing/backend-core": "^7.13.0",
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.0.21",
-    "@bloom-housing/ui-seeds": "^1.9.1",
+    "@bloom-housing/ui-seeds": "^1.12.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",
@@ -54,6 +54,7 @@
     "@axe-core/react": "4.4.3",
     "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
+    "@csstools/postcss-global-data": "^2.0.1",
     "@cypress/code-coverage": "^3.10.1",
     "@cypress/webpack-preprocessor": "^5.11.1",
     "@netlify/plugin-nextjs": "4.30.4",
@@ -76,6 +77,7 @@
     "next-transpile-modules": "^10.0.0",
     "nyc": "^15.1.0",
     "postcss": "^8.3.6",
+    "postcss-custom-media": "^10.0.0",
     "sass": "1.52.1",
     "sass-loader": "^10.0.3",
     "typescript": "4.6.4",
diff --git a/sites/partners/postcss.config.js b/sites/partners/postcss.config.js
index e04485a990..0cd5a5d3fe 100644
--- a/sites/partners/postcss.config.js
+++ b/sites/partners/postcss.config.js
@@ -1,5 +1,12 @@
 /*eslint-env node*/
 
 module.exports = {
-  plugins: ["tailwindcss", "autoprefixer"],
+  plugins: {
+    "@csstools/postcss-global-data": {
+      files: ["../../node_modules/@bloom-housing/ui-seeds/src/global/tokens/screens.scss"],
+    },
+    "postcss-custom-media": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }
diff --git a/sites/partners/src/components/applications/Aside.tsx b/sites/partners/src/components/applications/Aside.tsx
index 1766931a11..eed1a985c9 100644
--- a/sites/partners/src/components/applications/Aside.tsx
+++ b/sites/partners/src/components/applications/Aside.tsx
@@ -3,7 +3,6 @@ import dayjs from "dayjs"
 import {
   t,
   Button,
-  GridCell,
   AppearanceStyleType,
   StatusMessages,
   LocalizedLink,
@@ -11,6 +10,7 @@ import {
   LinkButton,
   AppearanceSizeType,
 } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "./ApplicationContext"
 import { StatusAside } from "../shared/StatusAside"
 
@@ -41,7 +41,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
     const elements = []
 
     const cancel = (
-      <GridCell className="flex" key="btn-cancel">
+      <Grid.Cell className="flex" key="btn-cancel">
         <LinkButton
           unstyled
           fullWidth
@@ -50,19 +50,19 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
         >
           {t("t.cancel")}
         </LinkButton>
-      </GridCell>
+      </Grid.Cell>
     )
 
     if (type === "details") {
       elements.push(
-        <GridCell key="btn-submitNew">
+        <Grid.Cell key="btn-submitNew">
           <LocalizedLink href={`/application/${applicationId}/edit`}>
             <Button styleType={AppearanceStyleType.secondary} fullWidth onClick={() => false}>
               {t("t.edit")}
             </Button>
           </LocalizedLink>
-        </GridCell>,
-        <GridCell className="flex" key="btn-cancel">
+        </Grid.Cell>,
+        <Grid.Cell className="flex" key="btn-cancel">
           <Button
             unstyled
             fullWidth
@@ -71,13 +71,13 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
           >
             {t("t.delete")}
           </Button>
-        </GridCell>
+        </Grid.Cell>
       )
     }
 
     if (type === "add" || type === "edit") {
       elements.push(
-        <GridCell key="btn-submit">
+        <Grid.Cell key="btn-submit">
           <Button
             styleType={AppearanceStyleType.primary}
             fullWidth
@@ -86,12 +86,12 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
           >
             {type === "edit" ? t("application.add.saveAndExit") : t("t.submit")}
           </Button>
-        </GridCell>
+        </Grid.Cell>
       )
 
       if (type === "add") {
         elements.push(
-          <GridCell key="btn-submitNew">
+          <Grid.Cell key="btn-submitNew">
             <Button
               type="button"
               styleType={AppearanceStyleType.secondary}
@@ -100,7 +100,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
             >
               {t("t.submitNew")}
             </Button>
-          </GridCell>,
+          </Grid.Cell>,
           cancel
         )
       }
@@ -109,7 +109,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
         elements.push(
           <div className="flex justify-center" key="btn-group">
             {cancel}
-            <GridCell className="flex" key="btn-delete">
+            <Grid.Cell className="flex" key="btn-delete">
               <Button
                 type="button"
                 unstyled
@@ -119,7 +119,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
               >
                 {t("t.delete")}
               </Button>
-            </GridCell>
+            </Grid.Cell>
           </div>
         )
       }
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/DetailsAddressColumns.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/DetailsAddressColumns.tsx
index d25a07f037..2d9e3ce306 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/DetailsAddressColumns.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/DetailsAddressColumns.tsx
@@ -1,4 +1,4 @@
-import { t, GridCell } from "@bloom-housing/ui-components"
+import { t } from "@bloom-housing/ui-components"
 import {
   Application,
   HouseholdMemberUpdate,
@@ -90,38 +90,32 @@ const DetailsAddressColumns = ({
 
   return (
     <>
-      <GridCell>
-        <FieldValue
-          label={t("application.contact.streetAddress")}
-          testId={`${dataTestId}.streetAddress`}
-        >
-          {address.street}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell span={2}>
-        <FieldValue label={t("application.contact.apt")} testId={`${dataTestId}.street2`}>
-          {address.street2}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell>
-        <FieldValue label={t("application.contact.city")} testId={`${dataTestId}.city`}>
-          {address.city}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell>
-        <FieldValue label={t("application.contact.state")} testId={`${dataTestId}.state`}>
-          {address.state}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell>
-        <FieldValue label={t("application.contact.zip")} testId={`${dataTestId}.zipCode`}>
-          {address.zipCode}
-        </FieldValue>
-      </GridCell>
+      <FieldValue
+        label={t("application.contact.streetAddress")}
+        testId={`${dataTestId}.streetAddress`}
+      >
+        {address.street}
+      </FieldValue>
+
+      <FieldValue
+        className="seeds-grid-span-2"
+        label={t("application.contact.apt")}
+        testId={`${dataTestId}.street2`}
+      >
+        {address.street2}
+      </FieldValue>
+
+      <FieldValue label={t("application.contact.city")} testId={`${dataTestId}.city`}>
+        {address.city}
+      </FieldValue>
+
+      <FieldValue label={t("application.contact.state")} testId={`${dataTestId}.state`}>
+        {address.state}
+      </FieldValue>
+
+      <FieldValue label={t("application.contact.zip")} testId={`${dataTestId}.zipCode`}>
+        {address.zipCode}
+      </FieldValue>
     </>
   )
 }
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/DetailsMemberDrawer.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/DetailsMemberDrawer.tsx
index 69f8ef5dba..0267feb24c 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/DetailsMemberDrawer.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/DetailsMemberDrawer.tsx
@@ -1,9 +1,10 @@
 import React from "react"
-import { AppearanceStyleType, t, GridSection, Button, Drawer } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { AppearanceStyleType, t, Button, Drawer } from "@bloom-housing/ui-components"
+import { Card, FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { AddressColsType, DetailsAddressColumns } from "./DetailsAddressColumns"
 import { Application, HouseholdMemberUpdate } from "@bloom-housing/backend-core/types"
 import { YesNoAnswer } from "../../../lib/helpers"
+import SectionWithGrid from "../../shared/SectionWithGrid"
 
 export type MembersDrawer = HouseholdMemberUpdate | null
 
@@ -25,92 +26,98 @@ const DetailsMemberDrawer = ({
       ariaDescription={t("application.household.householdMember")}
       onClose={() => setMembersDrawer(null)}
     >
-      <section className="border rounded-md p-8 bg-white mb-8">
-        <GridSection
-          title={t("application.details.householdMemberDetails")}
-          tinted={true}
-          inset={true}
-          grid={false}
-        >
-          <GridSection grid columns={4}>
-            <FieldValue
-              label={t("application.name.firstName")}
-              children={membersDrawer?.firstName || t("t.n/a")}
-            />
+      <Card spacing="lg" className="spacer-section">
+        <Card.Section>
+          <SectionWithGrid heading={t("application.details.householdMemberDetails")} inset>
+            <Grid.Row columns={4}>
+              <FieldValue
+                label={t("application.name.firstName")}
+                children={membersDrawer?.firstName || t("t.n/a")}
+              />
 
-            <FieldValue
-              label={t("application.name.middleName")}
-              children={membersDrawer?.middleName || t("t.n/a")}
-            />
+              <FieldValue
+                label={t("application.name.middleName")}
+                children={membersDrawer?.middleName || t("t.n/a")}
+              />
 
-            <FieldValue
-              label={t("application.name.lastName")}
-              children={membersDrawer?.lastName || t("t.n/a")}
-            />
+              <FieldValue
+                label={t("application.name.lastName")}
+                children={membersDrawer?.lastName || t("t.n/a")}
+              />
 
-            <FieldValue
-              label={t("application.household.member.dateOfBirth")}
-              children={
-                membersDrawer?.birthMonth && membersDrawer?.birthDay && membersDrawer?.birthYear
-                  ? `${membersDrawer?.birthMonth}/${membersDrawer?.birthDay}/${membersDrawer?.birthYear}`
-                  : t("t.n/a")
-              }
-            />
+              <FieldValue
+                label={t("application.household.member.dateOfBirth")}
+                children={
+                  membersDrawer?.birthMonth && membersDrawer?.birthDay && membersDrawer?.birthYear
+                    ? `${membersDrawer?.birthMonth}/${membersDrawer?.birthDay}/${membersDrawer?.birthYear}`
+                    : t("t.n/a")
+                }
+              />
 
-            <FieldValue
-              label={t("application.add.sameAddressAsPrimary")}
-              children={
-                membersDrawer?.sameAddress === YesNoAnswer.Yes
-                  ? t("t.yes")
-                  : membersDrawer?.sameAddress === YesNoAnswer.No
-                  ? t("t.no")
-                  : t("t.n/a")
-              }
-            />
+              <FieldValue
+                label={t("application.add.sameAddressAsPrimary")}
+                children={
+                  membersDrawer?.sameAddress === YesNoAnswer.Yes
+                    ? t("t.yes")
+                    : membersDrawer?.sameAddress === YesNoAnswer.No
+                    ? t("t.no")
+                    : t("t.n/a")
+                }
+              />
 
-            <FieldValue
-              label={t("application.add.workInRegion")}
-              children={
-                membersDrawer?.workInRegion === YesNoAnswer.Yes
-                  ? t("t.yes")
-                  : membersDrawer?.workInRegion === YesNoAnswer.No
-                  ? t("t.no")
-                  : t("t.n/a")
-              }
-            />
+              <FieldValue
+                label={t("application.add.workInRegion")}
+                children={
+                  membersDrawer?.workInRegion === YesNoAnswer.Yes
+                    ? t("t.yes")
+                    : membersDrawer?.workInRegion === YesNoAnswer.No
+                    ? t("t.no")
+                    : t("t.n/a")
+                }
+              />
+
+              <FieldValue
+                label={t("t.relationship")}
+                children={
+                  membersDrawer?.relationship
+                    ? t(`application.form.options.relationship.${membersDrawer?.relationship}`)
+                    : t("t.n/a")
+                }
+              />
+            </Grid.Row>
 
-            <FieldValue
-              label={t("t.relationship")}
-              children={
-                membersDrawer?.relationship
-                  ? t(`application.form.options.relationship.${membersDrawer?.relationship}`)
-                  : t("t.n/a")
-              }
-            />
-          </GridSection>
-          <GridSection grid={false} columns={2}>
             {!(membersDrawer?.sameAddress === YesNoAnswer.Yes) && (
-              <GridSection subtitle={t("application.details.residenceAddress")} columns={3}>
-                <DetailsAddressColumns
-                  type={AddressColsType.memberResidence}
-                  application={application}
-                  householdMember={membersDrawer}
-                />
-              </GridSection>
+              <>
+                <SectionWithGrid.HeadingRow>
+                  {t("application.details.residenceAddress")}
+                </SectionWithGrid.HeadingRow>
+                <Grid.Row columns={3}>
+                  <DetailsAddressColumns
+                    type={AddressColsType.memberResidence}
+                    application={application}
+                    householdMember={membersDrawer}
+                  />
+                </Grid.Row>
+              </>
             )}
 
             {membersDrawer?.workInRegion === YesNoAnswer.Yes && (
-              <GridSection subtitle={t("application.contact.workAddress")} columns={3}>
-                <DetailsAddressColumns
-                  type={AddressColsType.memberWork}
-                  application={application}
-                  householdMember={membersDrawer}
-                />
-              </GridSection>
+              <>
+                <SectionWithGrid.HeadingRow>
+                  {t("application.contact.workAddress")}
+                </SectionWithGrid.HeadingRow>
+                <Grid.Row columns={3}>
+                  <DetailsAddressColumns
+                    type={AddressColsType.memberWork}
+                    application={application}
+                    householdMember={membersDrawer}
+                  />
+                </Grid.Row>
+              </>
             )}
-          </GridSection>
-        </GridSection>
-      </section>
+          </SectionWithGrid>
+        </Card.Section>
+      </Card>
 
       <Button styleType={AppearanceStyleType.primary} onClick={() => setMembersDrawer(null)}>
         {t("t.done")}
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsAlternateContact.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsAlternateContact.tsx
index 7f32d79c42..9e38016e51 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsAlternateContact.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsAlternateContact.tsx
@@ -1,76 +1,58 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { DetailsAddressColumns, AddressColsType } from "../DetailsAddressColumns"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailsAlternateContact = () => {
   const application = useContext(ApplicationContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("application.alternateContact.type.label")}
-      inset
-      grid={false}
-    >
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue label={t("application.name.firstName")} testId="alternateContact.firstName">
-            {application.alternateContact.firstName || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("application.name.lastName")} testId="alternateContact.lastName">
-            {application.alternateContact.lastName || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("t.relationship")} testId="relationship">
-            {(() => {
-              if (!application.alternateContact.type) return t("t.n/a")
-
-              if (application.alternateContact.otherType)
-                return application.alternateContact.otherType
-
-              return t(
-                `application.alternateContact.type.options.${application.alternateContact.type}`
-              )
-            })()}
-          </FieldValue>
-        </GridCell>
+    <SectionWithGrid heading={t("application.alternateContact.type.label")} inset>
+      <Grid.Row columns={3}>
+        <FieldValue label={t("application.name.firstName")} testId="alternateContact.firstName">
+          {application.alternateContact.firstName || t("t.n/a")}
+        </FieldValue>
+        <FieldValue label={t("application.name.lastName")} testId="alternateContact.lastName">
+          {application.alternateContact.lastName || t("t.n/a")}
+        </FieldValue>
+        <FieldValue label={t("t.relationship")} testId="relationship">
+          {(() => {
+            if (!application.alternateContact.type) return t("t.n/a")
+
+            if (application.alternateContact.otherType)
+              return application.alternateContact.otherType
+
+            return t(
+              `application.alternateContact.type.options.${application.alternateContact.type}`
+            )
+          })()}
+        </FieldValue>
 
         {
-          <GridCell>
-            <FieldValue label={t("application.details.agency")} testId="alternateContact.agency">
-              {application.alternateContact.agency || t("t.n/a")}
-            </FieldValue>
-          </GridCell>
-        }
-
-        <GridCell>
-          <FieldValue label={t("t.email")} testId="alternateContact.emailAddress">
-            {application.alternateContact.emailAddress || t("t.n/a")}
+          <FieldValue label={t("application.details.agency")} testId="alternateContact.agency">
+            {application.alternateContact.agency || t("t.n/a")}
           </FieldValue>
-        </GridCell>
+        }
 
-        <GridCell>
-          <FieldValue label={t("t.phone")} testId="alternateContact.phoneNumber">
-            {application.alternateContact.phoneNumber || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
+        <FieldValue label={t("t.email")} testId="alternateContact.emailAddress">
+          {application.alternateContact.emailAddress || t("t.n/a")}
+        </FieldValue>
 
-      <GridSection subtitle={t("application.contact.address")} columns={3}>
+        <FieldValue label={t("t.phone")} testId="alternateContact.phoneNumber">
+          {application.alternateContact.phoneNumber || t("t.n/a")}
+        </FieldValue>
+      </Grid.Row>
+      <SectionWithGrid.HeadingRow>{t("application.contact.address")} </SectionWithGrid.HeadingRow>
+      <Grid.Row columns={3}>
         <DetailsAddressColumns
           type={AddressColsType.alternateAddress}
           application={application}
           dataTestId="alternateContact"
         />
-      </GridSection>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsApplicationData.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsApplicationData.tsx
index 0aec2e19b6..f8eb232515 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsApplicationData.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsApplicationData.tsx
@@ -1,9 +1,10 @@
 import React, { useContext, useMemo } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { convertDataToLocal } from "../../../../lib/helpers"
 import { ApplicationSubmissionType } from "@bloom-housing/backend-core/types"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailsApplicationData = () => {
   const application = useContext(ApplicationContext)
@@ -18,57 +19,45 @@ const DetailsApplicationData = () => {
   }, [application])
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("application.details.applicationData")}
-      inset
-    >
-      <GridCell>
+    <SectionWithGrid heading={t("application.details.applicationData")} inset>
+      <Grid.Row>
         <FieldValue label={t("application.details.number")} testId="number">
           {application.confirmationCode || application.id}
         </FieldValue>
-      </GridCell>
 
-      {application.submissionType && (
-        <GridCell>
+        {application.submissionType && (
           <FieldValue label={t("application.details.type")} testId="type">
             {t(`application.details.submissionType.${application.submissionType}`)}
           </FieldValue>
-        </GridCell>
-      )}
+        )}
 
-      <GridCell>
         <FieldValue label={t("application.details.submittedDate")} testId="submittedDate">
           {applicationDate.date}
         </FieldValue>
-      </GridCell>
+      </Grid.Row>
 
-      <GridCell>
+      <Grid.Row>
         <FieldValue label={t("application.details.timeDate")} testId="timeDate">
           {applicationDate.time}
         </FieldValue>
-      </GridCell>
 
-      <GridCell>
         <FieldValue label={t("application.details.language")} testId="language">
           {application.language ? t(`languages.${application.language}`) : t("t.n/a")}
         </FieldValue>
-      </GridCell>
 
-      <GridCell>
         <FieldValue label={t("application.details.totalSize")} testId="totalSize">
           {!application.householdSize ? 1 : application.householdSize}
         </FieldValue>
-      </GridCell>
+      </Grid.Row>
 
-      <GridCell>
+      <Grid.Row>
         <FieldValue label={t("application.details.submittedBy")} testId="submittedBy">
           {application.applicant.firstName && application.applicant.lastName
             ? `${application.applicant.firstName} ${application.applicant.lastName}`
             : t("t.n/a")}
         </FieldValue>
-      </GridCell>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdDetails.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdDetails.tsx
index 5f15393404..5b82d96994 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdDetails.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdDetails.tsx
@@ -1,8 +1,9 @@
 import React, { useContext, Fragment } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { sortUnitTypes } from "@bloom-housing/shared-helpers"
 import { ApplicationContext } from "../../ApplicationContext"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailsHouseholdDetails = () => {
   const application = useContext(ApplicationContext)
@@ -20,12 +21,8 @@ const DetailsHouseholdDetails = () => {
   const preferredUnits = sortUnitTypes(application?.preferredUnit)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("application.review.householdDetails")}
-      inset
-    >
-      <GridCell>
+    <SectionWithGrid heading={t("application.review.householdDetails")} inset>
+      <Grid.Row>
         <FieldValue label={t("application.details.preferredUnitSizes")} testId="preferredUnitSizes">
           {(() => {
             if (!preferredUnits.length) return t("t.n/a")
@@ -38,9 +35,7 @@ const DetailsHouseholdDetails = () => {
             ))
           })()}
         </FieldValue>
-      </GridCell>
 
-      <GridCell>
         <FieldValue label={t("application.details.adaPriorities")} testId="adaPriorities">
           {accessibilityLabels(application.accessibility).map((item) => (
             <Fragment key={item}>
@@ -49,8 +44,7 @@ const DetailsHouseholdDetails = () => {
             </Fragment>
           ))}
         </FieldValue>
-      </GridCell>
-      <GridCell>
+
         <FieldValue
           id="householdChanges"
           label={t("application.household.expectingChanges.title")}
@@ -58,9 +52,9 @@ const DetailsHouseholdDetails = () => {
         >
           {application.householdExpectingChanges ? t("t.yes") : t("t.no")}
         </FieldValue>
-      </GridCell>
+      </Grid.Row>
 
-      <GridCell>
+      <Grid.Row>
         <FieldValue
           id="householdStudent"
           label={t("application.household.householdStudent.title")}
@@ -68,8 +62,8 @@ const DetailsHouseholdDetails = () => {
         >
           {application.householdStudent ? t("t.yes") : t("t.no")}
         </FieldValue>
-      </GridCell>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdIncome.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdIncome.tsx
index 23dc80a020..d99e81418e 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdIncome.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdIncome.tsx
@@ -1,20 +1,17 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { IncomePeriod } from "@bloom-housing/backend-core/types"
 import { formatIncome } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailsHouseholdIncome = () => {
   const application = useContext(ApplicationContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("application.details.householdIncome")}
-      inset
-    >
-      <GridCell>
+    <SectionWithGrid heading={t("application.details.householdIncome")} inset>
+      <Grid.Row>
         <FieldValue label={t("application.details.annualIncome")} testId="annualIncome">
           {application.incomePeriod === IncomePeriod.perYear
             ? formatIncome(
@@ -24,9 +21,7 @@ const DetailsHouseholdIncome = () => {
               )
             : t("t.n/a")}
         </FieldValue>
-      </GridCell>
 
-      <GridCell>
         <FieldValue label={t("application.details.monthlyIncome")} testId="monthlyIncome">
           {application.incomePeriod === IncomePeriod.perMonth
             ? formatIncome(
@@ -36,9 +31,7 @@ const DetailsHouseholdIncome = () => {
               )
             : t("t.n/a")}
         </FieldValue>
-      </GridCell>
 
-      <GridCell>
         <FieldValue label={t("application.details.vouchers")} testId="vouchers">
           {(() => {
             if (application.incomeVouchers === null) return t("t.n/a")
@@ -50,8 +43,8 @@ const DetailsHouseholdIncome = () => {
             return t("t.no")
           })()}
         </FieldValue>
-      </GridCell>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdMembers.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdMembers.tsx
index d8d8eef350..f262b4b3f4 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdMembers.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdMembers.tsx
@@ -1,8 +1,10 @@
 import React, { useContext, useMemo } from "react"
-import { t, GridSection, MinimalTable, Button } from "@bloom-housing/ui-components"
+import { t, MinimalTable, Button } from "@bloom-housing/ui-components"
+import { FieldValue } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { MembersDrawer } from "../DetailsMemberDrawer"
 import { YesNoAnswer } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type DetailsHouseholdMembersProps = {
   setMembersDrawer: (member: MembersDrawer) => void
@@ -61,19 +63,13 @@ const DetailsHouseholdMembers = ({ setMembersDrawer }: DetailsHouseholdMembersPr
   }, [application, setMembersDrawer])
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("application.household.householdMembers")}
-      grid={false}
-      tinted
-      inset
-    >
+    <SectionWithGrid heading={t("application.household.householdMembers")} bypassGrid inset>
       {application?.householdMembers?.length ? (
         <MinimalTable headers={householdMembersHeaders} data={householdMembersData} />
       ) : (
-        <span className="font-semibold">{t("t.none")}</span>
+        <FieldValue>{t("t.none")}</FieldValue>
       )}
-    </GridSection>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsMultiselectQuestions.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsMultiselectQuestions.tsx
index 8e05b3b1ca..d05f1dc2c2 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsMultiselectQuestions.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsMultiselectQuestions.tsx
@@ -1,11 +1,12 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { listingSectionQuestions } from "@bloom-housing/shared-helpers"
 import { ApplicationContext } from "../../ApplicationContext"
 import { InputType, AddressCreate, ApplicationSection } from "@bloom-housing/backend-core/types"
 import { DetailsAddressColumns, AddressColsType } from "../DetailsAddressColumns"
 import { useSingleListingData } from "../../../../lib/hooks"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type DetailsMultiselectQuestionsProps = {
   listingId: string
@@ -31,11 +32,14 @@ const DetailsMultiselectQuestions = ({
   const questions = application[applicationSection]
 
   return (
-    <GridSection className="bg-primary-lighter" title={title} inset columns={2}>
-      {listingQuestions?.map((listingQuestion) => {
-        return (
-          <GridCell key={listingQuestion?.multiselectQuestion.text}>
-            <FieldValue label={listingQuestion?.multiselectQuestion.text}>
+    <SectionWithGrid heading={title} inset>
+      <Grid.Row columns={2}>
+        {listingQuestions?.map((listingQuestion) => {
+          return (
+            <FieldValue
+              key={listingQuestion?.multiselectQuestion.text}
+              label={listingQuestion?.multiselectQuestion.text}
+            >
               {(() => {
                 const appQuestion = questions?.find(
                   (question) => question.key === listingQuestion?.multiselectQuestion.text
@@ -67,18 +71,21 @@ const DetailsMultiselectQuestions = ({
 
                     if (extra.type === InputType.address)
                       return (
-                        <GridSection
+                        <FieldValue
                           key={extra.key}
-                          subtitle={t(`application.preferences.options.address`, {
+                          label={t(`application.preferences.options.address`, {
                             county: listingDto?.countyCode,
                           })}
-                          columns={3}
                         >
-                          <DetailsAddressColumns
-                            type={AddressColsType.preferences}
-                            addressObject={extra.value as AddressCreate}
-                          />
-                        </GridSection>
+                          <Grid spacing="lg">
+                            <Grid.Row columns={3}>
+                              <DetailsAddressColumns
+                                type={AddressColsType.preferences}
+                                addressObject={extra.value as AddressCreate}
+                              />
+                            </Grid.Row>
+                          </Grid>
+                        </FieldValue>
                       )
                   })
 
@@ -91,10 +98,10 @@ const DetailsMultiselectQuestions = ({
                 })
               })()}
             </FieldValue>
-          </GridCell>
-        )
-      })}
-    </GridSection>
+          )
+        })}
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsPrimaryApplicant.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsPrimaryApplicant.tsx
index 02b6f69963..9c4669fcb6 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsPrimaryApplicant.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsPrimaryApplicant.tsx
@@ -1,135 +1,126 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { DetailsAddressColumns, AddressColsType } from "../DetailsAddressColumns"
 import { YesNoAnswer } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailsPrimaryApplicant = () => {
   const application = useContext(ApplicationContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("application.household.primaryApplicant")}
-      inset
-      grid={false}
-    >
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue label={t("application.name.firstName")} testId="firstName">
-            {application.applicant.firstName || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("application.name.middleName")} testId="middleName">
-            {application.applicant.middleName || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("application.name.lastName")} testId="lastName">
-            {application.applicant.lastName || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("application.household.member.dateOfBirth")} testId="dateOfBirth">
-            {(() => {
-              const { birthMonth, birthDay, birthYear } = application?.applicant
-
-              if (birthMonth && birthDay && birthYear) {
-                return `${birthMonth}/${birthDay}/${birthYear}`
-              }
-
-              return t("t.n/a")
-            })()}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("t.email")} testId="emailAddress">
-            {application.applicant.emailAddress || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue
-            label={t("t.phone")}
-            helpText={
-              application.applicant.phoneNumberType &&
-              t(`application.contact.phoneNumberTypes.${application.applicant.phoneNumberType}`)
+    <SectionWithGrid heading={t("application.household.primaryApplicant")} inset>
+      <Grid.Row>
+        <FieldValue label={t("application.name.firstName")} testId="firstName">
+          {application.applicant.firstName || t("t.n/a")}
+        </FieldValue>
+
+        <FieldValue label={t("application.name.middleName")} testId="middleName">
+          {application.applicant.middleName || t("t.n/a")}
+        </FieldValue>
+
+        <FieldValue label={t("application.name.lastName")} testId="lastName">
+          {application.applicant.lastName || t("t.n/a")}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue label={t("application.household.member.dateOfBirth")} testId="dateOfBirth">
+          {(() => {
+            const { birthMonth, birthDay, birthYear } = application?.applicant
+
+            if (birthMonth && birthDay && birthYear) {
+              return `${birthMonth}/${birthDay}/${birthYear}`
             }
-            testId="phoneNumber"
-          >
-            {application.applicant.phoneNumber || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue
-            label={t("t.secondPhone")}
-            helpText={
-              application.additionalPhoneNumber &&
-              t(`application.contact.phoneNumberTypes.${application.additionalPhoneNumberType}`)
-            }
-            testId="additionalPhoneNumber"
-          >
-            {application.additionalPhoneNumber || t("t.n/a")}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("application.details.preferredContact")} testId="preferredContact">
-            {(() => {
-              if (!application.contactPreferences.length) return t("t.n/a")
-
-              return application.contactPreferences.map((item) => (
-                <span key={item}>
-                  {t(`t.${item}`)}
-                  <br />
-                </span>
-              ))
-            })()}
-          </FieldValue>
-        </GridCell>
-
-        <GridCell>
-          <FieldValue label={t("application.details.workInRegion")} testId="workInRegion">
-            {(() => {
-              if (!application.applicant.workInRegion) return t("t.n/a")
-
-              return application.applicant.workInRegion === YesNoAnswer.Yes ? t("t.yes") : t("t.no")
-            })()}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-
-      <GridSection subtitle={t("application.details.residenceAddress")} columns={3}>
+
+            return t("t.n/a")
+          })()}
+        </FieldValue>
+
+        <FieldValue label={t("t.email")} testId="emailAddress">
+          {application.applicant.emailAddress || t("t.n/a")}
+        </FieldValue>
+
+        <FieldValue
+          label={t("t.phone")}
+          helpText={
+            application.applicant.phoneNumberType &&
+            t(`application.contact.phoneNumberTypes.${application.applicant.phoneNumberType}`)
+          }
+          testId="phoneNumber"
+        >
+          {application.applicant.phoneNumber || t("t.n/a")}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue
+          label={t("t.secondPhone")}
+          helpText={
+            application.additionalPhoneNumber &&
+            t(`application.contact.phoneNumberTypes.${application.additionalPhoneNumberType}`)
+          }
+          testId="additionalPhoneNumber"
+        >
+          {application.additionalPhoneNumber || t("t.n/a")}
+        </FieldValue>
+
+        <FieldValue label={t("application.details.preferredContact")} testId="preferredContact">
+          {(() => {
+            if (!application.contactPreferences.length) return t("t.n/a")
+
+            return application.contactPreferences.map((item) => (
+              <span key={item}>
+                {t(`t.${item}`)}
+                <br />
+              </span>
+            ))
+          })()}
+        </FieldValue>
+
+        <FieldValue label={t("application.details.workInRegion")} testId="workInRegion">
+          {(() => {
+            if (!application.applicant.workInRegion) return t("t.n/a")
+
+            return application.applicant.workInRegion === YesNoAnswer.Yes ? t("t.yes") : t("t.no")
+          })()}
+        </FieldValue>
+      </Grid.Row>
+
+      <SectionWithGrid.HeadingRow>
+        {t("application.details.residenceAddress")}
+      </SectionWithGrid.HeadingRow>
+      <Grid.Row columns={3}>
         <DetailsAddressColumns
           type={AddressColsType.residence}
           application={application}
           dataTestId="residenceAddress"
         />
-      </GridSection>
+      </Grid.Row>
 
-      <GridSection subtitle={t("application.contact.mailingAddress")} columns={3}>
+      <SectionWithGrid.HeadingRow>
+        {t("application.contact.mailingAddress")}
+      </SectionWithGrid.HeadingRow>
+      <Grid.Row columns={3}>
         <DetailsAddressColumns
           type={AddressColsType.mailing}
           application={application}
           dataTestId="mailingAddress"
         />
-      </GridSection>
+      </Grid.Row>
 
-      <GridSection subtitle={t("application.contact.workAddress")} columns={3}>
+      <SectionWithGrid.HeadingRow>
+        {t("application.contact.workAddress")}
+      </SectionWithGrid.HeadingRow>
+      <Grid.Row columns={3}>
         <DetailsAddressColumns
           type={AddressColsType.work}
           application={application}
           dataTestId="workAddress"
         />
-      </GridSection>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsTerms.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsTerms.tsx
index 02526828e1..cf98db245c 100644
--- a/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsTerms.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsTerms.tsx
@@ -1,19 +1,15 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailsTerms = () => {
   const application = useContext(ApplicationContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("application.review.terms.title")}
-      inset
-      grid={false}
-    >
-      <GridCell>
+    <SectionWithGrid heading={t("application.review.terms.title")} inset>
+      <Grid.Row>
         <FieldValue label={t("application.details.signatureOnTerms")} testId="signatureOnTerms">
           {(() => {
             if (application.acceptedTerms === null) {
@@ -25,8 +21,8 @@ const DetailsTerms = () => {
             }
           })()}
         </FieldValue>
-      </GridCell>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/FormMember.tsx b/sites/partners/src/components/applications/PaperApplicationForm/FormMember.tsx
index 100fdf1157..93fd326185 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/FormMember.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/FormMember.tsx
@@ -2,8 +2,6 @@ import React, { useMemo } from "react"
 import { HouseholdMember, Member } from "@bloom-housing/backend-core/types"
 import {
   t,
-  GridSection,
-  GridCell,
   DOBField,
   Field,
   Select,
@@ -13,10 +11,11 @@ import {
   Form,
   FormAddress,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { Card, Grid } from "@bloom-housing/ui-seeds"
 import { relationshipKeys, stateKeys } from "@bloom-housing/shared-helpers"
 import { useForm } from "react-hook-form"
 import { YesNoAnswer } from "../../../lib/helpers"
+import SectionWithGrid from "../../shared/SectionWithGrid"
 
 type ApplicationFormMemberProps = {
   onSubmit: (member: HouseholdMember) => void
@@ -112,118 +111,110 @@ const FormMember = ({ onSubmit, onClose, members, editedMemberId }: ApplicationF
 
   return (
     <Form onSubmit={() => false}>
-      <div className="border rounded-md p-8 bg-white">
-        <GridSection title={t("application.review.householdDetails")} columns={4}>
-          <GridCell>
-            <FieldValue label={t("application.name.firstName")}>
-              <Field
-                id="firstName"
-                name="firstName"
-                label={t("application.name.firstName")}
-                placeholder={t("application.name.firstName")}
-                register={register}
-                readerOnly
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("application.name.middleName")}>
-              <Field
-                id="middleName"
-                name="middleName"
-                label={t("application.name.middleNameOptional")}
-                placeholder={t("application.name.middleNameOptional")}
-                register={register}
-                readerOnly
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("application.name.lastName")}>
-              <Field
-                id="lastName"
-                name="lastName"
-                label={t("application.name.lastName")}
-                placeholder={t("application.name.lastName")}
-                register={register}
-                readerOnly
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("application.household.member.dateOfBirth")}>
-              <DOBField
-                id="dateOfBirth"
-                name="dateOfBirth"
-                register={register}
-                error={errors?.dateOfBirth}
-                watch={watch}
-                label={t("application.name.yourDateOfBirth")}
-                readerOnly
-              />
-            </FieldValue>
-          </GridCell>
-
-          <GridCell>
-            <FieldValue label={t("t.relationship")}>
-              <Select
-                id="relationship"
-                name="relationship"
-                label={t("t.relationship")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={relationshipKeys}
-                keyPrefix="application.form.options.relationship"
-              />
-            </FieldValue>
-          </GridCell>
-
-          <GridCell>
-            <FieldValue label={t("application.add.sameAddressAsPrimary")}>
-              <FieldGroup
-                name="sameAddress"
-                type="radio"
-                register={register}
-                fields={sameAddressOptions}
-                fieldClassName="m-0"
-                fieldGroupClassName="flex h-12 items-center"
-              />
-            </FieldValue>
-          </GridCell>
-
-          <GridCell>
-            <FieldValue label={t("application.details.workInRegion")}>
-              <FieldGroup
-                name="workInRegion"
-                type="radio"
-                register={register}
-                fields={workInRegionOptions}
-                fieldClassName="m-0"
-                fieldGroupClassName="flex h-12 items-center"
-              />
-            </FieldValue>
-          </GridCell>
-        </GridSection>
-
-        {sameAddressField === YesNoAnswer.No && (
-          <FormAddress
-            subtitle={t("application.details.residenceAddress")}
-            dataKey="address"
-            register={register}
-            stateKeys={stateKeys}
-          />
-        )}
-
-        {workInRegionField === YesNoAnswer.Yes && (
-          <FormAddress
-            subtitle={t("application.contact.workAddress")}
-            dataKey="workAddress"
-            register={register}
-            stateKeys={stateKeys}
-          />
-        )}
-      </div>
+      <Card>
+        <Card.Section>
+          <SectionWithGrid heading={t("application.review.householdDetails")}>
+            <Grid.Row>
+              <Grid.Cell>
+                <Field
+                  id="firstName"
+                  name="firstName"
+                  label={t("application.name.firstName")}
+                  placeholder={t("application.name.firstName")}
+                  register={register}
+                />
+              </Grid.Cell>
+
+              <Grid.Cell>
+                <Field
+                  id="middleName"
+                  name="middleName"
+                  label={t("application.name.middleNameOptional")}
+                  placeholder={t("application.name.middleNameOptional")}
+                  register={register}
+                />
+              </Grid.Cell>
+
+              <Grid.Cell>
+                <Field
+                  id="lastName"
+                  name="lastName"
+                  label={t("application.name.lastName")}
+                  placeholder={t("application.name.lastName")}
+                  register={register}
+                />
+              </Grid.Cell>
+
+              <Grid.Cell>
+                <DOBField
+                  id="dateOfBirth"
+                  name="dateOfBirth"
+                  register={register}
+                  error={errors?.dateOfBirth}
+                  watch={watch}
+                  label={t("application.household.member.dateOfBirth")}
+                />
+              </Grid.Cell>
+            </Grid.Row>
+
+            <Grid.Row>
+              <Grid.Cell>
+                <Select
+                  id="relationship"
+                  name="relationship"
+                  label={t("t.relationship")}
+                  register={register}
+                  controlClassName="control"
+                  options={relationshipKeys}
+                  keyPrefix="application.form.options.relationship"
+                />
+              </Grid.Cell>
+
+              <Grid.Cell>
+                <FieldGroup
+                  name="sameAddress"
+                  type="radio"
+                  register={register}
+                  groupLabel={t("application.add.sameAddressAsPrimary")}
+                  fields={sameAddressOptions}
+                  fieldClassName="m-0"
+                  fieldGroupClassName="flex h-12 items-center"
+                />
+              </Grid.Cell>
+
+              <Grid.Cell>
+                <FieldGroup
+                  name="workInRegion"
+                  type="radio"
+                  register={register}
+                  groupLabel={t("application.details.workInRegion")}
+                  fields={workInRegionOptions}
+                  fieldClassName="m-0"
+                  fieldGroupClassName="flex h-12 items-center"
+                />
+              </Grid.Cell>
+            </Grid.Row>
+          </SectionWithGrid>
+
+          {sameAddressField === YesNoAnswer.No && (
+            <FormAddress
+              subtitle={t("application.details.residenceAddress")}
+              dataKey="address"
+              register={register}
+              stateKeys={stateKeys}
+            />
+          )}
+
+          {workInRegionField === YesNoAnswer.Yes && (
+            <FormAddress
+              subtitle={t("application.contact.workAddress")}
+              dataKey="workAddress"
+              register={register}
+              stateKeys={stateKeys}
+            />
+          )}
+        </Card.Section>
+      </Card>
 
       <div className="mt-6">
         <Button
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormAlternateContact.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormAlternateContact.tsx
index ec10996eb6..274ebb898b 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormAlternateContact.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormAlternateContact.tsx
@@ -1,17 +1,9 @@
 import React, { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
-import {
-  t,
-  GridSection,
-  Select,
-  GridCell,
-  Field,
-  emailRegex,
-  PhoneField,
-  FormAddress,
-} from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Select, Field, emailRegex, PhoneField, FormAddress } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { altContactRelationshipKeys, stateKeys } from "@bloom-housing/shared-helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const FormAlternateContact = () => {
   const formMethods = useFormContext()
@@ -32,49 +24,43 @@ const FormAlternateContact = () => {
   }, [setValue, clearErrors, alternatePhoneValue])
 
   return (
-    <GridSection title={t("application.alternateContact.type.label")} grid={false} separator>
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue label={t("application.name.firstName")}>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.alternateContact.type.label")}>
+        <Grid.Row columns={3}>
+          <Grid.Cell>
             <Field
               id="application.alternateContact.firstName"
               name="application.alternateContact.firstName"
               label={t("application.name.firstName")}
               placeholder={t("application.name.firstName")}
               register={register}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
-          <FieldValue label={t("application.name.lastName")}>
+          <Grid.Cell>
             <Field
               id="application.alternateContact.lastName"
               name="application.alternateContact.lastName"
               placeholder={t("application.name.lastName")}
               register={register}
               label={t("application.name.lastName")}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
-          <FieldValue label={t("application.details.agency")}>
+          <Grid.Cell>
             <Field
               id="application.alternateContact.agency"
               name="application.alternateContact.agency"
               label={t("application.details.agency")}
               placeholder={t("application.alternateContact.name.caseManagerAgencyFormPlaceHolder")}
               register={register}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
+        </Grid.Row>
 
-        <GridCell>
-          <FieldValue label={t("t.email")}>
+        <Grid.Row>
+          <Grid.Cell>
             <Field
               id="application.alternateContact.emailAddress"
               name="application.alternateContact.emailAddress"
@@ -85,13 +71,10 @@ const FormAlternateContact = () => {
               error={errors.application?.alternateContact?.emailAddress}
               errorMessage={t("errors.emailAddressError")}
               register={register}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
-          <FieldValue label={t("t.phone")}>
+          <Grid.Cell>
             <PhoneField
               id="application.alternateContact.phoneNumber"
               name="application.alternateContact.phoneNumber"
@@ -101,51 +84,46 @@ const FormAlternateContact = () => {
               control={control}
               controlClassName="control"
               label={t("t.phone")}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
-          <FieldValue label={t("t.relationship")}>
+          <Grid.Cell>
             <Select
               id="application.alternateContact.type"
               name="application.alternateContact.type"
               label={t("t.relationship")}
-              labelClassName="sr-only"
               register={register}
               controlClassName="control"
               options={altContactRelationshipOptions}
               keyPrefix="application.alternateContact.type.options"
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
+        </Grid.Row>
 
         {alternateContactType === "other" && (
-          <GridCell>
-            <FieldValue label={t("t.otherRelationShip")}>
+          <Grid.Row>
+            <Grid.Cell>
               <Field
                 id="application.alternateContact.otherType"
                 name="application.alternateContact.otherType"
                 label={t("t.otherRelationShip")}
                 placeholder={t("t.relationship")}
                 register={register}
-                readerOnly
               />
-            </FieldValue>
-          </GridCell>
+            </Grid.Cell>
+          </Grid.Row>
         )}
-      </GridSection>
 
-      <GridSection grid={false}>
-        <FormAddress
-          subtitle={t("application.contact.mailingAddress")}
-          dataKey="application.alternateContact.mailingAddress"
-          register={register}
-          stateKeys={stateKeys}
-        />
-      </GridSection>
-    </GridSection>
+        <Grid.Row>
+          <FormAddress
+            subtitle={t("application.contact.mailingAddress")}
+            dataKey="application.alternateContact.mailingAddress"
+            register={register}
+            stateKeys={stateKeys}
+          />
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormApplicationData.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormApplicationData.tsx
index 1630e4a70a..9036e0a5eb 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormApplicationData.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormApplicationData.tsx
@@ -1,15 +1,9 @@
 import React, { useEffect } from "react"
-import {
-  t,
-  GridSection,
-  Select,
-  TimeField,
-  DateField,
-  DateFieldValues,
-} from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Select, TimeField, DateField, DateFieldValues } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { applicationLanguageKeys } from "@bloom-housing/shared-helpers"
 import { useFormContext } from "react-hook-form"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const FormApplicationData = () => {
   const formMethods = useFormContext()
@@ -34,9 +28,9 @@ const FormApplicationData = () => {
   }, [dateSubmittedError, isDateRequired, setValue])
 
   return (
-    <GridSection title={t("application.details.applicationData")} grid={false}>
-      <GridSection columns={3}>
-        <FieldValue label={t("application.add.dateSubmitted")}>
+    <SectionWithGrid heading={t("application.details.applicationData")}>
+      <Grid.Row>
+        <Grid.Cell>
           <DateField
             id="dateSubmitted"
             name="dateSubmitted"
@@ -44,14 +38,13 @@ const FormApplicationData = () => {
             error={errors?.dateSubmitted}
             watch={watch}
             label={t("application.add.dateSubmitted")}
-            readerOnly
             errorMessage={t("errors.dateError")}
             required={!!isDateRequired}
             labelClass={"text__caps-spaced"}
           />
-        </FieldValue>
+        </Grid.Cell>
 
-        <FieldValue label={t("application.add.timeSubmitted")}>
+        <Grid.Cell>
           <TimeField
             id="timeSubmitted"
             name="timeSubmitted"
@@ -59,27 +52,25 @@ const FormApplicationData = () => {
             register={register}
             watch={watch}
             error={!!errors?.timeSubmitted}
-            readerOnly
             disabled={!isDateFilled}
             required={!!isDateFilled}
             labelClass={"text__caps-spaced"}
           />
-        </FieldValue>
+        </Grid.Cell>
 
-        <FieldValue label={t("application.add.languageSubmittedIn")}>
+        <Grid.Cell>
           <Select
             id="application.language"
             name="application.language"
             label={t("application.add.languageSubmittedIn")}
-            labelClassName="sr-only"
             register={register}
             controlClassName="control"
             options={["", ...applicationLanguageKeys]}
             keyPrefix="languages"
           />
-        </FieldValue>
-      </GridSection>
-    </GridSection>
+        </Grid.Cell>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx
index ae6c6e6faa..062e776a16 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormDemographics.tsx
@@ -1,9 +1,10 @@
 import React, { useMemo } from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, GridCell, Select, FieldGroup } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Select, FieldGroup } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { ethnicityKeys, raceKeys, howDidYouHear } from "@bloom-housing/shared-helpers"
 import { Demographics } from "@bloom-housing/backend-core/types"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type FormDemographicsProps = {
   formValues: Demographics
@@ -60,41 +61,47 @@ const FormDemographics = ({ formValues }: FormDemographicsProps) => {
   }, [register, isKeyIncluded, getCustomValue])
 
   return (
-    <GridSection title={t("application.add.demographicsInformation")} columns={3} separator>
-      <GridCell>
-        <FieldValue label={t("application.add.race")}>
-          <FieldGroup name="race" fields={raceOptions} type="checkbox" register={register} />
-        </FieldValue>
-      </GridCell>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.add.demographicsInformation")}>
+        <Grid.Row>
+          <Grid.Cell>
+            <FieldGroup
+              name="race"
+              fields={raceOptions}
+              type="checkbox"
+              register={register}
+              groupLabel={t("application.add.race")}
+            />
+          </Grid.Cell>
 
-      <GridCell>
-        <FieldValue label={t("application.add.ethnicity")}>
-          <Select
-            id="application.demographics.ethnicity"
-            name="application.demographics.ethnicity"
-            placeholder={t("t.selectOne")}
-            label={t("application.add.ethnicity")}
-            labelClassName="sr-only"
-            register={register}
-            controlClassName="control"
-            options={ethnicityKeys}
-            keyPrefix="application.review.demographics.ethnicityOptions"
-          />
-        </FieldValue>
-      </GridCell>
-
-      <GridCell span={2}>
-        <FieldValue label={t("application.add.howDidYouHearAboutUs")}>
-          <FieldGroup
-            type="checkbox"
-            name="application.demographics.howDidYouHear"
-            fields={howDidYouHearOptions}
-            register={register}
-            fieldGroupClassName="grid grid-cols-2 mt-4"
-          />
-        </FieldValue>
-      </GridCell>
-    </GridSection>
+          <Grid.Cell>
+            <Select
+              id="application.demographics.ethnicity"
+              name="application.demographics.ethnicity"
+              placeholder={t("t.selectOne")}
+              label={t("application.add.ethnicity")}
+              register={register}
+              controlClassName="control"
+              options={ethnicityKeys}
+              keyPrefix="application.review.demographics.ethnicityOptions"
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={2}>
+          <Grid.Cell>
+            <FieldGroup
+              type="checkbox"
+              name="application.demographics.howDidYouHear"
+              fields={howDidYouHearOptions}
+              register={register}
+              groupLabel={t("application.add.howDidYouHearAboutUs")}
+              fieldGroupClassName="grid grid-cols-2 mt-4"
+            />
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdDetails.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdDetails.tsx
index 6552f060ea..e00e97ccc2 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdDetails.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdDetails.tsx
@@ -1,10 +1,11 @@
 import React from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, GridCell, Field, FieldGroup } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Field, FieldGroup } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { getUniqueUnitTypes, adaFeatureKeys } from "@bloom-housing/shared-helpers"
 import { Accessibility, Unit, UnitType } from "@bloom-housing/backend-core/types"
 import { YesNoAnswer } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type FormHouseholdDetailsProps = {
   listingUnits: Unit[]
@@ -52,93 +53,95 @@ const FormHouseholdDetails = ({
   })
 
   return (
-    <GridSection title={t("application.review.householdDetails")} separator>
-      <GridCell>
-        <FieldValue label={t("application.details.preferredUnitSizes")}>
-          <FieldGroup
-            type="checkbox"
-            name="application.preferredUnit"
-            fields={preferredUnitOptions}
-            register={register}
-            fieldGroupClassName="grid grid-cols-1 mt-4"
-            fieldClassName="ml-0"
-          />
-        </FieldValue>
-      </GridCell>
-      <GridCell>
-        <FieldValue label={t("application.details.adaPriorities")}>
-          <fieldset>
-            <legend className="sr-only">{t("application.details.adaPriorities")}</legend>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.review.householdDetails")}>
+        <Grid.Row>
+          <Grid.Cell>
             <FieldGroup
               type="checkbox"
-              name="application.accessibility"
-              fields={adaFeaturesOptions}
+              name="application.preferredUnit"
+              fields={preferredUnitOptions}
+              groupLabel={t("application.details.preferredUnitSizes")}
               register={register}
               fieldGroupClassName="grid grid-cols-1 mt-4"
               fieldClassName="ml-0"
             />
-          </fieldset>
-        </FieldValue>
-      </GridCell>
-      <GridCell>
-        <FieldValue label={t("application.household.expectingChanges.title")}>
-          <div className="flex h-12 items-center">
-            <Field
-              id="application.householdExpectingChangesYes"
-              name="application.householdExpectingChanges"
-              className="m-0"
-              type="radio"
-              label={t("t.yes")}
-              register={register}
-              inputProps={{
-                value: YesNoAnswer.Yes,
-              }}
-            />
+          </Grid.Cell>
 
-            <Field
-              id="application.householdExpectingChangesNo"
-              name="application.householdExpectingChanges"
-              className="m-0"
-              type="radio"
-              label={t("t.no")}
-              register={register}
-              inputProps={{
-                value: YesNoAnswer.No,
-              }}
-            />
-          </div>
-        </FieldValue>
-      </GridCell>
-      <GridCell>
-        <FieldValue label={t("application.household.householdStudent.title")}>
-          <div className="flex h-12 items-center">
-            <Field
-              id="application.householdStudentYes"
-              name="application.householdStudent"
-              className="m-0"
-              type="radio"
-              label={t("t.yes")}
-              register={register}
-              inputProps={{
-                value: YesNoAnswer.Yes,
-              }}
-            />
+          <Grid.Cell>
+            <fieldset>
+              <FieldGroup
+                type="checkbox"
+                name="application.accessibility"
+                fields={adaFeaturesOptions}
+                register={register}
+                groupLabel={t("application.details.adaPriorities")}
+                fieldGroupClassName="grid grid-cols-1 mt-4"
+                fieldClassName="ml-0"
+              />
+            </fieldset>
+          </Grid.Cell>
 
-            <Field
-              id="application.householdStudentNo"
-              name="application.householdStudent"
-              className="m-0"
-              type="radio"
-              label={t("t.no")}
-              register={register}
-              inputProps={{
-                value: YesNoAnswer.No,
-              }}
-            />
-          </div>
-        </FieldValue>
-      </GridCell>
-    </GridSection>
+          <FieldValue label={t("application.household.expectingChanges.title")}>
+            <div className="flex h-12 items-center">
+              <Field
+                id="application.householdExpectingChangesYes"
+                name="application.householdExpectingChanges"
+                className="m-0"
+                type="radio"
+                label={t("t.yes")}
+                register={register}
+                inputProps={{
+                  value: YesNoAnswer.Yes,
+                }}
+              />
+
+              <Field
+                id="application.householdExpectingChangesNo"
+                name="application.householdExpectingChanges"
+                className="m-0"
+                type="radio"
+                label={t("t.no")}
+                register={register}
+                inputProps={{
+                  value: YesNoAnswer.No,
+                }}
+              />
+            </div>
+          </FieldValue>
+        </Grid.Row>
+        <Grid.Row columns="3">
+          <FieldValue label={t("application.household.householdStudent.title")}>
+            <div className="flex h-12 items-center">
+              <Field
+                id="application.householdStudentYes"
+                name="application.householdStudent"
+                className="m-0"
+                type="radio"
+                label={t("t.yes")}
+                register={register}
+                inputProps={{
+                  value: YesNoAnswer.Yes,
+                }}
+              />
+
+              <Field
+                id="application.householdStudentNo"
+                name="application.householdStudent"
+                className="m-0"
+                type="radio"
+                label={t("t.no")}
+                register={register}
+                inputProps={{
+                  value: YesNoAnswer.No,
+                }}
+              />
+            </div>
+          </FieldValue>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx
index b505d0633e..497e43fd99 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdIncome.tsx
@@ -1,9 +1,10 @@
 import React from "react"
-import { t, GridSection, GridCell, Field, Select } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Field, Select } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { useFormContext } from "react-hook-form"
 import { IncomePeriod } from "@bloom-housing/backend-core/types"
 import { YesNoAnswer } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const FormHouseholdIncome = () => {
   const formMethods = useFormContext()
@@ -14,9 +15,10 @@ const FormHouseholdIncome = () => {
   const incomePeriodValue: string = watch("application.incomePeriod")
 
   return (
-    <GridSection title={t("application.details.householdIncome")} grid={false} separator>
-      <GridSection columns={3}>
-        <GridCell>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.details.householdIncome")}>
+        <Grid.Row columns={3}>
           <FieldValue label={t("application.add.incomePeriod")}>
             <div className="flex h-12 items-center">
               <Field
@@ -52,12 +54,10 @@ const FormHouseholdIncome = () => {
               />
             </div>
           </FieldValue>
-        </GridCell>
-      </GridSection>
+        </Grid.Row>
 
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue label={t("application.details.annualIncome")}>
+        <Grid.Row columns={3}>
+          <Grid.Cell>
             <Field
               id="incomeYear"
               type="number"
@@ -66,13 +66,10 @@ const FormHouseholdIncome = () => {
               placeholder={t("t.enterAmount")}
               register={register}
               disabled={incomePeriodValue !== IncomePeriod.perYear}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
-          <FieldValue label={t("application.details.monthlyIncome")}>
+          <Grid.Cell>
             <Field
               id="incomeMonth"
               type="number"
@@ -81,28 +78,24 @@ const FormHouseholdIncome = () => {
               placeholder={t("t.enterAmount")}
               register={register}
               disabled={incomePeriodValue !== IncomePeriod.perMonth}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
-          <FieldValue label={t("application.details.vouchers")}>
+          <Grid.Cell>
             <Select
               id="application.incomeVouchers"
               name="application.incomeVouchers"
               placeholder={t("t.selectOne")}
               label={t("application.details.vouchers")}
-              labelClassName="sr-only"
               register={register}
               controlClassName="control"
               options={[YesNoAnswer.Yes, YesNoAnswer.No]}
               keyPrefix="t"
             />
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-    </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdMembers.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdMembers.tsx
index 44d132d7c2..474b7bb96e 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdMembers.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormHouseholdMembers.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useMemo, useCallback } from "react"
 import {
   t,
-  GridSection,
   MinimalTable,
   Button,
   AppearanceSizeType,
@@ -12,6 +11,7 @@ import {
 import { HouseholdMember } from "@bloom-housing/backend-core/types"
 import { YesNoAnswer } from "../../../../lib/helpers"
 import { FormMember } from "../FormMember"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type FormHouseholdMembersProps = {
   householdMembers: HouseholdMember[]
@@ -134,24 +134,23 @@ const FormHouseholdMembers = ({
 
   return (
     <>
-      <GridSection title={t("application.household.householdMembers")} grid={false} separator>
-        <div className="bg-gray-300 px-4 py-5">
-          {!!householdMembers.length && (
-            <div className="mb-5">
-              <MinimalTable headers={memberTableHeaders} data={memberTableData} />
-            </div>
-          )}
-
-          <Button
-            type="button"
-            size={AppearanceSizeType.normal}
-            onClick={() => setMembersDrawer(householdMembers.length + 1)}
-            dataTestId={"addHouseholdMemberButton"}
-          >
-            {t("application.add.addHouseholdMember")}
-          </Button>
-        </div>
-      </GridSection>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.household.householdMembers")} bypassGrid inset>
+        {!!householdMembers.length && (
+          <div className="mb-5">
+            <MinimalTable headers={memberTableHeaders} data={memberTableData} />
+          </div>
+        )}
+
+        <Button
+          type="button"
+          size={AppearanceSizeType.normal}
+          onClick={() => setMembersDrawer(householdMembers.length + 1)}
+          dataTestId={"addHouseholdMemberButton"}
+        >
+          {t("application.add.addHouseholdMember")}
+        </Button>
+      </SectionWithGrid>
 
       <Drawer
         open={!!membersDrawer}
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx
index aed582f578..84535a9bd8 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx
@@ -1,13 +1,6 @@
 import React, { useMemo } from "react"
-import {
-  Field,
-  t,
-  GridSection,
-  GridCell,
-  FormAddress,
-  FieldGroup,
-} from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { Field, t, FormAddress, FieldGroup } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { useFormContext } from "react-hook-form"
 import { stateKeys, getInputType, fieldName } from "@bloom-housing/shared-helpers"
 import {
@@ -16,6 +9,7 @@ import {
   MultiselectOption,
   MultiselectQuestion,
 } from "@bloom-housing/backend-core/types"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type FormMultiselectQuestionsProps = {
   questions: ListingMultiselectQuestion[]
@@ -103,13 +97,14 @@ const FormMultiselectQuestions = ({
   }
 
   return (
-    <GridSection title={sectionTitle} separator grid={false}>
-      <GridSection columns={2}>
-        {questions?.map((listingQuestion) => {
-          const question = listingQuestion?.multiselectQuestion
-          const inputType = getInputType(question.options)
-          return (
-            <GridCell key={question.text}>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={sectionTitle}>
+        <Grid.Row columns={2}>
+          {questions?.map((listingQuestion) => {
+            const question = listingQuestion?.multiselectQuestion
+            const inputType = getInputType(question.options)
+            return (
               <FieldValue label={question.text}>
                 {inputType === "checkbox" ? (
                   <fieldset className={"mt-4"}>
@@ -135,11 +130,11 @@ const FormMultiselectQuestions = ({
                   getRadioFields(question?.options, question)
                 )}
               </FieldValue>
-            </GridCell>
-          )
-        })}
-      </GridSection>
-    </GridSection>
+            )
+          })}
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrimaryApplicant.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrimaryApplicant.tsx
index 4c50fee852..0ebb60f5eb 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrimaryApplicant.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrimaryApplicant.tsx
@@ -2,19 +2,18 @@ import React, { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
 import {
   t,
-  GridSection,
   DOBField,
   Select,
-  GridCell,
   Field,
   emailRegex,
   PhoneField,
   FieldGroup,
   FormAddress,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { phoneNumberKeys, contactPreferencesKeys, stateKeys } from "@bloom-housing/shared-helpers"
 import { YesNoAnswer } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const FormPrimaryApplicant = () => {
   const formMethods = useFormContext()
@@ -51,46 +50,38 @@ const FormPrimaryApplicant = () => {
   }, [setValue, clearErrors, additionalPhoneValue])
 
   return (
-    <GridSection title={t("application.household.primaryApplicant")} grid={false} separator>
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue label={t("application.name.firstName")}>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.household.primaryApplicant")}>
+        <Grid.Row columns={3}>
+          <Grid.Cell>
             <Field
               id="application.applicant.firstName"
               name="application.applicant.firstName"
               label={t("application.name.firstName")}
               placeholder={t("application.name.firstName")}
               register={register}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("application.name.middleName")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <Field
               id="application.applicant.middleName"
               name="application.applicant.middleName"
               label={t("application.name.middleNameOptional")}
               placeholder={t("application.name.middleNameOptional")}
               register={register}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("application.name.lastName")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <Field
               id="application.applicant.lastName"
               name="application.applicant.lastName"
               label={t("application.name.lastName")}
               placeholder={t("application.name.lastName")}
               register={register}
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("application.household.member.dateOfBirth")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <DOBField
               id="dateOfBirth"
               name="dateOfBirth"
@@ -99,50 +90,40 @@ const FormPrimaryApplicant = () => {
               errorMessage={t("errors.dateOfBirthErrorAge")}
               watch={watch}
               validateAge18={true}
-              label={t("application.name.yourDateOfBirth")}
-              readerOnly
+              label={t("application.household.member.dateOfBirth")}
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("t.email")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <Field
               id="application.applicant.emailAddress"
               name="application.applicant.emailAddress"
               type="email"
               placeholder="example@web.com"
-              label={t("application.name.yourEmailAddress")}
-              readerOnly={true}
+              label={t("t.email")}
               validation={{ pattern: emailRegex }}
               error={errors.application?.applicant?.emailAddress}
               errorMessage={t("errors.emailAddressError")}
               register={register}
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("t.phone")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <PhoneField
               id="phoneNumber"
               name="phoneNumber"
-              label={t("application.contact.yourPhoneNumber")}
+              label={t("t.phone")}
               required={false}
               error={errors?.phoneNumber}
               errorMessage={t("errors.phoneNumberError")}
               control={control}
               controlClassName="control"
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("applications.table.phoneType")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <Select
               id="application.applicant.phoneNumberType"
               name="application.applicant.phoneNumberType"
               placeholder={t("application.contact.phoneNumberTypes.prompt")}
               label={t("application.contact.phoneNumberTypes.prompt")}
-              labelClassName="sr-only"
               error={errors.application?.applicant?.phoneNumberType}
               errorMessage={t("errors.phoneNumberTypeError")}
               register={register}
@@ -152,25 +133,20 @@ const FormPrimaryApplicant = () => {
               validation={{ required: !!phoneValue?.length }}
               disabled={!phoneValue?.length}
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("t.additionalPhone")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <PhoneField
               id="application.additionalPhoneNumber"
               name="application.additionalPhoneNumber"
-              label={t("application.contact.yourAdditionalPhoneNumber")}
+              label={t("t.additionalPhone")}
               required={false}
               error={errors.application?.additionalPhoneNumber}
               errorMessage={t("errors.phoneNumberError")}
               control={control}
               controlClassName="control"
-              readerOnly
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue label={t("applications.table.additionalPhoneType")}>
+          </Grid.Cell>
+          <Grid.Cell>
             <Select
               id="application.additionalPhoneNumberType"
               name="application.additionalPhoneNumberType"
@@ -179,28 +155,24 @@ const FormPrimaryApplicant = () => {
               register={register}
               controlClassName="control"
               placeholder={t("application.contact.phoneNumberTypes.prompt")}
-              label={t("application.contact.phoneNumberTypes.prompt")}
-              labelClassName={"sr-only"}
+              label={t("applications.table.additionalPhoneType")}
               options={phoneNumberKeys}
               keyPrefix="application.contact.phoneNumberTypes"
               validation={{ required: !!additionalPhoneValue?.length }}
               disabled={!additionalPhoneValue?.length}
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
-          <FieldValue label={t("application.contact.preferredContactType")}>
+          <Grid.Cell>
             <FieldGroup
               name="application.contactPreferences"
               fields={contactPreferencesOptions}
               type="checkbox"
               register={register}
+              groupLabel={t("application.contact.preferredContactType")}
             />
-          </FieldValue>
-        </GridCell>
+          </Grid.Cell>
 
-        <GridCell>
           <FieldValue label={t("application.add.workInRegion")}>
             <div className="flex items-center">
               <Field
@@ -228,35 +200,35 @@ const FormPrimaryApplicant = () => {
               />
             </div>
           </FieldValue>
-        </GridCell>
-      </GridSection>
+        </Grid.Row>
 
-      <FormAddress
-        subtitle={t("application.details.residenceAddress")}
-        dataKey="application.applicant.address"
-        enableMailCheckbox={true}
-        register={register}
-        stateKeys={stateKeys}
-      />
-
-      {mailingAddressValue && (
         <FormAddress
-          subtitle={t("application.contact.mailingAddress")}
-          dataKey="application.mailingAddress"
+          subtitle={t("application.details.residenceAddress")}
+          dataKey="application.applicant.address"
+          enableMailCheckbox={true}
           register={register}
           stateKeys={stateKeys}
         />
-      )}
 
-      {workInRegionValue === YesNoAnswer.Yes && (
-        <FormAddress
-          subtitle={t("application.contact.workAddress")}
-          dataKey="application.applicant.workAddress"
-          register={register}
-          stateKeys={stateKeys}
-        />
-      )}
-    </GridSection>
+        {mailingAddressValue && (
+          <FormAddress
+            subtitle={t("application.contact.mailingAddress")}
+            dataKey="application.mailingAddress"
+            register={register}
+            stateKeys={stateKeys}
+          />
+        )}
+
+        {workInRegionValue === YesNoAnswer.Yes && (
+          <FormAddress
+            subtitle={t("application.contact.workAddress")}
+            dataKey="application.applicant.workAddress"
+            register={register}
+            stateKeys={stateKeys}
+          />
+        )}
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrograms.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrograms.tsx
index f074f1313d..8356c1c3d0 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrograms.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormPrograms.tsx
@@ -1,9 +1,10 @@
 import React from "react"
-import { t, GridSection, GridCell, FieldGroup } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, FieldGroup } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { useFormContext } from "react-hook-form"
 import { getInputType } from "@bloom-housing/shared-helpers"
 import { ListingMultiselectQuestion } from "@bloom-housing/backend-core"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type FormProgramsProps = {
   programs: ListingMultiselectQuestion[]
@@ -16,11 +17,12 @@ const FormPrograms = ({ programs }: FormProgramsProps) => {
   const { register } = formMethods
 
   return (
-    <GridSection title={t("application.details.programs")} separator grid={false}>
-      <GridSection columns={2}>
-        {programs?.map((listingProgram) => {
-          return (
-            <GridCell key={listingProgram?.multiselectQuestion?.text}>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.details.programs")}>
+        <Grid.Row columns={2}>
+          {programs?.map((listingProgram) => {
+            return (
               <FieldValue label={listingProgram?.multiselectQuestion?.text}>
                 <fieldset>
                   <FieldGroup
@@ -39,11 +41,11 @@ const FormPrograms = ({ programs }: FormProgramsProps) => {
                   />
                 </fieldset>
               </FieldValue>
-            </GridCell>
-          )
-        })}
-      </GridSection>
-    </GridSection>
+            )
+          })}
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormTerms.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormTerms.tsx
index f02c82c431..d004c8faf0 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormTerms.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormTerms.tsx
@@ -1,8 +1,9 @@
 import React from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, GridCell, Field } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Field } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { YesNoAnswer } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const FormTerms = () => {
   const formMethods = useFormContext()
@@ -10,37 +11,40 @@ const FormTerms = () => {
   const { register } = formMethods
 
   return (
-    <GridSection title={t("application.review.terms.title")} separator>
-      <GridCell>
-        <FieldValue label={t("application.details.signatureOnTerms")}>
-          <div className="flex h-12 items-center">
-            <Field
-              id="application.acceptedTermsYes"
-              name="application.acceptedTerms"
-              className="m-0"
-              type="radio"
-              label={t("t.yes")}
-              register={register}
-              inputProps={{
-                value: YesNoAnswer.Yes,
-              }}
-            />
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("application.review.terms.title")}>
+        <Grid.Row>
+          <FieldValue label={t("application.details.signatureOnTerms")}>
+            <div className="flex h-12 items-center">
+              <Field
+                id="application.acceptedTermsYes"
+                name="application.acceptedTerms"
+                className="m-0"
+                type="radio"
+                label={t("t.yes")}
+                register={register}
+                inputProps={{
+                  value: YesNoAnswer.Yes,
+                }}
+              />
 
-            <Field
-              id="application.acceptedTermsNo"
-              name="application.acceptedTerms"
-              className="m-0"
-              type="radio"
-              label={t("t.no")}
-              register={register}
-              inputProps={{
-                value: YesNoAnswer.No,
-              }}
-            />
-          </div>
-        </FieldValue>
-      </GridCell>
-    </GridSection>
+              <Field
+                id="application.acceptedTermsNo"
+                name="application.acceptedTerms"
+                className="m-0"
+                type="radio"
+                label={t("t.no")}
+                register={register}
+                inputProps={{
+                  value: YesNoAnswer.No,
+                }}
+              />
+            </div>
+          </FieldValue>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/ListingFormActions.tsx b/sites/partners/src/components/listings/ListingFormActions.tsx
index f8f3ff9980..5e5e87fcc4 100644
--- a/sites/partners/src/components/listings/ListingFormActions.tsx
+++ b/sites/partners/src/components/listings/ListingFormActions.tsx
@@ -4,7 +4,6 @@ import dayjs from "dayjs"
 import {
   t,
   Button,
-  GridCell,
   AppearanceStyleType,
   AppearanceBorderType,
   StatusMessages,
@@ -13,6 +12,7 @@ import {
   Icon,
   setSiteAlertMessage,
 } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { pdfUrlFromListingEvents, AuthContext } from "@bloom-housing/shared-helpers"
 import { ListingContext } from "./ListingContext"
 import {
@@ -74,7 +74,7 @@ const ListingFormActions = ({
 
   const actions = useMemo(() => {
     const cancelButton = (
-      <GridCell className="flex" key="btn-cancel">
+      <Grid.Cell className="flex" key="btn-cancel">
         <LinkButton
           unstyled
           fullWidth
@@ -84,11 +84,11 @@ const ListingFormActions = ({
         >
           {t("t.cancel")}
         </LinkButton>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const editFromDetailButton = (
-      <GridCell key="btn-edit">
+      <Grid.Cell key="btn-edit">
         <LocalizedLink href={`/listings/${listingId}/edit`}>
           <Button
             styleType={AppearanceStyleType.primary}
@@ -100,11 +100,11 @@ const ListingFormActions = ({
             {t("t.edit")}
           </Button>
         </LocalizedLink>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const publishButton = (
-      <GridCell key="btn-publish">
+      <Grid.Cell key="btn-publish">
         <Button
           id="publishButton"
           styleType={AppearanceStyleType.success}
@@ -116,11 +116,11 @@ const ListingFormActions = ({
         >
           {t("listings.actions.publish")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const saveDraftButton = (
-      <GridCell key="btn-draft">
+      <Grid.Cell key="btn-draft">
         <Button
           type="button"
           fullWidth
@@ -128,11 +128,11 @@ const ListingFormActions = ({
         >
           {t("listings.actions.draft")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const saveExitButton = (
-      <GridCell key="btn-save">
+      <Grid.Cell key="btn-save">
         <Button
           styleType={AppearanceStyleType.primary}
           type="button"
@@ -142,11 +142,11 @@ const ListingFormActions = ({
         >
           {t("t.saveExit")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const closeButton = (
-      <GridCell key="btn-close">
+      <Grid.Cell key="btn-close">
         <Button
           type="button"
           fullWidth
@@ -154,11 +154,11 @@ const ListingFormActions = ({
         >
           {t("listings.actions.close")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const unpublishButton = (
-      <GridCell key="btn-unpublish">
+      <Grid.Cell key="btn-unpublish">
         <Button
           styleType={AppearanceStyleType.alert}
           fullWidth
@@ -168,11 +168,11 @@ const ListingFormActions = ({
         >
           {t("listings.actions.unpublish")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const editPostedResultsButton = (lotteryResults) => (
-      <GridCell className="flex" key="btn-edit-lottery">
+      <Grid.Cell className="flex" key="btn-edit-lottery">
         <Button
           type="button"
           unstyled
@@ -184,11 +184,11 @@ const ListingFormActions = ({
           {dayjs(lotteryResults?.startTime).format("MMMM DD, YYYY")}
           <Icon size="medium" symbol="edit" className="ml-2" />
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const postResultsButton = (
-      <GridCell key="btn-post-results">
+      <Grid.Cell key="btn-post-results">
         <Button
           type="button"
           fullWidth
@@ -196,11 +196,11 @@ const ListingFormActions = ({
         >
           {t("listings.actions.postResults")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const previewButton = (
-      <GridCell key="btn-preview">
+      <Grid.Cell key="btn-preview">
         <a
           target="_blank"
           href={`${listing?.jurisdiction.publicUrl}/preview/listings/${listingId}`}
@@ -209,22 +209,22 @@ const ListingFormActions = ({
             {t("listings.actions.preview")}
           </Button>
         </a>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const viewPostedResultsButton = (eventUrl: string) => (
-      <GridCell key="btn-preview-results">
+      <Grid.Cell key="btn-preview-results">
         <a href={eventUrl} target="_blank" className="inline-flex w-full">
           <Button type="button" unstyled fullWidth>
             {t("listings.actions.previewLotteryResults")}{" "}
             <Icon size="medium" symbol="link" className="ml-2" />
           </Button>
         </a>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const submitButton = (
-      <GridCell key="btn-submit">
+      <Grid.Cell key="btn-submit">
         <Button
           id="submitButton"
           styleType={AppearanceStyleType.success}
@@ -234,11 +234,11 @@ const ListingFormActions = ({
         >
           {t("t.submit")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const approveAndPublishButton = (
-      <GridCell key="btn-approve-and-publish">
+      <Grid.Cell key="btn-approve-and-publish">
         <Button
           id="approveAndPublishButton"
           styleType={AppearanceStyleType.success}
@@ -271,11 +271,11 @@ const ListingFormActions = ({
         >
           {t("listings.approval.approveAndPublish")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const requestChangesButton = (
-      <GridCell key="btn-request-changes">
+      <Grid.Cell key="btn-request-changes">
         <Button
           id="requestChangesButton"
           styleType={AppearanceStyleType.alert}
@@ -286,11 +286,11 @@ const ListingFormActions = ({
         >
           {t("listings.approval.requestChanges")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const reopenButton = (
-      <GridCell key="btn-reopen">
+      <Grid.Cell key="btn-reopen">
         <Button
           id="publishButton"
           styleType={AppearanceStyleType.success}
@@ -303,7 +303,7 @@ const ListingFormActions = ({
         >
           {t("listings.approval.reopen")}
         </Button>
-      </GridCell>
+      </Grid.Cell>
     )
 
     const lotteryResultsButton = (elements) => {
diff --git a/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx b/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx
index 81264ffaad..716133d8bd 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/DetailsUnitDrawer.tsx
@@ -1,16 +1,10 @@
 import React from "react"
-import {
-  AppearanceStyleType,
-  t,
-  GridSection,
-  Button,
-  Drawer,
-  GridCell,
-} from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { AppearanceStyleType, t, Button, Drawer } from "@bloom-housing/ui-components"
+import { Card, FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { Unit } from "@bloom-housing/backend-core/types"
 import { getRentType } from "../../../lib/helpers"
 import { useSingleAmiChartData } from "../../../lib/hooks"
+import SectionWithGrid from "../../shared/SectionWithGrid"
 
 export type UnitDrawer = Unit | null
 
@@ -35,17 +29,16 @@ const DetailUnitDrawer = ({ unit, setUnitDrawer }: UnitDrawerProps) => {
       ariaDescription={t("listings.unit.title")}
       onClose={() => setUnitDrawer(null)}
     >
-      <section className="border rounded-md p-8 bg-white mb-8">
-        <GridSection title={t("listings.unit.details")} tinted={true} inset={true} grid={false}>
-          <GridSection grid columns={4}>
-            <GridCell>
+      <Card spacing="lg" className="spacer-section">
+        <Card.Section>
+          <SectionWithGrid heading={t("listings.unit.details")} inset>
+            <Grid.Row columns={4}>
               <FieldValue
                 id="unit.unitNumber"
                 label={t("listings.unit.unitNumber")}
                 children={unit?.number || t("t.n/a")}
               />
-            </GridCell>
-            <GridCell>
+
               <FieldValue
                 label={t("listings.unit.type")}
                 children={
@@ -54,70 +47,55 @@ const DetailUnitDrawer = ({ unit, setUnitDrawer }: UnitDrawerProps) => {
                     : t("t.n/a")
                 }
               />
-            </GridCell>
-            <GridCell>
+
               <FieldValue
                 id="unit.numBathrooms"
                 label={t("listings.unit.numBathrooms")}
                 children={unit?.numBathrooms || t("t.n/a")}
               />
-            </GridCell>
 
-            <GridCell>
               <FieldValue
                 id="unit.floor"
                 label={t("listings.unit.floor")}
                 children={unit?.floor || t("t.n/a")}
               />
-            </GridCell>
 
-            <GridCell>
-              {" "}
               <FieldValue
                 id="unit.squareFootage"
                 label={t("listings.unit.squareFootage")}
                 children={unit?.sqFeet || t("t.n/a")}
               />
-            </GridCell>
 
-            <GridCell>
               <FieldValue
                 id="unit.minOccupancy"
                 label={t("listings.unit.minOccupancy")}
                 children={unit?.minOccupancy || t("t.n/a")}
               />
-            </GridCell>
 
-            <GridCell>
               <FieldValue
                 id="unit.maxOccupancy"
                 label={t("listings.unit.maxOccupancy")}
                 children={unit?.maxOccupancy || t("t.n/a")}
               />
-            </GridCell>
-          </GridSection>
-        </GridSection>
-        <GridSection title={t("listings.unit.eligibility")} tinted={true} inset={true} grid={false}>
-          <GridSection grid columns={4}>
-            <GridCell>
+            </Grid.Row>
+          </SectionWithGrid>
+          <SectionWithGrid heading={t("listings.unit.eligibility")} inset>
+            <Grid.Row columns={4}>
               <FieldValue
                 id="unit.amiChart"
                 label={t("listings.unit.amiChart")}
                 children={unit?.amiChart?.id ? AmiChartWrapper(unit.amiChart.id) : t("t.n/a")}
               />
-            </GridCell>
-            <GridCell>
               <FieldValue
                 id="unit.amiPercentage"
                 label={t("listings.unit.amiPercentage")}
                 children={unit?.amiPercentage || t("t.n/a")}
               />
-            </GridCell>
-          </GridSection>
-          <GridSection columns={1}>
+            </Grid.Row>
+
             {unit?.amiChartOverride?.items.map((override, index) => {
               return (
-                <GridCell>
+                <Grid.Row>
                   <FieldValue
                     id="amiOverrideTitle"
                     key={index}
@@ -126,53 +104,44 @@ const DetailUnitDrawer = ({ unit, setUnitDrawer }: UnitDrawerProps) => {
                     })}
                     children={`$${override.income}`}
                   />
-                </GridCell>
+                </Grid.Row>
               )
             })}
-          </GridSection>
-          <GridSection columns={4} className="pt-6">
-            {rentType === "fixed" && (
-              <>
-                <GridCell>
+            <Grid.Row columns={4}>
+              {rentType === "fixed" && (
+                <>
                   <FieldValue
                     id="unit.monthlyIncomeMin"
                     label={t("t.monthlyMinimumIncome")}
                     children={unit?.monthlyIncomeMin || t("t.n/a")}
                   />
-                </GridCell>
-
-                <GridCell>
                   <FieldValue
                     id="unit.monthlyRent"
                     label={t("listings.unit.monthlyRent")}
                     children={unit?.monthlyRent || t("t.n/a")}
                   />
-                </GridCell>
-              </>
-            )}
-            {rentType === "percentage" && (
-              <GridCell>
+                </>
+              )}
+              {rentType === "percentage" && (
                 <FieldValue
                   id="unit.percentage"
                   label={t("listings.unit.percentage")}
                   children={unit?.monthlyRentAsPercentOfIncome || t("t.n/a")}
                 />
-              </GridCell>
-            )}
-          </GridSection>
-        </GridSection>
-        <GridSection title={t("t.accessibility")} tinted={true} inset={true} grid={false}>
-          <GridSection grid columns={4}>
-            <GridCell>
+              )}
+            </Grid.Row>
+          </SectionWithGrid>
+          <SectionWithGrid heading={t("t.accessibility")} inset>
+            <Grid.Row columns={4}>
               <FieldValue
                 id="unit.accessibilityPriorityType"
                 label={t("listings.unit.accessibilityPriorityType")}
                 children={unit?.priorityType?.name || t("t.n/a")}
               />
-            </GridCell>
-          </GridSection>
-        </GridSection>
-      </section>
+            </Grid.Row>
+          </SectionWithGrid>
+        </Card.Section>
+      </Card>
 
       <Button styleType={AppearanceStyleType.primary} onClick={() => setUnitDrawer(null)}>
         {t("t.done")}
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalDetails.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalDetails.tsx
index d2bd239322..5203830d58 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalDetails.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalDetails.tsx
@@ -1,41 +1,31 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailAdditionalDetails = () => {
   const listing = useContext(ListingContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.additionalDetails")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="requiredDocuments" label={t("listings.requiredDocuments")}>
-            {getDetailFieldString(listing.requiredDocuments)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="programRules" label={t("listings.importantProgramRules")}>
-            {getDetailFieldString(listing.programRules)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="specialNotes" label={t("listings.specialNotes")}>
-            {getDetailFieldString(listing.specialNotes)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-    </GridSection>
+    <SectionWithGrid heading={t("listings.sections.additionalDetails")} inset>
+      <Grid.Row>
+        <FieldValue id="requiredDocuments" label={t("listings.requiredDocuments")}>
+          {getDetailFieldString(listing.requiredDocuments)}
+        </FieldValue>
+      </Grid.Row>
+      <Grid.Row>
+        <FieldValue id="programRules" label={t("listings.importantProgramRules")}>
+          {getDetailFieldString(listing.programRules)}
+        </FieldValue>
+      </Grid.Row>
+      <Grid.Row>
+        <FieldValue id="specialNotes" label={t("listings.specialNotes")}>
+          {getDetailFieldString(listing.specialNotes)}
+        </FieldValue>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalEligibility.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalEligibility.tsx
index e5c6be816c..bd7e37f311 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalEligibility.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalEligibility.tsx
@@ -1,101 +1,83 @@
 import React, { useContext } from "react"
-import {
-  t,
-  GridSection,
-  GridCell,
-  MinimalTable,
-  TableThumbnail,
-} from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, MinimalTable, TableThumbnail } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { cloudinaryUrlFromId } from "@bloom-housing/shared-helpers"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailAdditionalEligibility = () => {
   const listing = useContext(ListingContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.additionalEligibilityTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="creditHistory" label={t("listings.creditHistory")}>
-            {getDetailFieldString(listing.creditHistory)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="rentalHistory" label={t("listings.rentalHistory")}>
-            {getDetailFieldString(listing.rentalHistory)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="criminalBackground" label={t("listings.criminalBackground")}>
-            {getDetailFieldString(listing.criminalBackground)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="rentalAssistance" label={t("listings.sections.rentalAssistanceTitle")}>
-            {getDetailFieldString(listing.rentalAssistance)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
+    <SectionWithGrid heading={t("listings.sections.additionalEligibilityTitle")} inset>
+      <Grid.Row>
+        <FieldValue id="creditHistory" label={t("listings.creditHistory")}>
+          {getDetailFieldString(listing.creditHistory)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="rentalHistory" label={t("listings.rentalHistory")}>
+          {getDetailFieldString(listing.rentalHistory)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="criminalBackground" label={t("listings.criminalBackground")}>
+          {getDetailFieldString(listing.criminalBackground)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="rentalAssistance" label={t("listings.sections.rentalAssistanceTitle")}>
+          {getDetailFieldString(listing.rentalAssistance)}
+        </FieldValue>
+      </Grid.Row>
+
       {(listing.buildingSelectionCriteria || listing.buildingSelectionCriteriaFile?.fileId) && (
-        <GridSection columns={1}>
-          <GridCell>
-            <FieldValue label={t("listings.buildingSelectionCriteria")}>
-              {listing.buildingSelectionCriteriaFile?.fileId ? (
-                <MinimalTable
-                  id="buildingSelectionCriteriaTable"
-                  headers={{ preview: "t.preview", fileName: "t.fileName" }}
-                  data={[
-                    {
-                      preview: {
-                        content: (
-                          <TableThumbnail>
-                            <img
-                              alt="PDF preview"
-                              src={cloudinaryUrlFromId(
-                                listing.buildingSelectionCriteriaFile.fileId
-                              )}
-                            />
-                          </TableThumbnail>
-                        ),
-                      },
-                      fileName: {
-                        content: `${listing.buildingSelectionCriteriaFile.fileId
-                          .split("/")
-                          .slice(-1)
-                          .join()}.pdf`,
-                      },
+        <Grid.Row columns={1}>
+          <FieldValue label={t("listings.buildingSelectionCriteria")}>
+            {listing.buildingSelectionCriteriaFile?.fileId ? (
+              <MinimalTable
+                id="buildingSelectionCriteriaTable"
+                headers={{ preview: "t.preview", fileName: "t.fileName" }}
+                data={[
+                  {
+                    preview: {
+                      content: (
+                        <TableThumbnail>
+                          <img
+                            alt="PDF preview"
+                            src={cloudinaryUrlFromId(listing.buildingSelectionCriteriaFile.fileId)}
+                          />
+                        </TableThumbnail>
+                      ),
                     },
-                  ]}
-                />
-              ) : (
-                <MinimalTable
-                  id="buildingSelectionCriteriaTable"
-                  headers={{ url: "t.url" }}
-                  data={[
-                    {
-                      url: { content: listing.buildingSelectionCriteria },
+                    fileName: {
+                      content: `${listing.buildingSelectionCriteriaFile.fileId
+                        .split("/")
+                        .slice(-1)
+                        .join()}.pdf`,
                     },
-                  ]}
-                />
-              )}
-            </FieldValue>
-          </GridCell>
-        </GridSection>
+                  },
+                ]}
+              />
+            ) : (
+              <MinimalTable
+                id="buildingSelectionCriteriaTable"
+                headers={{ url: "t.url" }}
+                data={[
+                  {
+                    url: { content: listing.buildingSelectionCriteria },
+                  },
+                ]}
+              />
+            )}
+          </FieldValue>
+        </Grid.Row>
       )}
-    </GridSection>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalFees.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalFees.tsx
index 37ebf1fa44..54c58e2831 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalFees.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailAdditionalFees.tsx
@@ -1,9 +1,10 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString } from "./helpers"
 import { AuthContext } from "@bloom-housing/shared-helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailAdditionalFees = () => {
   const listing = useContext(ListingContext)
@@ -29,51 +30,34 @@ const DetailAdditionalFees = () => {
   }
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.additionalFees")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue id="applicationFee" label={t("listings.applicationFee")}>
-            {getDetailFieldString(listing.applicationFee)}
+    <SectionWithGrid heading={t("listings.sections.additionalFees")} inset>
+      <Grid.Row>
+        <FieldValue id="applicationFee" label={t("listings.applicationFee")}>
+          {getDetailFieldString(listing.applicationFee)}
+        </FieldValue>
+        <FieldValue id="depositMin" label={t("listings.depositMin")}>
+          {getDetailFieldString(listing.depositMin)}
+        </FieldValue>
+        <FieldValue id="depositMax" label={t("listings.depositMax")}>
+          {getDetailFieldString(listing.depositMax)}
+        </FieldValue>
+      </Grid.Row>
+      <Grid.Row>
+        <FieldValue label={t("listings.sections.depositHelperText")}>
+          {getDetailFieldString(listing.depositHelperText)}
+        </FieldValue>
+        <FieldValue id="costsNotIncluded" label={t("listings.sections.costsNotIncluded")}>
+          {getDetailFieldString(listing.costsNotIncluded)}
+        </FieldValue>
+      </Grid.Row>
+      {enableUtilitiesIncluded && (
+        <Grid.Row>
+          <FieldValue label={t("listings.sections.utilities")}>
+            <ul className={"flex flex-wrap"}>{getUtilitiesIncluded()}</ul>
           </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue id="depositMin" label={t("listings.depositMin")}>
-            {getDetailFieldString(listing.depositMin)}
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue id="depositMax" label={t("listings.depositMax")}>
-            {getDetailFieldString(listing.depositMax)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={2}>
-        <GridCell>
-          <FieldValue label={t("listings.sections.depositHelperText")}>
-            {getDetailFieldString(listing.depositHelperText)}
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue id="costsNotIncluded" label={t("listings.sections.costsNotIncluded")}>
-            {getDetailFieldString(listing.costsNotIncluded)}
-          </FieldValue>
-        </GridCell>
-        {enableUtilitiesIncluded && (
-          <GridSection columns={1}>
-            <GridCell className={"m-h-1"}>
-              <FieldValue label={t("listings.sections.utilities")}>
-                <ul className={"flex flex-wrap"}>{getUtilitiesIncluded()}</ul>
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-        )}
-      </GridSection>
-    </GridSection>
+        </Grid.Row>
+      )}
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationAddress.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationAddress.tsx
index 8a04d68b76..8d475bcfdb 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationAddress.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationAddress.tsx
@@ -1,9 +1,10 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString, getDetailFieldTime, getDetailAddress } from "./helpers"
 import dayjs from "dayjs"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailApplicationAddress = () => {
   const listing = useContext(ListingContext)
@@ -13,159 +14,150 @@ const DetailApplicationAddress = () => {
   }
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.applicationAddressTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection grid={false}>
-        <GridSection columns={3}>
-          <FieldValue id="applicationMailingSection" label={"Can applications be mailed in?"}>
-            {listing.applicationMailingAddress || listing.applicationMailingAddressType
-              ? t("t.yes")
-              : t("t.no")}
+    <SectionWithGrid heading={t("listings.sections.applicationAddressTitle")} inset>
+      <Grid.Row columns={3}>
+        <FieldValue id="applicationMailingSection" label={"Can applications be mailed in?"}>
+          {listing.applicationMailingAddress || listing.applicationMailingAddressType
+            ? t("t.yes")
+            : t("t.no")}
+        </FieldValue>
+        {listing.applicationMailingAddressType && (
+          <FieldValue
+            id="applicationMailingAddressType"
+            className="seeds-grid-span-2"
+            label={"Where can applications be mailed in?"}
+          >
+            {t("listings.leasingAgentAddress")}
           </FieldValue>
-          {listing.applicationMailingAddressType && (
-            <FieldValue
-              id="applicationMailingAddressType"
-              label={"Where can applications be mailed in?"}
-            >
-              {t("listings.leasingAgentAddress")}
-            </FieldValue>
-          )}
-        </GridSection>
+        )}
+      </Grid.Row>
 
-        {listing.applicationMailingAddress &&
-          getDetailAddress(
-            listing.applicationMailingAddress,
-            "applicationMailingAddress",
-            t("application.contact.mailingAddress")
-          )}
+      {listing.applicationMailingAddress &&
+        getDetailAddress(
+          listing.applicationMailingAddress,
+          "applicationMailingAddress",
+          t("application.contact.mailingAddress")
+        )}
 
-        <hr className={"mt-4 mb-4"} />
+      <hr />
 
-        <GridSection columns={3}>
+      <Grid.Row columns={3}>
+        <FieldValue id="applicationPickupQuestion" label={t("listings.applicationPickupQuestion")}>
+          {listing.applicationPickUpAddress || listing.applicationPickUpAddressType
+            ? t("t.yes")
+            : t("t.no")}
+        </FieldValue>
+        {listing.applicationPickUpAddressType && (
           <FieldValue
-            id="applicationPickupQuestion"
-            label={t("listings.applicationPickupQuestion")}
+            id="applicationPickUpAddressType"
+            className="seeds-grid-span-2"
+            label={t("listings.wherePickupQuestion")}
           >
-            {listing.applicationPickUpAddress || listing.applicationPickUpAddressType
-              ? t("t.yes")
-              : t("t.no")}
+            {t("listings.leasingAgentAddress")}
           </FieldValue>
-          {listing.applicationPickUpAddressType && (
-            <FieldValue id="applicationPickUpAddressType" label={t("listings.wherePickupQuestion")}>
-              {t("listings.leasingAgentAddress")}
-            </FieldValue>
-          )}
-        </GridSection>
-
-        {listing.applicationPickUpAddress && (
-          <>
-            {getDetailAddress(
-              listing.applicationPickUpAddress,
-              "applicationPickUpAddress",
-              t("listings.pickupAddress")
-            )}
-            <GridSection columns={3}>
-              <GridCell span={2}>
-                <FieldValue
-                  id="applicationPickUpAddressOfficeHours"
-                  label={t("leasingAgent.officeHours")}
-                >
-                  {getDetailFieldString(listing.applicationPickUpAddressOfficeHours)}
-                </FieldValue>
-              </GridCell>
-            </GridSection>
-          </>
         )}
+      </Grid.Row>
+
+      {listing.applicationPickUpAddress && (
+        <>
+          {getDetailAddress(
+            listing.applicationPickUpAddress,
+            "applicationPickUpAddress",
+            t("listings.pickupAddress")
+          )}
+          <Grid.Row columns={3}>
+            <FieldValue
+              id="applicationPickUpAddressOfficeHours"
+              className="seeds-grid-span-2"
+              label={t("leasingAgent.officeHours")}
+            >
+              {getDetailFieldString(listing.applicationPickUpAddressOfficeHours)}
+            </FieldValue>
+          </Grid.Row>
+        </>
+      )}
 
-        <hr className={"mt-4 mb-4"} />
+      <hr />
 
-        <GridSection columns={3}>
+      <Grid.Row columns={3}>
+        <FieldValue
+          id="applicationDropOffQuestion"
+          label={t("listings.applicationDropOffQuestion")}
+        >
+          {listing.applicationDropOffAddress || listing.applicationDropOffAddressType
+            ? t("t.yes")
+            : t("t.no")}
+        </FieldValue>
+        {listing.applicationDropOffAddressType && (
           <FieldValue
-            id="applicationDropOffQuestion"
-            label={t("listings.applicationDropOffQuestion")}
+            id="applicationDropOffAddressType"
+            className="seeds-grid-span-2"
+            label={t("listings.whereDropOffQuestion")}
           >
-            {listing.applicationDropOffAddress || listing.applicationDropOffAddressType
-              ? t("t.yes")
-              : t("t.no")}
+            {t("listings.leasingAgentAddress")}
           </FieldValue>
-          {listing.applicationDropOffAddressType && (
+        )}
+      </Grid.Row>
+
+      {listing.applicationDropOffAddress && (
+        <>
+          {getDetailAddress(
+            listing.applicationDropOffAddress,
+            "applicationDropOffAddress",
+            t("listings.dropOffAddress")
+          )}
+          <Grid.Row columns={3}>
             <FieldValue
-              id="applicationDropOffAddressType"
-              label={t("listings.whereDropOffQuestion")}
+              id="applicationDropOffAddressOfficeHours"
+              className="seeds-grid-span-2"
+              label={t("leasingAgent.officeHours")}
             >
-              {t("listings.leasingAgentAddress")}
+              {getDetailFieldString(listing.applicationDropOffAddressOfficeHours)}
             </FieldValue>
-          )}
-        </GridSection>
-
-        {listing.applicationDropOffAddress && (
-          <>
-            {getDetailAddress(
-              listing.applicationDropOffAddress,
-              "applicationDropOffAddress",
-              t("listings.dropOffAddress")
-            )}
-            <GridSection columns={3}>
-              <GridCell span={2}>
-                <FieldValue
-                  id="applicationDropOffAddressOfficeHours"
-                  label={t("leasingAgent.officeHours")}
-                >
-                  {getDetailFieldString(listing.applicationDropOffAddressOfficeHours)}
-                </FieldValue>
-              </GridCell>
-            </GridSection>
-          </>
-        )}
+          </Grid.Row>
+        </>
+      )}
 
-        <hr className={"mt-4 mb-4"} />
+      <hr />
 
-        <GridSection columns={3}>
+      <Grid.Row>
+        <FieldValue
+          id="postmarksConsideredQuestion"
+          label={t("listings.postmarksConsideredQuestion")}
+        >
+          {listing.postmarkedApplicationsReceivedByDate ? t("t.yes") : t("t.no")}
+        </FieldValue>
+      </Grid.Row>
+
+      {listing.postmarkedApplicationsReceivedByDate && (
+        <Grid.Row columns={2}>
           <FieldValue
-            id="postmarksConsideredQuestion"
-            label={t("listings.postmarksConsideredQuestion")}
+            id="postmarkedApplicationsReceivedByDate"
+            label={t("listings.receivedByDate")}
+            testId={"postmark-date"}
           >
-            {listing.postmarkedApplicationsReceivedByDate ? t("t.yes") : t("t.no")}
+            {postMarkDateFormat(listing.postmarkedApplicationsReceivedByDate)}
           </FieldValue>
-        </GridSection>
-
-        {listing.postmarkedApplicationsReceivedByDate && (
-          <GridSection columns={4}>
-            <GridCell span={2}>
-              <FieldValue
-                id="postmarkedApplicationsReceivedByDate"
-                label={t("listings.receivedByDate")}
-                testId={"postmark-date"}
-              >
-                {postMarkDateFormat(listing.postmarkedApplicationsReceivedByDate)}
-              </FieldValue>
-            </GridCell>
-            <GridCell span={2}>
-              <FieldValue
-                id="postmarkedApplicationsReceivedByDateTime"
-                label={t("listings.receivedByTime")}
-                testId={"postmark-time"}
-              >
-                {getDetailFieldTime(listing.postmarkedApplicationsReceivedByDate)}
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-        )}
 
-        <GridSection columns={2}>
           <FieldValue
-            id="additionalApplicationSubmissionNotes"
-            label={t("listings.additionalApplicationSubmissionNotes")}
+            id="postmarkedApplicationsReceivedByDateTime"
+            label={t("listings.receivedByTime")}
+            testId={"postmark-time"}
           >
-            {getDetailFieldString(listing.additionalApplicationSubmissionNotes)}
+            {getDetailFieldTime(listing.postmarkedApplicationsReceivedByDate)}
           </FieldValue>
-        </GridSection>
-      </GridSection>
-    </GridSection>
+        </Grid.Row>
+      )}
+
+      <Grid.Row>
+        <FieldValue
+          id="additionalApplicationSubmissionNotes"
+          label={t("listings.additionalApplicationSubmissionNotes")}
+        >
+          {getDetailFieldString(listing.additionalApplicationSubmissionNotes)}
+        </FieldValue>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx
index c2be5191d3..7bccffb92b 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationDates.tsx
@@ -2,18 +2,17 @@ import React, { useContext, useMemo, useState } from "react"
 import dayjs from "dayjs"
 import {
   t,
-  GridSection,
-  GridCell,
   MinimalTable,
   Button,
   Drawer,
   AppearanceStyleType,
   LinkButton,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { Card, FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldDate, getDetailFieldTime } from "./helpers"
 import { ListingEvent, ListingEventType } from "@bloom-housing/backend-core/types"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailApplicationDates = () => {
   const listing = useContext(ListingContext)
@@ -70,39 +69,31 @@ const DetailApplicationDates = () => {
 
   return (
     <>
-      <GridSection
-        className="bg-primary-lighter"
-        title={t("listings.sections.applicationDatesTitle")}
-        grid={false}
-        inset
-      >
-        <GridSection columns={3}>
-          <GridCell>
-            <FieldValue id="applicationDeadline" label={t("listings.applicationDeadline")}>
-              {getDetailFieldDate(listing.applicationDueDate) ?? t("t.n/a")}
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue id="applicationDueTime" label={t("listings.applicationDueTime")}>
-              {getDetailFieldTime(listing.applicationDueDate) ?? t("t.n/a")}
-            </FieldValue>
-          </GridCell>
-        </GridSection>
+      <SectionWithGrid heading={t("listings.sections.applicationDatesTitle")} inset>
+        <Grid.Row columns={3}>
+          <FieldValue id="applicationDeadline" label={t("listings.applicationDeadline")}>
+            {getDetailFieldDate(listing.applicationDueDate) ?? t("t.n/a")}
+          </FieldValue>
+          <FieldValue
+            id="applicationDueTime"
+            className="seeds-grid-span-2"
+            label={t("listings.applicationDueTime")}
+          >
+            {getDetailFieldTime(listing.applicationDueDate) ?? t("t.n/a")}
+          </FieldValue>
+        </Grid.Row>
 
         {!!openHouseEvents.length && (
-          <GridSection columns={1}>
+          <Grid.Row columns={1}>
             <FieldValue id="openHouseEvent.header" label={t("listings.openHouseEvent.header")}>
-              <div className="mt-5">
-                <div className="mb-5">
-                  <MinimalTable
-                    id="openhouseHeader"
-                    headers={openHouseHeaders}
-                    data={openHouseEvents}
-                  />
-                </div>
-              </div>
+              <MinimalTable
+                id="openhouseHeader"
+                className="spacer-heading-above"
+                headers={openHouseHeaders}
+                data={openHouseEvents}
+              />
             </FieldValue>
-          </GridSection>
+          </Grid.Row>
         )}
 
         <Drawer
@@ -111,39 +102,44 @@ const DetailApplicationDates = () => {
           ariaDescription={t("listings.unit.title")}
           onClose={() => setDrawer(null)}
         >
-          <section className="border rounded-md p-8 bg-white mb-8">
-            <GridSection tinted={true} inset={true} grid={false}>
-              <GridSection grid columns={3}>
-                <FieldValue id="drawer.startTime.date" label={t("t.date")}>
-                  {drawer?.startTime && getDetailFieldDate(drawer.startTime)}
-                </FieldValue>
-                <FieldValue id="drawer.startTime.time" label={t("t.startTime")}>
-                  {getDetailFieldTime(drawer?.startTime)}
-                </FieldValue>
-                <FieldValue id="drawer.endTime.time" label={t("t.endTime")}>
-                  {drawer?.endTime && getDetailFieldTime(drawer?.endTime)}
-                </FieldValue>
-                <FieldValue id="drawer.url" label={t("t.url")}>
-                  {drawer?.url ? (
-                    <LinkButton className="mx-0 my-0" href={drawer.url} unstyled>
-                      {drawer?.label ?? t("t.url")}
-                    </LinkButton>
-                  ) : (
-                    t("t.n/a")
-                  )}
-                </FieldValue>
-                <FieldValue id="events.openHouseNotes" label={t("listings.events.openHouseNotes")}>
-                  {drawer?.note || t("t.n/a")}
-                </FieldValue>
-              </GridSection>
-            </GridSection>
-          </section>
+          <Card spacing="lg" className="spacer-section">
+            <Card.Section>
+              <Grid className="grid-inset-section">
+                <Grid.Row columns={3}>
+                  <FieldValue id="drawer.startTime.date" label={t("t.date")}>
+                    {drawer?.startTime && getDetailFieldDate(drawer.startTime)}
+                  </FieldValue>
+                  <FieldValue id="drawer.startTime.time" label={t("t.startTime")}>
+                    {getDetailFieldTime(drawer?.startTime)}
+                  </FieldValue>
+                  <FieldValue id="drawer.endTime.time" label={t("t.endTime")}>
+                    {drawer?.endTime && getDetailFieldTime(drawer?.endTime)}
+                  </FieldValue>
+                  <FieldValue id="drawer.url" label={t("t.url")}>
+                    {drawer?.url ? (
+                      <LinkButton className="mx-0 my-0" href={drawer.url} unstyled>
+                        {drawer?.label ?? t("t.url")}
+                      </LinkButton>
+                    ) : (
+                      t("t.n/a")
+                    )}
+                  </FieldValue>
+                  <FieldValue
+                    id="events.openHouseNotes"
+                    label={t("listings.events.openHouseNotes")}
+                  >
+                    {drawer?.note || t("t.n/a")}
+                  </FieldValue>
+                </Grid.Row>
+              </Grid>
+            </Card.Section>
+          </Card>
 
           <Button styleType={AppearanceStyleType.primary} onClick={() => setDrawer(null)}>
             {t("t.done")}
           </Button>
         </Drawer>
-      </GridSection>
+      </SectionWithGrid>
     </>
   )
 }
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationTypes.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationTypes.tsx
index 37688d0568..b4eb08df07 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationTypes.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailApplicationTypes.tsx
@@ -1,15 +1,10 @@
 import React, { useContext } from "react"
-import {
-  t,
-  GridSection,
-  GridCell,
-  MinimalTable,
-  StandardTableData,
-} from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, MinimalTable, StandardTableData } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationMethodType } from "@bloom-housing/backend-core/types"
 import { ListingContext } from "../../ListingContext"
 import { getDetailBoolean } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailApplicationTypes = () => {
   const listing = useContext(ListingContext)
@@ -43,24 +38,15 @@ const DetailApplicationTypes = () => {
   }
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.applicationTypesTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={2}>
-        <GridCell>
-          <FieldValue id="digitalApplication" label={"Online Applications"}>
-            {getDetailBoolean(listing.digitalApplication)}
-          </FieldValue>
-        </GridCell>
+    <SectionWithGrid heading={t("listings.sections.applicationTypesTitle")} inset>
+      <Grid.Row columns={2}>
+        <FieldValue id="digitalApplication" label={"Online Applications"}>
+          {getDetailBoolean(listing.digitalApplication)}
+        </FieldValue>
         {digitalMethod && (
-          <GridCell>
-            <FieldValue id="digitalMethod.type" label={"Common Digital Application"}>
-              {digitalMethod?.type === ApplicationMethodType.ExternalLink ? t("t.no") : t("t.yes")}
-            </FieldValue>
-          </GridCell>
+          <FieldValue id="digitalMethod.type" label={"Common Digital Application"}>
+            {digitalMethod?.type === ApplicationMethodType.ExternalLink ? t("t.no") : t("t.yes")}
+          </FieldValue>
         )}
         {digitalMethod?.type === ApplicationMethodType.ExternalLink && (
           <FieldValue
@@ -70,49 +56,41 @@ const DetailApplicationTypes = () => {
             {digitalMethod.externalReference}
           </FieldValue>
         )}
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="paperApplication" label={"Paper Applications"}>
-            {getDetailBoolean(listing.paperApplication)}
+      </Grid.Row>
+      <Grid.Row>
+        <FieldValue id="paperApplication" label={"Paper Applications"}>
+          {getDetailBoolean(listing.paperApplication)}
+        </FieldValue>
+      </Grid.Row>
+      {paperApplicationsTableRows.length > 0 && (
+        <Grid.Row>
+          <FieldValue label={"Paper Applications"}>
+            <MinimalTable
+              id="paperApplicationTable"
+              headers={paperApplicationsTableHeaders}
+              data={paperApplicationsTableRows}
+              flushLeft={true}
+            ></MinimalTable>
           </FieldValue>
-        </GridCell>
-        {paperApplicationsTableRows.length > 0 && (
-          <GridCell>
-            <FieldValue label={"Paper Applications"}>
-              <MinimalTable
-                id="paperApplicationTable"
-                headers={paperApplicationsTableHeaders}
-                data={paperApplicationsTableRows}
-                flushLeft={true}
-              ></MinimalTable>
-            </FieldValue>
-          </GridCell>
-        )}
-      </GridSection>
+        </Grid.Row>
+      )}
 
-      <GridSection columns={2}>
-        <GridCell>
-          <FieldValue id="referralOpportunity" label={"Referral"}>
-            {getDetailBoolean(listing.referralOpportunity)}
-          </FieldValue>
-        </GridCell>
+      <Grid.Row columns={2}>
+        <FieldValue id="referralOpportunity" label={"Referral"}>
+          {getDetailBoolean(listing.referralOpportunity)}
+        </FieldValue>
         {referralMethod && (
           <>
-            <GridCell>
-              <FieldValue id="referralContactPhone" label={t("listings.referralContactPhone")}>
-                {referralMethod.phoneNumber}
-              </FieldValue>
-            </GridCell>
-            <GridCell>
-              <FieldValue id="referralSummary" label={t("listings.referralSummary")}>
-                {referralMethod.externalReference}
-              </FieldValue>
-            </GridCell>
+            <FieldValue id="referralContactPhone" label={t("listings.referralContactPhone")}>
+              {referralMethod.phoneNumber}
+            </FieldValue>
+            <FieldValue id="referralSummary" label={t("listings.referralSummary")}>
+              {referralMethod.externalReference}
+            </FieldValue>
           </>
         )}
-      </GridSection>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingDetails.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingDetails.tsx
index eaa0dc885c..497fac786a 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingDetails.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingDetails.tsx
@@ -1,67 +1,64 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailBuildingDetails = () => {
   const listing = useContext(ListingContext)
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.buildingDetailsTitle")}
-      grid={false}
-      inset
-    >
+    <SectionWithGrid heading={t("listings.sections.buildingDetailsTitle")} inset>
+      <SectionWithGrid.HeadingRow>Building Address</SectionWithGrid.HeadingRow>
       {listing.buildingAddress ? (
         <>
-          <GridSection columns={3} subtitle={"Building Address"}>
-            <GridCell span={2}>
-              <FieldValue
-                id="buildingAddress.street"
-                label={t("application.contact.streetAddress")}
-              >
-                {listing.buildingAddress?.street}
-              </FieldValue>
-            </GridCell>
+          <Grid.Row columns={3}>
+            <FieldValue
+              id="buildingAddress.street"
+              className="seeds-grid-span-2"
+              label={t("application.contact.streetAddress")}
+            >
+              {listing.buildingAddress?.street}
+            </FieldValue>
             <FieldValue id="neighborhood" label={t("t.neighborhood")}>
               {listing?.neighborhood}
             </FieldValue>
-          </GridSection>
-          <GridSection columns={6}>
-            <GridCell span={2}>
-              <FieldValue id="buildingAddress.city" label={t("application.contact.city")}>
-                {listing.buildingAddress?.city}
-              </FieldValue>
-            </GridCell>
+          </Grid.Row>
+          <Grid.Row columns={6}>
+            <FieldValue
+              id="buildingAddress.city"
+              className="seeds-grid-span-2"
+              label={t("application.contact.city")}
+            >
+              {listing.buildingAddress?.city}
+            </FieldValue>
             <FieldValue id="buildingAddress.state" label={t("application.contact.state")}>
               {listing.buildingAddress?.state}
             </FieldValue>
             <FieldValue id="buildingAddress.zipCode" label={t("application.contact.zip")}>
               {listing.buildingAddress?.zipCode}
             </FieldValue>
-
-            <GridCell span={2}>
-              <FieldValue id="yearBuilt" label={t("listings.yearBuilt")}>
-                {listing.yearBuilt}
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-          <GridSection columns={3}>
+            <FieldValue
+              id="yearBuilt"
+              className="seeds-grid-span-2"
+              label={t("listings.yearBuilt")}
+            >
+              {listing.yearBuilt}
+            </FieldValue>
+          </Grid.Row>
+          <Grid.Row columns={3}>
             <FieldValue id="longitude" label={t("listings.longitude")}>
               {listing.buildingAddress?.longitude && listing.buildingAddress.longitude.toString()}
             </FieldValue>
             <FieldValue id="latitude" label={t("listings.latitude")}>
               {listing.buildingAddress?.latitude && listing.buildingAddress.latitude.toString()}
             </FieldValue>
-          </GridSection>
+          </Grid.Row>
         </>
       ) : (
-        <FieldValue>
-          <GridSection subtitle={"Building Address"}>{getDetailFieldString(null)}</GridSection>
-        </FieldValue>
+        <FieldValue>{getDetailFieldString(null)}</FieldValue>
       )}
-    </GridSection>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingFeatures.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingFeatures.tsx
index c0ddc8fefb..e2777c7316 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingFeatures.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailBuildingFeatures.tsx
@@ -1,9 +1,10 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString } from "./helpers"
 import { AuthContext } from "@bloom-housing/shared-helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailBuildingFeatures = () => {
   const listing = useContext(ListingContext)
@@ -29,64 +30,51 @@ const DetailBuildingFeatures = () => {
   )?.enableAccessibilityFeatures
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.buildingFeaturesTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="amenities" label={t("t.propertyAmenities")}>
-            {getDetailFieldString(listing.amenities)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="unitAmenities" label={t("t.unitAmenities")}>
-            {getDetailFieldString(listing.unitAmenities)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="accessibility" label={t("t.additionalAccessibility")}>
-            {getDetailFieldString(listing.accessibility)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="smokingPolicy" label={t("t.smokingPolicy")}>
-            {getDetailFieldString(listing.smokingPolicy)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="petPolicy" label={t("t.petsPolicy")}>
-            {getDetailFieldString(listing.petPolicy)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="servicesOffered" label={t("t.servicesOffered")}>
-            {getDetailFieldString(listing.servicesOffered)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
+    <SectionWithGrid heading={t("listings.sections.buildingFeaturesTitle")} inset>
+      <Grid.Row>
+        <FieldValue id="amenities" label={t("t.propertyAmenities")}>
+          {getDetailFieldString(listing.amenities)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="unitAmenities" label={t("t.unitAmenities")}>
+          {getDetailFieldString(listing.unitAmenities)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="accessibility" label={t("t.additionalAccessibility")}>
+          {getDetailFieldString(listing.accessibility)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="smokingPolicy" label={t("t.smokingPolicy")}>
+          {getDetailFieldString(listing.smokingPolicy)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="petPolicy" label={t("t.petsPolicy")}>
+          {getDetailFieldString(listing.petPolicy)}
+        </FieldValue>
+      </Grid.Row>
+
+      <Grid.Row>
+        <FieldValue id="servicesOffered" label={t("t.servicesOffered")}>
+          {getDetailFieldString(listing.servicesOffered)}
+        </FieldValue>
+      </Grid.Row>
+
       {!enableAccessibilityFeatures ? null : (
-        <GridSection columns={1}>
-          <GridCell className={"m-h-1"}>
-            <FieldValue label={"Accessibility Features"}>
-              <ul className={"flex flex-wrap"}>{getAccessibilityFeatures()}</ul>
-            </FieldValue>
-          </GridCell>
-        </GridSection>
+        <Grid.Row>
+          <FieldValue label={"Accessibility Features"}>
+            <ul className={"flex flex-wrap"}>{getAccessibilityFeatures()}</ul>
+          </FieldValue>
+        </Grid.Row>
       )}
-    </GridSection>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailCommunityType.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailCommunityType.tsx
index ac7af6c78c..fb0370a805 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailCommunityType.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailCommunityType.tsx
@@ -1,41 +1,33 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailCommunityType = () => {
   const listing = useContext(ListingContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.communityType")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue id="reservedCommunityType" label={t("listings.reservedCommunityType")}>
-            {getDetailFieldString(
-              listing.reservedCommunityType
-                ? t(`listings.reservedCommunityTypes.${listing.reservedCommunityType.name}`)
-                : null
-            )}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={2}>
-        <GridCell>
-          <FieldValue
-            id="reservedCommunityDescription"
-            label={t("listings.reservedCommunityDescription")}
-          >
-            {getDetailFieldString(listing.reservedCommunityDescription)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-    </GridSection>
+    <SectionWithGrid heading={t("listings.sections.communityType")} inset>
+      <Grid.Row>
+        <FieldValue id="reservedCommunityType" label={t("listings.reservedCommunityType")}>
+          {getDetailFieldString(
+            listing.reservedCommunityType
+              ? t(`listings.reservedCommunityTypes.${listing.reservedCommunityType.name}`)
+              : null
+          )}
+        </FieldValue>
+      </Grid.Row>
+      <Grid.Row>
+        <FieldValue
+          id="reservedCommunityDescription"
+          label={t("listings.reservedCommunityDescription")}
+        >
+          {getDetailFieldString(listing.reservedCommunityDescription)}
+        </FieldValue>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailLeasingAgent.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailLeasingAgent.tsx
index 7d970dcca0..25398283bf 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailLeasingAgent.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailLeasingAgent.tsx
@@ -1,54 +1,47 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString, getDetailAddress } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailLeasingAgent = () => {
   const listing = useContext(ListingContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.leasingAgentTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={3}>
-        <GridCell>
-          <FieldValue id="leasingAgentName" label={t("leasingAgent.name")}>
-            {getDetailFieldString(listing.leasingAgentName)}
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue id="leasingAgentEmail" label={t("t.email")}>
-            {getDetailFieldString(listing.leasingAgentEmail)}
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue id="leasingAgentPhone" label={t("t.phone")}>
-            {getDetailFieldString(listing.leasingAgentPhone)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={2}>
-        <GridCell>
-          <FieldValue id="leasingAgentTitle" label={t("leasingAgent.title")}>
-            {getDetailFieldString(listing.leasingAgentTitle)}
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <FieldValue id="leasingAgentOfficeHours" label={t("leasingAgent.officeHours")}>
-            {getDetailFieldString(listing.leasingAgentOfficeHours)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
+    <SectionWithGrid heading={t("listings.sections.leasingAgentTitle")} inset>
+      <Grid.Row>
+        <FieldValue id="leasingAgentName" label={t("leasingAgent.name")}>
+          {getDetailFieldString(listing.leasingAgentName)}
+        </FieldValue>
+
+        <FieldValue id="leasingAgentEmail" label={t("t.email")}>
+          {getDetailFieldString(listing.leasingAgentEmail)}
+        </FieldValue>
+
+        <FieldValue id="leasingAgentPhone" label={t("t.phone")}>
+          {getDetailFieldString(listing.leasingAgentPhone)}
+        </FieldValue>
+      </Grid.Row>
+      <Grid.Row columns={3}>
+        <FieldValue id="leasingAgentTitle" label={t("leasingAgent.title")}>
+          {getDetailFieldString(listing.leasingAgentTitle)}
+        </FieldValue>
+
+        <FieldValue
+          id="leasingAgentOfficeHours"
+          className="seeds-grid-span-2"
+          label={t("leasingAgent.officeHours")}
+        >
+          {getDetailFieldString(listing.leasingAgentOfficeHours)}
+        </FieldValue>
+      </Grid.Row>
       {getDetailAddress(
         listing.leasingAgentAddress,
         "leasingAgentAddress",
         t("listings.leasingAgentAddress")
       )}
-    </GridSection>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingData.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingData.tsx
index 99869c2814..d3b9b4c85c 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingData.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingData.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldDate, getDetailFieldTime } from "./helpers"
 
@@ -8,19 +9,16 @@ const DetailListingData = () => {
   const listing = useContext(ListingContext)
 
   return (
-    <GridSection className="bg-primary-lighter" title={t("listings.details.listingData")} inset>
-      <GridCell span={2}>
+    <SectionWithGrid heading={t("listings.details.listingData")} inset>
+      <Grid.Row>
         <FieldValue label={t("listings.details.id")}>{listing.id}</FieldValue>
-      </GridCell>
-
-      <GridCell>
         <FieldValue label={t("listings.details.createdDate")}>
           {getDetailFieldDate(listing.createdAt)}
-          <br />
+          {" at "}
           {getDetailFieldTime(listing.createdAt)}
         </FieldValue>
-      </GridCell>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingIntro.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingIntro.tsx
index a3da147003..45600e6df9 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingIntro.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingIntro.tsx
@@ -1,35 +1,29 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailListingIntro = () => {
   const listing = useContext(ListingContext)
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.introTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={3}>
-        <GridCell span={2}>
-          <FieldValue id="jurisdiction.name" label={t("t.jurisdiction")}>
-            {getDetailFieldString(listing.jurisdiction.name)}
-          </FieldValue>
-        </GridCell>
-        <GridCell span={2}>
-          <FieldValue id="name" label={t("listings.listingName")}>
-            {getDetailFieldString(listing.name)}
-          </FieldValue>
-        </GridCell>
+    <SectionWithGrid heading={t("listings.sections.introTitle")} inset>
+      <Grid.Row>
+        <FieldValue id="name" label={t("listings.listingName")}>
+          {getDetailFieldString(listing.name)}
+        </FieldValue>
+      </Grid.Row>
+      <Grid.Row>
+        <FieldValue id="jurisdiction.name" label={t("t.jurisdiction")}>
+          {getDetailFieldString(listing.jurisdiction.name)}
+        </FieldValue>
         <FieldValue id="developer" label={t("listings.developer")}>
           {getDetailFieldString(listing.developer)}
         </FieldValue>
-      </GridSection>
-    </GridSection>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhoto.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhoto.tsx
deleted file mode 100644
index 52e3a69fd5..0000000000
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhoto.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useContext } from "react"
-import {
-  t,
-  GridSection,
-  GridCell,
-  MinimalTable,
-  TableThumbnail,
-} from "@bloom-housing/ui-components"
-import { cloudinaryUrlFromId } from "@bloom-housing/shared-helpers"
-import { ListingContext } from "../../ListingContext"
-
-const DetailListingPhoto = () => {
-  const listing = useContext(ListingContext)
-
-  let listingFormPhoto = listing.images[0]
-
-  // Set listing photo from assets if necessary:
-  // TODO: get rid of assets entirely
-  if (listing.images?.length === 0 && listing.assets.length > 0) {
-    const asset = listing.assets.find((asset) => asset.label == "building")
-    listingFormPhoto = {
-      ordinal: 0,
-      image: { fileId: asset.fileId, label: asset.label },
-    }
-  }
-
-  const urlTest = new RegExp(/https?:\/\//)
-  const listingPhotoUrl = listingFormPhoto?.image
-    ? urlTest.test(listingFormPhoto.image.fileId)
-      ? listingFormPhoto.image.fileId
-      : cloudinaryUrlFromId(listingFormPhoto.image.fileId)
-    : null
-
-  const photoTableHeaders = {
-    preview: "t.preview",
-    fileName: "t.fileName",
-  }
-  const photoTableData = [
-    {
-      preview: {
-        content: (
-          <TableThumbnail>
-            <img src={listingPhotoUrl} alt={t("listings.sections.photoTitle")} />
-          </TableThumbnail>
-        ),
-      },
-      fileName: { content: listingFormPhoto?.image?.fileId.split("/").slice(-1).join() },
-    },
-  ]
-
-  return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.photoTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection>
-        <GridCell span={2}>
-          {listingPhotoUrl ? (
-            <MinimalTable
-              id="listingPhotoTable"
-              headers={photoTableHeaders}
-              data={photoTableData}
-            />
-          ) : (
-            <span className={"view-item__value"}>{t("t.none")}</span>
-          )}
-        </GridCell>
-      </GridSection>
-    </GridSection>
-  )
-}
-
-export default DetailListingPhoto
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhotos.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhotos.tsx
index cc8e5a7c2e..e9877cf3d8 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhotos.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailListingPhotos.tsx
@@ -1,14 +1,10 @@
 import React, { useContext } from "react"
-import {
-  t,
-  GridSection,
-  GridCell,
-  MinimalTable,
-  TableThumbnail,
-} from "@bloom-housing/ui-components"
+import { t, MinimalTable, TableThumbnail } from "@bloom-housing/ui-components"
 import { getUrlForListingImage } from "@bloom-housing/shared-helpers"
 import { ListingContext } from "../../ListingContext"
 import { Asset } from "@bloom-housing/backend-core/types"
+import { FieldValue } from "@bloom-housing/ui-seeds"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const photoTableHeaders = {
   preview: "t.preview",
@@ -38,26 +34,13 @@ const DetailListingPhotos = () => {
   })
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.photoTitle")}
-      grid={false}
-      inset
-    >
-      <GridSection columns={1}>
-        <GridCell>
-          {listing.images.length > 0 ? (
-            <MinimalTable
-              id="listingPhotoTable"
-              headers={photoTableHeaders}
-              data={photoTableData}
-            />
-          ) : (
-            <span className={"view-item__value"}>{t("t.none")}</span>
-          )}
-        </GridCell>
-      </GridSection>
-    </GridSection>
+    <SectionWithGrid heading={t("listings.sections.photoTitle")} inset bypassGrid>
+      {listing.images.length > 0 ? (
+        <MinimalTable id="listingPhotoTable" headers={photoTableHeaders} data={photoTableData} />
+      ) : (
+        <FieldValue>{t("t.none")}</FieldValue>
+      )}
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailNotes.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailNotes.tsx
index f24594af52..22d9124f52 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailNotes.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailNotes.tsx
@@ -1,9 +1,10 @@
 import React, { useContext } from "react"
-import { t, GridSection, GridCell, ExpandableText } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, ExpandableText } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getDetailFieldString, getDetailFieldDate } from "./helpers"
 import { ListingStatus } from "@bloom-housing/backend-core"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailListingNotes = () => {
   const listing = useContext(ListingContext)
@@ -11,13 +12,8 @@ const DetailListingNotes = () => {
   if (!listing.requestedChanges || !(listing.status === ListingStatus.changesRequested)) return
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.approval.listingNotes")}
-      inset
-      columns={3}
-    >
-      <GridCell span={2}>
+    <SectionWithGrid heading={t("listings.approval.listingNotes")} inset>
+      <Grid.Row columns={3}>
         <FieldValue id="requestedChanges" label={t("listings.approval.changeRequestSummary")}>
           <ExpandableText
             buttonClassName="ml-4"
@@ -29,21 +25,17 @@ const DetailListingNotes = () => {
             {getDetailFieldString(listing.requestedChanges)}
           </ExpandableText>
         </FieldValue>
-      </GridCell>
-
-      <GridCell span={2}>
         <FieldValue id="requestedChangesDate" label={t("listings.approval.requestDate")}>
           {getDetailFieldDate(listing.requestedChangesDate)}
         </FieldValue>
-      </GridCell>
-      {listing.requestedChangesUser && (
-        <GridCell>
+
+        {listing.requestedChangesUser && (
           <FieldValue id="requestedChangesUser" label={t("listings.approval.requestedBy")}>
             {`${listing.requestedChangesUser?.firstName} ${listing.requestedChangesUser?.lastName}`}
           </FieldValue>
-        </GridCell>
-      )}
-    </GridSection>
+        )}
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPreferences.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPreferences.tsx
index 23b60d1f45..74db48d9ba 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPreferences.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPreferences.tsx
@@ -1,9 +1,10 @@
 import React, { useContext, useMemo } from "react"
-import { t, GridSection, MinimalTable } from "@bloom-housing/ui-components"
+import { t, MinimalTable } from "@bloom-housing/ui-components"
 import { FieldValue } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { ApplicationSection } from "@bloom-housing/backend-core"
 import { listingSectionQuestions } from "@bloom-housing/shared-helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailPreferences = () => {
   const listing = useContext(ListingContext)
@@ -27,25 +28,19 @@ const DetailPreferences = () => {
   )
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.housingPreferencesTitle")}
-      grid={false}
-      tinted
-      inset
-    >
-      <FieldValue label={t("listings.activePreferences")} className={"mb-2"}>
-        {preferenceTableData.length ? (
-          <MinimalTable
-            id="preferenceTable"
-            headers={preferencesTableHeaders}
-            data={preferenceTableData}
-          />
-        ) : (
-          <span className="text-base font-semibold pt-4">{t("t.none")}</span>
-        )}
-      </FieldValue>
-    </GridSection>
+    <SectionWithGrid heading={t("listings.sections.housingPreferencesTitle")} inset bypassGrid>
+      <SectionWithGrid.HeadingRow>{t("listings.activePreferences")}</SectionWithGrid.HeadingRow>
+      {preferenceTableData.length ? (
+        <MinimalTable
+          id="preferenceTable"
+          className="spacer-section-above"
+          headers={preferencesTableHeaders}
+          data={preferenceTableData}
+        />
+      ) : (
+        <FieldValue className="spacer-section-above">{t("t.none")}</FieldValue>
+      )}
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPrograms.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPrograms.tsx
index d7e32510bf..7d8a5a2b87 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPrograms.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailPrograms.tsx
@@ -1,9 +1,10 @@
 import React, { useContext, useMemo } from "react"
-import { t, GridSection, MinimalTable } from "@bloom-housing/ui-components"
+import { t, MinimalTable } from "@bloom-housing/ui-components"
 import { FieldValue } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { ApplicationSection } from "@bloom-housing/backend-core"
 import { listingSectionQuestions } from "@bloom-housing/shared-helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailPrograms = () => {
   const listing = useContext(ListingContext)
@@ -27,21 +28,18 @@ const DetailPrograms = () => {
   )
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={"Housing Programs"}
-      grid={false}
-      tinted
-      inset
-    >
-      <FieldValue label={"Active Programs"} className={"mb-2"}>
-        {programsTableData.length ? (
-          <MinimalTable headers={programsTableHeaders} data={programsTableData} />
-        ) : (
-          <span className="text-base font-semibold pt-4">{t("t.none")}</span>
-        )}
-      </FieldValue>
-    </GridSection>
+    <SectionWithGrid heading="Housing Programs" inset bypassGrid>
+      <SectionWithGrid.HeadingRow>Active Programs</SectionWithGrid.HeadingRow>
+      {programsTableData.length ? (
+        <MinimalTable
+          className="spacer-section-above"
+          headers={programsTableHeaders}
+          data={programsTableData}
+        />
+      ) : (
+        <FieldValue className="spacer-section-above">{t("t.none")}</FieldValue>
+      )}
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailRankingsAndResults.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailRankingsAndResults.tsx
index 4fc0794cd4..a0c6b9c0ca 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailRankingsAndResults.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailRankingsAndResults.tsx
@@ -2,12 +2,13 @@ import React, { useContext } from "react"
 import dayjs from "dayjs"
 import utc from "dayjs/plugin/utc"
 dayjs.extend(utc)
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { getLotteryEvent } from "@bloom-housing/shared-helpers"
 import { ListingReviewOrder } from "@bloom-housing/backend-core/types"
 import { getDetailFieldNumber, getDetailFieldString, getDetailBoolean } from "./helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const DetailRankingsAndResults = () => {
   const listing = useContext(ListingContext)
@@ -21,24 +22,19 @@ const DetailRankingsAndResults = () => {
     }
   }
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.sections.rankingsResultsTitle")}
-      grid={false}
-      inset
-    >
+    <SectionWithGrid heading={t("listings.sections.rankingsResultsTitle")} inset>
       {listing.reviewOrderType !== ListingReviewOrder.waitlist && (
-        <GridSection columns={2}>
+        <Grid.Row>
           <FieldValue id="reviewOrderQuestion" label={t("listings.reviewOrderQuestion")}>
             {getReviewOrderType() === ListingReviewOrder.firstComeFirstServe
               ? t("listings.firstComeFirstServe")
               : t("listings.lotteryTitle")}
           </FieldValue>
-        </GridSection>
+        </Grid.Row>
       )}
       {lotteryEvent && (
         <>
-          <GridSection columns={3}>
+          <Grid.Row>
             <FieldValue id="lotteryEvent.startTime.date" label={t("listings.lotteryDateQuestion")}>
               {dayjs(new Date(lotteryEvent?.startTime)).utc().format("MM/DD/YYYY")}
             </FieldValue>
@@ -48,44 +44,42 @@ const DetailRankingsAndResults = () => {
             <FieldValue id="lotteryEvent.lotteryEndTime.time" label={t("listings.lotteryEndTime")}>
               {dayjs(new Date(lotteryEvent?.endTime)).format("hh:mm A")}
             </FieldValue>
-          </GridSection>
-          <GridSection columns={2}>
+          </Grid.Row>
+          <Grid.Row>
             <FieldValue id="lotteryDateNotes" label={t("listings.lotteryDateNotes")}>
               {lotteryEvent?.note}
             </FieldValue>
-          </GridSection>
+          </Grid.Row>
         </>
       )}
       {getReviewOrderType() === ListingReviewOrder.firstComeFirstServe && (
-        <GridSection columns={2}>
+        <Grid.Row>
           <FieldValue id="dueDateQuestion" label={t("listings.dueDateQuestion")}>
             {listing.applicationDueDate ? t("t.yes") : t("t.no")}
           </FieldValue>
-        </GridSection>
+        </Grid.Row>
       )}
       {listing.reviewOrderType === ListingReviewOrder.waitlist && (
         <>
-          <GridSection columns={2}>
+          <Grid.Row>
             <FieldValue id="waitlist.openQuestion" label={t("listings.waitlist.openQuestion")}>
               {getDetailBoolean(listing.isWaitlistOpen)}
             </FieldValue>
-          </GridSection>
-          <GridSection columns={3}>
+          </Grid.Row>
+          <Grid.Row>
             <FieldValue id="waitlistOpenSpots" label={t("listings.waitlist.openSize")}>
               {getDetailFieldNumber(listing.waitlistOpenSpots)}
             </FieldValue>
-          </GridSection>
+          </Grid.Row>
         </>
       )}
 
-      <GridSection columns={1}>
-        <GridCell>
-          <FieldValue id="whatToExpect" label={t("listings.whatToExpectLabel")}>
-            {getDetailFieldString(listing.whatToExpect)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-    </GridSection>
+      <Grid.Row>
+        <FieldValue id="whatToExpect" label={t("listings.whatToExpectLabel")}>
+          {getDetailFieldString(listing.whatToExpect)}
+        </FieldValue>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx
index c70b643471..aaf59c655b 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/DetailUnits.tsx
@@ -1,9 +1,10 @@
 import React, { useContext, useMemo } from "react"
-import { t, GridSection, MinimalTable, Button, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, MinimalTable, Button } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { ListingContext } from "../../ListingContext"
 import { UnitDrawer } from "../DetailsUnitDrawer"
 import { ListingReviewOrder } from "@bloom-housing/backend-core"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type DetailUnitsProps = {
   setUnitDrawer: (unit: UnitDrawer) => void
@@ -57,15 +58,8 @@ const DetailUnits = ({ setUnitDrawer }: DetailUnitsProps) => {
   }, [listing])
 
   return (
-    <GridSection
-      className="bg-primary-lighter"
-      title={t("listings.units")}
-      grid={true}
-      tinted
-      inset
-      columns={2}
-    >
-      <GridCell span={1}>
+    <SectionWithGrid heading={t("listings.units")} inset>
+      <Grid.Row>
         <FieldValue
           id="unitTypesOrIndividual"
           testId={"unit-types-or-individual"}
@@ -76,26 +70,26 @@ const DetailUnits = ({ setUnitDrawer }: DetailUnitsProps) => {
               : t("listings.unit.individualUnits")
           }
         />
-      </GridCell>
-      <GridCell span={1}>
         <FieldValue
           id="listings.listingAvailabilityQuestion"
           testId={"listing-availability-question"}
           label={t("listings.listingAvailabilityQuestion")}
           children={listingAvailabilityText}
         />
-      </GridCell>
-      <GridCell span={2}>
-        {listing.units.length ? (
-          <MinimalTable id="unitTable" headers={unitTableHeaders} data={unitTableData} />
-        ) : (
-          <>
-            <hr className={"mt-4 mb-4"} />
-            <span className="text-base font-semibold pt-4">{t("t.none")}</span>
-          </>
-        )}
-      </GridCell>
-    </GridSection>
+      </Grid.Row>
+      <Grid.Row>
+        <Grid.Cell>
+          {listing.units.length ? (
+            <MinimalTable id="unitTable" headers={unitTableHeaders} data={unitTableData} />
+          ) : (
+            <>
+              <hr className="spacer-header" />
+              <span className="text-base font-semibold pt-4">{t("t.none")}</span>
+            </>
+          )}
+        </Grid.Cell>
+      </Grid.Row>
+    </SectionWithGrid>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingDetails/sections/helpers.tsx b/sites/partners/src/components/listings/PaperListingDetails/sections/helpers.tsx
index 7a496fbadd..5878f6851f 100644
--- a/sites/partners/src/components/listings/PaperListingDetails/sections/helpers.tsx
+++ b/sites/partners/src/components/listings/PaperListingDetails/sections/helpers.tsx
@@ -1,8 +1,9 @@
 import React from "react"
 import { AddressUpdate } from "@bloom-housing/backend-core/types"
-import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import dayjs from "dayjs"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 export const getDetailFieldNumber = (listingNumber: number) => {
   return listingNumber ? listingNumber.toString() : t("t.none")
@@ -59,43 +60,40 @@ export const getDetailAddress = (
 ) => {
   if (!address) {
     return (
-      <FieldValue>
-        <GridSection subtitle={subtitle}>{getDetailFieldString(null)}</GridSection>
-      </FieldValue>
+      <>
+        <SectionWithGrid.HeadingRow>{subtitle}</SectionWithGrid.HeadingRow>
+        <Grid.Row>{getDetailFieldString(null)}</Grid.Row>
+      </>
     )
   }
   return (
     <>
-      <GridSection subtitle={subtitle} columns={6}>
-        <GridCell span={3}>
-          <FieldValue
-            id={`${addressName}.street`}
-            label={t("listings.streetAddressOrPOBox")}
-            testId={`${addressName}.street`}
-          >
-            {getDetailFieldString(address?.street)}
-          </FieldValue>
-        </GridCell>
-        <GridCell span={3}>
-          <FieldValue
-            id={`${addressName}.street2`}
-            label={t("application.contact.apt")}
-            testId={`${addressName}.street2`}
-          >
-            {getDetailFieldString(address?.street2)}
-          </FieldValue>
-        </GridCell>
-      </GridSection>
-      <GridSection columns={6}>
-        <GridCell span={2}>
-          <FieldValue
-            id={`${addressName}.city`}
-            label={t("application.contact.city")}
-            testId={`${addressName}.city`}
-          >
-            {getDetailFieldString(address?.city)}
-          </FieldValue>
-        </GridCell>
+      <SectionWithGrid.HeadingRow>{subtitle}</SectionWithGrid.HeadingRow>
+      <Grid.Row>
+        <FieldValue
+          id={`${addressName}.street`}
+          label={t("listings.streetAddressOrPOBox")}
+          testId={`${addressName}.street`}
+        >
+          {getDetailFieldString(address?.street)}
+        </FieldValue>
+        <FieldValue
+          id={`${addressName}.street2`}
+          label={t("application.contact.apt")}
+          testId={`${addressName}.street2`}
+        >
+          {getDetailFieldString(address?.street2)}
+        </FieldValue>
+      </Grid.Row>
+      <Grid.Row columns={6}>
+        <FieldValue
+          id={`${addressName}.city`}
+          className="seeds-grid-span-2"
+          label={t("application.contact.city")}
+          testId={`${addressName}.city`}
+        >
+          {getDetailFieldString(address?.city)}
+        </FieldValue>
         <FieldValue
           id={`${addressName}.state`}
           label={t("application.contact.state")}
@@ -105,12 +103,13 @@ export const getDetailAddress = (
         </FieldValue>
         <FieldValue
           id={`${addressName}.zipCode`}
+          className="seeds-grid-span-3"
           label={t("application.contact.zip")}
           testId={`${addressName}.zipCode`}
         >
           {getDetailFieldString(address?.zipCode)}
         </FieldValue>
-      </GridSection>
+      </Grid.Row>
     </>
   )
 }
diff --git a/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx b/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx
index c4f8fe1c5a..5c9a1c748d 100644
--- a/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/OpenHouseForm.tsx
@@ -5,8 +5,6 @@ import {
   Button,
   AppearanceStyleType,
   t,
-  GridSection,
-  GridCell,
   Field,
   Textarea,
   Form,
@@ -16,10 +14,11 @@ import {
   TimeFieldValues,
   formatDateToTimeField,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { Card, Grid } from "@bloom-housing/ui-seeds"
 import { TempEvent } from "../../../lib/listings/formTypes"
 import { createDate, createTime } from "../../../lib/helpers"
 import dayjs from "dayjs"
+import SectionWithGrid from "../../shared/SectionWithGrid"
 
 type OpenHouseFormProps = {
   onSubmit: (data: TempEvent) => void
@@ -98,106 +97,89 @@ const OpenHouseForm = ({ onSubmit, currentEvent }: OpenHouseFormProps) => {
 
   return (
     <Form onSubmit={() => false}>
-      <div className="border rounded-md p-8 bg-white">
-        <GridSection title={t("listings.sections.openHouse")} columns={3}>
-          <GridCell>
-            <FieldValue label={t("t.date")}>
-              <DateField
-                label={t("t.date")}
-                name="date"
-                id="date"
-                register={register}
-                watch={watch}
-                readerOnly
-                error={errors?.date}
-                errorMessage={t("errors.requiredFieldError")}
-                required
-                defaultDate={defaultValues?.date}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("t.startTime")}>
-              <TimeField
-                label={t("t.startTime")}
-                name="startTime"
-                id="startTime"
-                register={register}
-                watch={watch}
-                readerOnly
-                error={!!errors?.startTime}
-                required
-                defaultValues={defaultValues?.startTime}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("t.end")}>
-              <TimeField
-                label={t("t.end")}
-                name="endTime"
-                id="endTime"
-                register={register}
-                watch={watch}
-                readerOnly
-                error={!!errors?.endTime}
-                required
-                defaultValues={defaultValues?.endTime}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <GridSection columns={1}>
-              <GridCell>
-                <FieldValue label={t("t.label")}>
-                  <Field
-                    id="label"
-                    name="label"
-                    label={t("t.label")}
-                    placeholder={t("t.label")}
-                    register={register}
-                    readerOnly
-                  />
-                </FieldValue>
-              </GridCell>
-              <GridCell>
-                <FieldValue label={t("t.url")}>
-                  <Field
-                    type="url"
-                    id="url"
-                    name="url"
-                    label={t("t.url")}
-                    placeholder={"https://"}
-                    register={register}
-                    readerOnly
-                    error={!!errors?.url}
-                    errorMessage={
-                      errors?.url?.type === "https"
-                        ? t("errors.urlHttpsError")
-                        : t("errors.urlError")
-                    }
-                  />
-                </FieldValue>
-              </GridCell>
-            </GridSection>
-          </GridCell>
-
-          <GridCell>
-            <FieldValue label={t("listings.events.openHouseNotes")}>
-              <Textarea
-                id="note"
-                name="note"
-                label={t("listings.events.openHouseNotes")}
-                placeholder={t("t.notes")}
-                register={register}
-                readerOnly
-                note={t("t.optional")}
-                rows={5}
-              />
-            </FieldValue>
-          </GridCell>
-        </GridSection>
-      </div>
+      <Card>
+        <Card.Section>
+          <SectionWithGrid heading={t("listings.sections.openHouse")}>
+            <Grid.Row columns={3}>
+              <Grid.Cell>
+                <DateField
+                  label={t("t.date")}
+                  name="date"
+                  id="date"
+                  register={register}
+                  watch={watch}
+                  error={errors?.date}
+                  errorMessage={t("errors.requiredFieldError")}
+                  required
+                  defaultDate={defaultValues?.date}
+                />
+              </Grid.Cell>
+              <Grid.Cell>
+                <TimeField
+                  label={t("t.startTime")}
+                  name="startTime"
+                  id="startTime"
+                  register={register}
+                  watch={watch}
+                  error={!!errors?.startTime}
+                  required
+                  defaultValues={defaultValues?.startTime}
+                />
+              </Grid.Cell>
+              <Grid.Cell>
+                <TimeField
+                  label={t("t.end")}
+                  name="endTime"
+                  id="endTime"
+                  register={register}
+                  watch={watch}
+                  error={!!errors?.endTime}
+                  required
+                  defaultValues={defaultValues?.endTime}
+                />
+              </Grid.Cell>
+            </Grid.Row>
+            <Grid.Row>
+              <Grid.Cell>
+                <Field
+                  id="label"
+                  name="label"
+                  label={t("t.label")}
+                  placeholder={t("t.label")}
+                  register={register}
+                />
+              </Grid.Cell>
+
+              <Grid.Cell>
+                <Field
+                  type="url"
+                  id="url"
+                  name="url"
+                  label={t("t.url")}
+                  placeholder={"https://"}
+                  register={register}
+                  error={!!errors?.url}
+                  errorMessage={
+                    errors?.url?.type === "https" ? t("errors.urlHttpsError") : t("errors.urlError")
+                  }
+                />
+              </Grid.Cell>
+
+              <Grid.Cell className="flex">
+                <Textarea
+                  id="note"
+                  name="note"
+                  label={t("listings.events.openHouseNotes")}
+                  placeholder={t("t.notes")}
+                  register={register}
+                  note={t("t.optional")}
+                  rows={5}
+                />
+              </Grid.Cell>
+            </Grid.Row>
+          </SectionWithGrid>
+        </Card.Section>
+      </Card>
 
       <Button
         type="button"
diff --git a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx
index 17cc9722b3..fa192c97d9 100644
--- a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState, useContext } from "react"
 import {
   t,
-  GridSection,
-  GridCell,
   Field,
   Select,
   AppearanceStyleType,
@@ -13,7 +11,7 @@ import {
   numberOptions,
   AppearanceSizeType,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { Card, FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { AuthContext } from "@bloom-housing/shared-helpers"
 import { useForm, useWatch, useFormContext } from "react-hook-form"
 import { TempUnit } from "../../../lib/listings/formTypes"
@@ -25,6 +23,7 @@ import {
 } from "@bloom-housing/backend-core/types"
 import { useAmiChartList, useUnitPriorityList, useUnitTypeList } from "../../../lib/hooks"
 import { arrayToFormOptions, getRentType, fieldHasError } from "../../../lib/helpers"
+import SectionWithGrid from "../../shared/SectionWithGrid"
 
 type UnitFormProps = {
   onSubmit: (unit: TempUnit) => void
@@ -112,8 +111,8 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
       )
       return (
         <tr key={index}>
-          <td className={"pl-4"}>{index + 1}</td>
-          <td>{incomeCell}</td>
+          <td className="pl-4 py-2">{index + 1}</td>
+          <td className="py-2">{incomeCell}</td>
         </tr>
       )
     })
@@ -386,188 +385,184 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
 
   return (
     <Form onSubmit={() => false}>
-      <div className="border rounded-md p-8 bg-white">
-        <GridSection title={t("listings.unit.details")} columns={4}>
-          <GridCell>
-            <FieldValue label={t("listings.unit.unitNumber")}>
-              <Field
-                id="number"
-                name="number"
-                label={t("listings.unit.unitNumber")}
-                placeholder={t("listings.unit.unitNumber")}
-                register={register}
-                type="text"
-                readerOnly
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.unit.type")}>
-              <Select
-                id="unitType.id"
-                name="unitType.id"
-                label={t("listings.unit.type")}
-                placeholder={t("listings.unit.type")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={unitTypesOptions}
-                error={fieldHasError(errors?.unitType)}
-                errorMessage={t("errors.requiredFieldError")}
-                validation={{ required: true }}
-                inputProps={{
-                  onChange: () => {
-                    clearErrors("unitType.id")
-                  },
-                }}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.unit.numBathrooms")}>
-              <Select
-                id="numBathrooms"
-                name="numBathrooms"
-                label={t("listings.unit.numBathrooms")}
-                placeholder={t("listings.unit.numBathrooms")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={[
-                  { label: t("listings.unit.sharedBathroom"), value: "0" },
-                  ...numberOptions(5),
-                ]}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.unit.floor")}>
-              <Select
-                id="floor"
-                name="floor"
-                label={t("listings.unit.floor")}
-                placeholder={t("listings.unit.floor")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={numberOptions(10)}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.unit.squareFootage")}>
-              <Field
-                id="sqFeet"
-                name="sqFeet"
-                label={t("listings.unit.squareFootage")}
-                placeholder={t("listings.unit.squareFootage")}
-                register={register}
-                readerOnly
-                type="number"
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.unit.minOccupancy")}>
-              <Select
-                id="minOccupancy"
-                name="minOccupancy"
-                label={t("listings.unit.minOccupancy")}
-                placeholder={t("listings.unit.minOccupancy")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={numberOptions(numberOccupancyOptions)}
-                error={fieldHasError(errors?.minOccupancy)}
-                errorMessage={t("errors.minGreaterThanMaxOccupancyError")}
-                validation={{ max: maxOccupancy || numberOccupancyOptions }}
-                inputProps={{
-                  onChange: () => {
-                    void trigger("minOccupancy")
-                    void trigger("maxOccupancy")
-                  },
-                }}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.unit.maxOccupancy")}>
-              <Select
-                id="maxOccupancy"
-                name="maxOccupancy"
-                label={t("listings.unit.maxOccupancy")}
-                placeholder={t("listings.unit.maxOccupancy")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={numberOptions(numberOccupancyOptions)}
-                error={fieldHasError(errors?.maxOccupancy)}
-                errorMessage={t("errors.maxLessThanMinOccupancyError")}
-                validation={{ min: minOccupancy }}
-                inputProps={{
-                  onChange: () => {
-                    void trigger("minOccupancy")
-                    void trigger("maxOccupancy")
-                  },
-                }}
-              />
-            </FieldValue>
-          </GridCell>
-        </GridSection>
-        <GridSection title={t("listings.unit.eligibility")} columns={4} separator>
-          <GridCell>
-            <FieldValue label={t("listings.unit.amiChart")}>
-              <Select
-                id="amiChart.id"
-                name="amiChart.id"
-                label={t("listings.unit.amiChart")}
-                placeholder={t("listings.unit.amiChart")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={amiChartsOptions}
-                inputProps={{
-                  onChange: () => {
-                    setValue("amiPercentage", undefined)
-                    clearErrors("amiPercentage")
-                    ;[...Array(maxAmiHouseholdSize)].forEach((_, index) => {
-                      setValue(`maxIncomeHouseholdSize${index + 1}`, undefined)
-                    })
-                    if (amiChartID && !loading && amiChartsOptions) {
-                      void fetchAmiChart()
+      <Card>
+        <Card.Section>
+          <SectionWithGrid heading={t("listings.unit.details")}>
+            <Grid.Row columns={4}>
+              <FieldValue label={t("listings.unit.unitNumber")}>
+                <Field
+                  id="number"
+                  name="number"
+                  label={t("listings.unit.unitNumber")}
+                  placeholder={t("listings.unit.unitNumber")}
+                  register={register}
+                  type="text"
+                  readerOnly
+                />
+              </FieldValue>
+
+              <FieldValue label={t("listings.unit.type")}>
+                <Select
+                  id="unitType.id"
+                  name="unitType.id"
+                  label={t("listings.unit.type")}
+                  placeholder={t("listings.unit.type")}
+                  labelClassName="sr-only"
+                  register={register}
+                  controlClassName="control"
+                  options={unitTypesOptions}
+                  error={fieldHasError(errors?.unitType)}
+                  errorMessage={t("errors.requiredFieldError")}
+                  validation={{ required: true }}
+                  inputProps={{
+                    onChange: () => {
+                      clearErrors("unitType.id")
+                    },
+                  }}
+                />
+              </FieldValue>
+
+              <FieldValue label={t("listings.unit.numBathrooms")}>
+                <Select
+                  id="numBathrooms"
+                  name="numBathrooms"
+                  label={t("listings.unit.numBathrooms")}
+                  placeholder={t("listings.unit.numBathrooms")}
+                  labelClassName="sr-only"
+                  register={register}
+                  controlClassName="control"
+                  options={[
+                    { label: t("listings.unit.sharedBathroom"), value: "0" },
+                    ...numberOptions(5),
+                  ]}
+                />
+              </FieldValue>
+
+              <FieldValue label={t("listings.unit.floor")}>
+                <Select
+                  id="floor"
+                  name="floor"
+                  label={t("listings.unit.floor")}
+                  placeholder={t("listings.unit.floor")}
+                  labelClassName="sr-only"
+                  register={register}
+                  controlClassName="control"
+                  options={numberOptions(10)}
+                />
+              </FieldValue>
+
+              <FieldValue label={t("listings.unit.squareFootage")}>
+                <Field
+                  id="sqFeet"
+                  name="sqFeet"
+                  label={t("listings.unit.squareFootage")}
+                  placeholder={t("listings.unit.squareFootage")}
+                  register={register}
+                  readerOnly
+                  type="number"
+                />
+              </FieldValue>
+
+              <FieldValue label={t("listings.unit.minOccupancy")}>
+                <Select
+                  id="minOccupancy"
+                  name="minOccupancy"
+                  label={t("listings.unit.minOccupancy")}
+                  placeholder={t("listings.unit.minOccupancy")}
+                  labelClassName="sr-only"
+                  register={register}
+                  controlClassName="control"
+                  options={numberOptions(numberOccupancyOptions)}
+                  error={fieldHasError(errors?.minOccupancy)}
+                  errorMessage={t("errors.minGreaterThanMaxOccupancyError")}
+                  validation={{ max: maxOccupancy || numberOccupancyOptions }}
+                  inputProps={{
+                    onChange: () => {
+                      void trigger("minOccupancy")
+                      void trigger("maxOccupancy")
+                    },
+                  }}
+                />
+              </FieldValue>
+
+              <FieldValue label={t("listings.unit.maxOccupancy")}>
+                <Select
+                  id="maxOccupancy"
+                  name="maxOccupancy"
+                  label={t("listings.unit.maxOccupancy")}
+                  placeholder={t("listings.unit.maxOccupancy")}
+                  labelClassName="sr-only"
+                  register={register}
+                  controlClassName="control"
+                  options={numberOptions(numberOccupancyOptions)}
+                  error={fieldHasError(errors?.maxOccupancy)}
+                  errorMessage={t("errors.maxLessThanMinOccupancyError")}
+                  validation={{ min: minOccupancy }}
+                  inputProps={{
+                    onChange: () => {
+                      void trigger("minOccupancy")
+                      void trigger("maxOccupancy")
+                    },
+                  }}
+                />
+              </FieldValue>
+            </Grid.Row>
+          </SectionWithGrid>
+
+          <hr className="spacer-section-above spacer-section" />
+          <SectionWithGrid heading={t("listings.unit.eligibility")}>
+            <Grid.Row columns={4}>
+              <FieldValue label={t("listings.unit.amiChart")}>
+                <Select
+                  id="amiChart.id"
+                  name="amiChart.id"
+                  label={t("listings.unit.amiChart")}
+                  placeholder={t("listings.unit.amiChart")}
+                  labelClassName="sr-only"
+                  register={register}
+                  controlClassName="control"
+                  options={amiChartsOptions}
+                  inputProps={{
+                    onChange: () => {
+                      setValue("amiPercentage", undefined)
+                      clearErrors("amiPercentage")
+                      ;[...Array(maxAmiHouseholdSize)].forEach((_, index) => {
+                        setValue(`maxIncomeHouseholdSize${index + 1}`, undefined)
+                      })
+                      if (amiChartID && !loading && amiChartsOptions) {
+                        void fetchAmiChart()
+                        setIsAmiPercentageDirty(true)
+                      }
+                    },
+                  }}
+                />
+              </FieldValue>
+
+              <FieldValue label={t("listings.unit.amiPercentage")}>
+                <Select
+                  name="amiPercentage"
+                  label={t("listings.unit.amiPercentage")}
+                  placeholder={t("listings.unit.amiPercentage")}
+                  labelClassName="sr-only"
+                  register={register}
+                  controlClassName="control"
+                  options={amiChartPercentageOptions}
+                  inputProps={{
+                    onChange: () => {
                       setIsAmiPercentageDirty(true)
-                    }
-                  },
-                }}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.unit.amiPercentage")}>
-              <Select
-                name="amiPercentage"
-                label={t("listings.unit.amiPercentage")}
-                placeholder={t("listings.unit.amiPercentage")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={amiChartPercentageOptions}
-                inputProps={{
-                  onChange: () => {
-                    setIsAmiPercentageDirty(true)
-                    clearErrors("amiPercentage")
-                  },
-                }}
-                error={fieldHasError(errors?.amiPercentage)}
-                errorMessage={t("errors.requiredFieldError")}
-                validation={{ required: !!amiChartID }}
-                disabled={!amiChartID}
-              />
-            </FieldValue>
-          </GridCell>
-        </GridSection>
-        <GridSection columns={2} className="pt-6">
-          <GridCell>
+                      clearErrors("amiPercentage")
+                    },
+                  }}
+                  error={fieldHasError(errors?.amiPercentage)}
+                  errorMessage={t("errors.requiredFieldError")}
+                  validation={{ required: !!amiChartID }}
+                  disabled={!amiChartID}
+                />
+              </FieldValue>
+            </Grid.Row>
+          </SectionWithGrid>
+
+          <section className="mb-6 sm:w-1/2 sm:pr-3">
             <table className={"w-full text-xs td-plain th-plain"}>
               <thead>
                 <tr>
@@ -577,57 +572,50 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
               </thead>
               <tbody>{getAmiChartTableData()}</tbody>
             </table>
-          </GridCell>
-        </GridSection>
-        <GridSection columns={4} className="pt-6">
-          <GridCell>
-            <FieldValue label={t("listings.unit.rentType")}>
-              <FieldGroup
-                name="rentType"
-                type="radio"
-                register={register}
-                fields={rentTypeOptions}
-                fieldClassName="m-0"
-                fieldGroupClassName="flex h-12 items-center"
-              />
-            </FieldValue>
-          </GridCell>
-          {rentType === "fixed" && (
-            <>
-              <GridCell>
-                <FieldValue label={t("t.monthlyMinimumIncome")}>
-                  <Field
-                    id="monthlyIncomeMin"
-                    name="monthlyIncomeMin"
-                    label={t("t.monthlyMinimumIncome")}
-                    placeholder="0.00"
-                    register={register}
-                    type="number"
-                    prepend="$"
-                    readerOnly
-                  />
-                </FieldValue>
-              </GridCell>
-              <GridCell>
-                <FieldValue label={t("listings.unit.monthlyRent")}>
-                  <Field
-                    id="monthlyRent"
-                    name="monthlyRent"
-                    label={t("listings.unit.monthlyRent")}
-                    placeholder="0.00"
-                    register={register}
-                    type="number"
-                    prepend="$"
-                    readerOnly
-                  />
-                </FieldValue>
-              </GridCell>
-            </>
-          )}
-          {rentType === "percentage" && (
-            <>
-              <GridCell>
-                <FieldValue label={t("listings.unit.percentage")}>
+          </section>
+
+          <Grid>
+            <Grid.Row columns={4}>
+              <FieldValue label={t("listings.unit.rentType")}>
+                <FieldGroup
+                  name="rentType"
+                  type="radio"
+                  register={register}
+                  fields={rentTypeOptions}
+                  fieldClassName="m-0"
+                  fieldGroupClassName="flex h-12 items-center"
+                />
+              </FieldValue>
+
+              {rentType === "fixed" && (
+                <>
+                  <Grid.Cell>
+                    <Field
+                      id="monthlyIncomeMin"
+                      name="monthlyIncomeMin"
+                      label={t("t.minimumIncome")}
+                      placeholder="0.00"
+                      register={register}
+                      type="number"
+                      prepend="$"
+                    />
+                  </Grid.Cell>
+
+                  <Grid.Cell>
+                    <Field
+                      id="monthlyRent"
+                      name="monthlyRent"
+                      label={t("listings.unit.monthlyRent")}
+                      placeholder="0.00"
+                      register={register}
+                      type="number"
+                      prepend="$"
+                    />
+                  </Grid.Cell>
+                </>
+              )}
+              {rentType === "percentage" && (
+                <Grid.Cell>
                   <Field
                     id="monthlyRentAsPercentOfIncome"
                     name="monthlyRentAsPercentOfIncome"
@@ -635,30 +623,31 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro
                     placeholder={t("listings.unit.percentage")}
                     register={register}
                     type="number"
-                    readerOnly
                   />
-                </FieldValue>
-              </GridCell>
-            </>
-          )}
-        </GridSection>
-        <GridSection title={t("t.accessibility")} columns={4} separator>
-          <GridCell>
-            <FieldValue label={t("listings.unit.accessibilityPriorityType")}>
-              <Select
-                id="priorityType.id"
-                name="priorityType.id"
-                label={t("listings.unit.accessibilityPriorityType")}
-                placeholder={t("listings.unit.accessibilityPriorityType")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={unitPrioritiesOptions}
-              />
-            </FieldValue>
-          </GridCell>
-        </GridSection>
-      </div>
+                </Grid.Cell>
+              )}
+            </Grid.Row>
+          </Grid>
+
+          <hr className="spacer-section-above spacer-section" />
+          <SectionWithGrid heading={t("t.accessibility")}>
+            <Grid.Row columns={4}>
+              <Grid.Cell>
+                <Select
+                  id="priorityType.id"
+                  name="priorityType.id"
+                  label={t("listings.unit.accessibilityPriorityType")}
+                  placeholder={t("listings.unit.accessibilityPriorityType")}
+                  register={register}
+                  controlClassName="control"
+                  options={unitPrioritiesOptions}
+                />
+              </Grid.Cell>
+            </Grid.Row>
+          </SectionWithGrid>
+        </Card.Section>
+      </Card>
+
       <div className="mt-6">
         {!draft ? (
           <Button
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalDetails.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalDetails.tsx
index f471c183fc..a46e6a05f7 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalDetails.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalDetails.tsx
@@ -1,6 +1,8 @@
 import React from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, Textarea, GridCell } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
+import { t, Textarea } from "@bloom-housing/ui-components"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const AdditionalDetails = () => {
   const formMethods = useFormContext()
@@ -9,45 +11,48 @@ const AdditionalDetails = () => {
   const { register } = formMethods
 
   return (
-    <div>
-      <GridSection
-        columns={2}
-        separator
-        title={t("listings.sections.additionalDetails")}
-        description={t("listings.sections.additionalDetailsSubtitle")}
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.additionalDetails")}
+        subheading={t("listings.sections.additionalDetailsSubtitle")}
       >
-        <GridCell>
-          <Textarea
-            label={t("listings.requiredDocuments")}
-            name={"requiredDocuments"}
-            id={"requiredDocuments"}
-            fullWidth={true}
-            register={register}
-            maxLength={2000}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("listings.importantProgramRules")}
-            name={"programRules"}
-            id={"programRules"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("listings.specialNotes")}
-            name={"specialNotes"}
-            id={"specialNotes"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
-      </GridSection>
-    </div>
+        <Grid.Row columns={2}>
+          <Grid.Cell>
+            <Textarea
+              label={t("listings.requiredDocuments")}
+              name={"requiredDocuments"}
+              id={"requiredDocuments"}
+              fullWidth={true}
+              register={register}
+              maxLength={2000}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Textarea
+              label={t("listings.importantProgramRules")}
+              name={"programRules"}
+              id={"programRules"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={2}>
+          <Grid.Cell>
+            <Textarea
+              label={t("listings.specialNotes")}
+              name={"specialNotes"}
+              id={"specialNotes"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalEligibility.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalEligibility.tsx
index dfb73dff9f..0bc8a297c7 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalEligibility.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalEligibility.tsx
@@ -1,8 +1,10 @@
 import React, { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, Textarea, GridCell } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
+import { t, Textarea } from "@bloom-housing/ui-components"
 import { fieldHasError, fieldMessage } from "../../../../lib/helpers"
 import { useJurisdiction } from "../../../../lib/hooks"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type AdditionalEligibilityProps = {
   defaultText?: string
@@ -30,64 +32,67 @@ const AdditionalEligibility = (props: AdditionalEligibilityProps) => {
   }, [currentJurisdiction, setValue])
 
   return (
-    <div>
-      <GridSection
-        separator
-        title={t("listings.sections.additionalEligibilityTitle")}
-        description={t("listings.sections.additionalEligibilitySubtext")}
-        columns={2}
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.additionalEligibilityTitle")}
+        subheading={t("listings.sections.additionalEligibilitySubtext")}
       >
-        <GridCell>
-          <Textarea
-            label={t("listings.creditHistory")}
-            name={"creditHistory"}
-            id={"creditHistory"}
-            fullWidth={true}
-            register={register}
-            maxLength={2000}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("listings.rentalHistory")}
-            name={"rentalHistory"}
-            id={"rentalHistory"}
-            fullWidth={true}
-            register={register}
-            maxLength={2000}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("listings.criminalBackground")}
-            name={"criminalBackground"}
-            id={"criminalBackground"}
-            fullWidth={true}
-            register={register}
-            maxLength={2000}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("listings.sections.rentalAssistanceTitle")}
-            name={"rentalAssistance"}
-            id={"rentalAssistance"}
-            fullWidth={true}
-            register={register}
-            defaultValue={
-              jurisdiction && currentJurisdiction
-                ? currentJurisdiction?.rentalAssistanceDefault
-                : null
-            }
-            errorMessage={fieldMessage(errors?.rentalAssistance)}
-            inputProps={{
-              onChange: () =>
-                fieldHasError(errors?.rentalAssistance) && clearErrors("rentalAssistance"),
-            }}
-          />
-        </GridCell>
-      </GridSection>
-    </div>
+        <Grid.Row columns={2}>
+          <Grid.Cell>
+            <Textarea
+              label={t("listings.creditHistory")}
+              name={"creditHistory"}
+              id={"creditHistory"}
+              fullWidth={true}
+              register={register}
+              maxLength={2000}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Textarea
+              label={t("listings.rentalHistory")}
+              name={"rentalHistory"}
+              id={"rentalHistory"}
+              fullWidth={true}
+              register={register}
+              maxLength={2000}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={2}>
+          <Grid.Cell>
+            <Textarea
+              label={t("listings.criminalBackground")}
+              name={"criminalBackground"}
+              id={"criminalBackground"}
+              fullWidth={true}
+              register={register}
+              maxLength={2000}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Textarea
+              label={t("listings.sections.rentalAssistanceTitle")}
+              name={"rentalAssistance"}
+              id={"rentalAssistance"}
+              fullWidth={true}
+              register={register}
+              defaultValue={
+                jurisdiction && currentJurisdiction
+                  ? currentJurisdiction?.rentalAssistanceDefault
+                  : null
+              }
+              errorMessage={fieldMessage(errors?.rentalAssistance)}
+              inputProps={{
+                onChange: () =>
+                  fieldHasError(errors?.rentalAssistance) && clearErrors("rentalAssistance"),
+              }}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx
index c8aaabef01..8b04199512 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/AdditionalFees.tsx
@@ -1,10 +1,11 @@
 import React, { useContext, useMemo } from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, Field, Textarea, FieldGroup, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Field, Textarea, FieldGroup } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { fieldHasError, fieldMessage } from "../../../../lib/helpers"
 import { AuthContext, listingUtilities } from "@bloom-housing/shared-helpers"
 import { ListingUtilities } from "@bloom-housing/backend-core/types"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type AdditionalFeesProps = {
   existingUtilities: ListingUtilities
@@ -31,54 +32,59 @@ const AdditionalFees = (props: AdditionalFeesProps) => {
     ?.enableUtilitiesIncluded
 
   return (
-    <div>
-      <GridSection
-        grid={false}
-        separator
-        title={t("listings.sections.additionalFees")}
-        description={t("listings.sections.additionalFeesSubtitle")}
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.additionalFees")}
+        subheading={t("listings.sections.additionalFeesSubtitle")}
       >
-        <GridSection columns={3}>
-          <Field
-            label={t("listings.applicationFee")}
-            name={"applicationFee"}
-            id={"applicationFee"}
-            register={register}
-            type={"currency"}
-            prepend={"$"}
-            placeholder={"0.00"}
-          />
-          <Field
-            label={t("listings.depositMin")}
-            name={"depositMin"}
-            id={"depositMin"}
-            register={register}
-            type={"currency"}
-            prepend={"$"}
-            placeholder={"0.00"}
-            error={fieldHasError(errors?.depositMin)}
-            errorMessage={fieldMessage(errors?.depositMin)}
-            inputProps={{
-              onChange: () => clearErrors("depositMin"),
-            }}
-          />
-          <Field
-            label={t("listings.depositMax")}
-            name={"depositMax"}
-            id={"depositMax"}
-            register={register}
-            type={"currency"}
-            prepend={"$"}
-            placeholder={"0.00"}
-            error={fieldHasError(errors?.depositMax)}
-            errorMessage={fieldMessage(errors?.depositMax?.message)}
-            inputProps={{
-              onChange: () => clearErrors("depositMax"),
-            }}
-          />
-        </GridSection>
-        <GridSection columns={2}>
-          <GridCell>
+        <Grid.Row>
+          <Grid.Cell>
+            <Field
+              label={t("listings.applicationFee")}
+              name={"applicationFee"}
+              id={"applicationFee"}
+              register={register}
+              type={"currency"}
+              prepend={"$"}
+              placeholder={"0.00"}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Field
+              label={t("listings.depositMin")}
+              name={"depositMin"}
+              id={"depositMin"}
+              register={register}
+              type={"currency"}
+              prepend={"$"}
+              placeholder={"0.00"}
+              error={fieldHasError(errors?.depositMin)}
+              errorMessage={fieldMessage(errors?.depositMin)}
+              inputProps={{
+                onChange: () => clearErrors("depositMin"),
+              }}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Field
+              label={t("listings.depositMax")}
+              name={"depositMax"}
+              id={"depositMax"}
+              register={register}
+              type={"currency"}
+              prepend={"$"}
+              placeholder={"0.00"}
+              error={fieldHasError(errors?.depositMax)}
+              errorMessage={fieldMessage(errors?.depositMax?.message)}
+              inputProps={{
+                onChange: () => clearErrors("depositMax"),
+              }}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Cell>
             <Textarea
               label={t("listings.sections.depositHelperText")}
               name={"depositHelperText"}
@@ -87,8 +93,8 @@ const AdditionalFees = (props: AdditionalFeesProps) => {
               fullWidth={true}
               register={register}
             />
-          </GridCell>
-          <GridCell>
+          </Grid.Cell>
+          <Grid.Cell>
             <Textarea
               label={t("listings.sections.costsNotIncluded")}
               name={"costsNotIncluded"}
@@ -97,10 +103,10 @@ const AdditionalFees = (props: AdditionalFeesProps) => {
               fullWidth={true}
               register={register}
             />
-          </GridCell>
-        </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
         {enableUtilitiesIncluded && (
-          <GridSection columns={1}>
+          <Grid.Row>
             <FieldValue label={t("listings.sections.utilities")}>
               <FieldGroup
                 type="checkbox"
@@ -110,10 +116,10 @@ const AdditionalFees = (props: AdditionalFeesProps) => {
                 fieldGroupClassName="grid grid-cols-2 mt-4"
               />
             </FieldValue>
-          </GridSection>
+          </Grid.Row>
         )}
-      </GridSection>
-    </div>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationAddress.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationAddress.tsx
index 157cf943c7..d379e417f9 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationAddress.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationAddress.tsx
@@ -2,20 +2,19 @@ import React, { useEffect } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import {
   t,
-  GridSection,
   Textarea,
   Field,
-  GridCell,
   Select,
   DateField,
   FieldGroup,
   TimeField,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { stateKeys } from "@bloom-housing/shared-helpers"
 import dayjs from "dayjs"
 import { YesNoAnswer, isNullOrUndefined, fieldHasError } from "../../../../lib/helpers"
 import { FormListing, addressTypes } from "../../../../lib/listings/formTypes"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type ApplicationAddressProps = {
   listing?: FormListing
@@ -177,18 +176,14 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
   const dayjsDate = dayjs(new Date(listing?.postmarkedApplicationsReceivedByDate))
 
   return (
-    <div>
-      <GridSection grid={false}>
-        <hr className="mt-6 mb-6" />
-        <span className="form-section__title">{"Application Address"}</span>
-        <span className="form-section__description">
-          {t("listings.sections.applicationAddressSubtitle")}
-        </span>
-        <GridSection columns={3}>
-          <GridCell>
-            <GridCell span={2}>
-              <p className="field-label m-4 ml-0">{"Can applications be mailed in?"}</p>
-            </GridCell>
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={"Application Address"}
+        subheading={t("listings.sections.applicationAddressSubtitle")}
+      >
+        <Grid.Row columns={3}>
+          <FieldValue label="Can applications be mailed in?">
             <FieldGroup
               name="canApplicationsBeMailedIn"
               type="radio"
@@ -210,11 +205,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                 },
               ]}
             />
-          </GridCell>
-          <GridCell>
-            <GridCell span={2}>
-              <p className="field-label m-4 ml-0">{t("listings.applicationPickupQuestion")}</p>
-            </GridCell>
+          </FieldValue>
+          <FieldValue label={t("listings.applicationPickupQuestion")}>
             <FieldGroup
               name="canPaperApplicationsBePickedUp"
               type="radio"
@@ -236,11 +228,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                 },
               ]}
             />
-          </GridCell>
-          <GridCell>
-            <GridCell span={2}>
-              <p className="field-label m-4 ml-0">{t("listings.applicationDropOffQuestion")}</p>
-            </GridCell>
+          </FieldValue>
+          <FieldValue label={t("listings.applicationDropOffQuestion")}>
             <FieldGroup
               name="canApplicationsBeDroppedOff"
               type="radio"
@@ -262,72 +251,74 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                 },
               ]}
             />
-          </GridCell>
-        </GridSection>
-        <GridSection columns={3}>
-          <GridCell>
-            {applicationsMailedIn === YesNoAnswer.Yes && (
-              <>
-                <p className="field-label m-4 ml-0">{"Where are applications mailed in?"}</p>
-                <FieldGroup
-                  fieldGroupClassName="grid grid-cols-1"
-                  fieldClassName="ml-0"
-                  name="whereApplicationsMailedIn"
-                  type="radio"
-                  register={register}
-                  fields={getLocationOptions(
-                    "mailIn",
-                    listing?.applicationMailingAddressType,
-                    isNullOrUndefined(listing?.applicationMailingAddress) === false
-                  )}
-                />
-              </>
-            )}
-          </GridCell>
-          <GridCell>
-            {applicationsPickedUp === YesNoAnswer.Yes && (
-              <>
-                <p className="field-label m-4 ml-0">{t("listings.wherePickupQuestion")}</p>
-                <FieldGroup
-                  fieldGroupClassName="grid grid-cols-1"
-                  fieldClassName="ml-0"
-                  name="whereApplicationsPickedUp"
-                  type="radio"
-                  register={register}
-                  fields={getLocationOptions(
-                    "pickUp",
-                    listing?.applicationPickUpAddressType,
-                    isNullOrUndefined(listing?.applicationPickUpAddress) === false
-                  )}
-                />
-              </>
-            )}
-          </GridCell>
-          <GridCell>
-            {applicationsDroppedOff === YesNoAnswer.Yes && (
-              <>
-                <p className="field-label m-4 ml-0">{t("listings.whereDropOffQuestion")}</p>
-                <FieldGroup
-                  fieldGroupClassName="grid grid-cols-1"
-                  fieldClassName="ml-0"
-                  name="whereApplicationsDroppedOff"
-                  type="radio"
-                  register={register}
-                  fields={getLocationOptions(
-                    "dropOff",
-                    listing?.applicationDropOffAddressType,
-                    isNullOrUndefined(listing?.applicationDropOffAddress) === false
-                  )}
-                />
-              </>
-            )}
-          </GridCell>
-        </GridSection>
+          </FieldValue>
+        </Grid.Row>
+        <Grid.Row columns={3}>
+          {applicationsMailedIn === YesNoAnswer.Yes ? (
+            <FieldValue label="Where are applications mailed in?">
+              <FieldGroup
+                fieldGroupClassName="grid grid-cols-1"
+                fieldClassName="ml-0"
+                name="whereApplicationsMailedIn"
+                type="radio"
+                register={register}
+                fields={getLocationOptions(
+                  "mailIn",
+                  listing?.applicationMailingAddressType,
+                  isNullOrUndefined(listing?.applicationMailingAddress) === false
+                )}
+              />
+            </FieldValue>
+          ) : (
+            <Grid.Cell> </Grid.Cell>
+          )}
+
+          {applicationsPickedUp === YesNoAnswer.Yes ? (
+            <FieldValue label={t("listings.wherePickupQuestion")}>
+              <FieldGroup
+                fieldGroupClassName="grid grid-cols-1"
+                fieldClassName="ml-0"
+                name="whereApplicationsPickedUp"
+                type="radio"
+                register={register}
+                fields={getLocationOptions(
+                  "pickUp",
+                  listing?.applicationPickUpAddressType,
+                  isNullOrUndefined(listing?.applicationPickUpAddress) === false
+                )}
+              />
+            </FieldValue>
+          ) : (
+            <Grid.Cell> </Grid.Cell>
+          )}
+
+          {applicationsDroppedOff === YesNoAnswer.Yes ? (
+            <FieldValue label={t("listings.whereDropOffQuestion")}>
+              <FieldGroup
+                fieldGroupClassName="grid grid-cols-1"
+                fieldClassName="ml-0"
+                name="whereApplicationsDroppedOff"
+                type="radio"
+                register={register}
+                fields={getLocationOptions(
+                  "dropOff",
+                  listing?.applicationDropOffAddressType,
+                  isNullOrUndefined(listing?.applicationDropOffAddress) === false
+                )}
+              />
+            </FieldValue>
+          ) : (
+            <Grid.Cell> </Grid.Cell>
+          )}
+        </Grid.Row>
         {applicationsMailedIn === YesNoAnswer.Yes &&
           mailedInAddressType === addressTypes.anotherAddress && (
-            <GridSection grid={false} subtitle={t("application.contact.mailingAddress")}>
-              <GridSection columns={3}>
-                <GridCell span={2}>
+            <>
+              <SectionWithGrid.HeadingRow>
+                {t("application.contact.mailingAddress")}
+              </SectionWithGrid.HeadingRow>
+              <Grid.Row columns={3}>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Field
                     label={t("listings.streetAddressOrPOBox")}
                     name={"applicationMailingAddress.street"}
@@ -349,19 +340,20 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationMailingAddress"),
                     }}
                   />
-                </GridCell>
-
-                <Field
-                  label={t("application.contact.apt")}
-                  name={"applicationMailingAddress.street2"}
-                  id={"applicationMailingAddress.street2"}
-                  register={register}
-                  placeholder={t("application.contact.apt")}
-                  dataTestId={"mailing-address-street2"}
-                />
-              </GridSection>
-              <GridSection columns={7}>
-                <GridCell span={3}>
+                </Grid.Cell>
+                <Grid.Cell>
+                  <Field
+                    label={t("application.contact.apt")}
+                    name={"applicationMailingAddress.street2"}
+                    id={"applicationMailingAddress.street2"}
+                    register={register}
+                    placeholder={t("application.contact.apt")}
+                    dataTestId={"mailing-address-street2"}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+              <Grid.Row columns={7}>
+                <Grid.Cell className="seeds-grid-span-3">
                   <Field
                     label={t("application.contact.city")}
                     name={"applicationMailingAddress.city"}
@@ -383,8 +375,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationMailingAddress"),
                     }}
                   />
-                </GridCell>
-                <GridCell span={2}>
+                </Grid.Cell>
+                <Grid.Cell className="seeds-grid-span-2">
                   <FieldValue label={t("application.contact.state")} className="mb-0">
                     <Select
                       id={`applicationMailingAddress.state`}
@@ -411,8 +403,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       }}
                     />
                   </FieldValue>
-                </GridCell>
-                <GridCell span={2}>
+                </Grid.Cell>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Field
                     label={t("application.contact.zip")}
                     name={"applicationMailingAddress.zipCode"}
@@ -434,15 +426,16 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationMailingAddress"),
                     }}
                   />
-                </GridCell>
-              </GridSection>
-            </GridSection>
+                </Grid.Cell>
+              </Grid.Row>
+            </>
           )}
         {applicationsPickedUp === YesNoAnswer.Yes &&
           pickedUpAddressType === addressTypes.anotherAddress && (
-            <GridSection grid={false} subtitle={t("listings.pickupAddress")}>
-              <GridSection columns={3}>
-                <GridCell span={2}>
+            <>
+              <SectionWithGrid.HeadingRow>{t("listings.pickupAddress")}</SectionWithGrid.HeadingRow>
+              <Grid.Row columns={3}>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Field
                     label={t("listings.streetAddressOrPOBox")}
                     name={"applicationPickUpAddress.street"}
@@ -463,7 +456,7 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationPickUpAddress"),
                     }}
                   />
-                </GridCell>
+                </Grid.Cell>
                 <Field
                   label={t("application.contact.apt")}
                   name={"applicationPickUpAddress.street2"}
@@ -471,9 +464,9 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                   register={register}
                   placeholder={t("application.contact.apt")}
                 />
-              </GridSection>
-              <GridSection columns={7}>
-                <GridCell span={3}>
+              </Grid.Row>
+              <Grid.Row columns={7}>
+                <Grid.Cell className="seeds-grid-span-3">
                   <Field
                     label={t("application.contact.city")}
                     name={"applicationPickUpAddress.city"}
@@ -491,8 +484,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationPickUpAddress"),
                     }}
                   />
-                </GridCell>
-                <GridCell span={2}>
+                </Grid.Cell>
+                <Grid.Cell className="seeds-grid-span-2">
                   <FieldValue label={t("application.contact.state")} className="mb-0">
                     <Select
                       id={`applicationPickUpAddress.state`}
@@ -518,8 +511,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       }}
                     />
                   </FieldValue>
-                </GridCell>
-                <GridCell span={2}>
+                </Grid.Cell>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Field
                     label={t("application.contact.zip")}
                     name={"applicationPickUpAddress.zipCode"}
@@ -540,10 +533,10 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationPickUpAddress"),
                     }}
                   />
-                </GridCell>
-              </GridSection>
-              <GridSection columns={3}>
-                <GridCell span={2}>
+                </Grid.Cell>
+              </Grid.Row>
+              <Grid.Row columns={3}>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Textarea
                     label={t("leasingAgent.officeHours")}
                     name={"applicationPickUpAddressOfficeHours"}
@@ -552,15 +545,18 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                     register={register}
                     placeholder={t("leasingAgent.officeHoursPlaceholder")}
                   />
-                </GridCell>
-              </GridSection>
-            </GridSection>
+                </Grid.Cell>
+              </Grid.Row>
+            </>
           )}
         {applicationsDroppedOff === YesNoAnswer.Yes &&
           droppedOffAddressType === addressTypes.anotherAddress && (
-            <GridSection grid={false} subtitle={t("listings.dropOffAddress")}>
-              <GridSection columns={3}>
-                <GridCell span={2}>
+            <>
+              <SectionWithGrid.HeadingRow>
+                {t("listings.dropOffAddress")}
+              </SectionWithGrid.HeadingRow>
+              <Grid.Row columns={3}>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Field
                     label={t("listings.streetAddressOrPOBox")}
                     name={"applicationDropOffAddress.street"}
@@ -581,7 +577,7 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationDropOffAddress"),
                     }}
                   />
-                </GridCell>
+                </Grid.Cell>
                 <Field
                   label={t("application.contact.apt")}
                   name={"applicationDropOffAddress.street2"}
@@ -589,9 +585,9 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                   register={register}
                   placeholder={t("application.contact.apt")}
                 />
-              </GridSection>
-              <GridSection columns={7}>
-                <GridCell span={3}>
+              </Grid.Row>
+              <Grid.Row columns={7}>
+                <Grid.Cell className="seeds-grid-span-3">
                   <Field
                     label={t("application.contact.city")}
                     name={"applicationDropOffAddress.city"}
@@ -612,8 +608,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationDropOffAddress"),
                     }}
                   />
-                </GridCell>
-                <GridCell span={2}>
+                </Grid.Cell>
+                <Grid.Cell className="seeds-grid-span-2">
                   <FieldValue label={t("application.contact.state")} className="mb-0">
                     <Select
                       id={`applicationDropOffAddress.state`}
@@ -639,8 +635,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       }}
                     />
                   </FieldValue>
-                </GridCell>
-                <GridCell span={2}>
+                </Grid.Cell>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Field
                     label={t("application.contact.zip")}
                     name={"applicationDropOffAddress.zipCode"}
@@ -661,10 +657,10 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                       onChange: () => clearErrors("applicationDropOffAddress"),
                     }}
                   />
-                </GridCell>
-              </GridSection>
-              <GridSection columns={3}>
-                <GridCell span={2}>
+                </Grid.Cell>
+              </Grid.Row>
+              <Grid.Row columns={3}>
+                <Grid.Cell className="seeds-grid-span-2">
                   <Textarea
                     label={t("leasingAgent.officeHours")}
                     name={"applicationDropOffAddressOfficeHours"}
@@ -673,15 +669,13 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                     register={register}
                     placeholder={t("leasingAgent.officeHoursPlaceholder")}
                   />
-                </GridCell>
-              </GridSection>
-            </GridSection>
+                </Grid.Cell>
+              </Grid.Row>
+            </>
           )}
 
-        <GridSection columns={3}>
-          <GridCell>
-            <p className="field-label m-4 ml-0">{t("listings.postmarksConsideredQuestion")}</p>
-
+        <Grid.Row columns={3}>
+          <FieldValue label={t("listings.postmarksConsideredQuestion")}>
             <FieldGroup
               name="arePostmarksConsidered"
               type="radio"
@@ -699,8 +693,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                 },
               ]}
             />
-          </GridCell>
-          <GridCell className={"mt-4"}>
+          </FieldValue>
+          <Grid.Cell className={"mt-4"}>
             {postmarksConsidered === YesNoAnswer.Yes && (
               <DateField
                 label={t("listings.receivedByDate")}
@@ -722,8 +716,8 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                 dataTestId={"postmark-date-field"}
               />
             )}
-          </GridCell>
-          <GridCell className={"mt-4"}>
+          </Grid.Cell>
+          <Grid.Cell className={"mt-4"}>
             {postmarksConsidered === YesNoAnswer.Yes && (
               <TimeField
                 label={t("listings.receivedByTime")}
@@ -749,10 +743,10 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
                 dataTestId={"postmark-time-field"}
               />
             )}
-          </GridCell>
-        </GridSection>
-        <GridSection columns={3}>
-          <GridCell span={2}>
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={3}>
+          <Grid.Cell className="seeds-grid-span-2">
             <Textarea
               label={t("listings.additionalApplicationSubmissionNotes")}
               name={"additionalApplicationSubmissionNotes"}
@@ -761,10 +755,10 @@ const ApplicationAddress = ({ listing }: ApplicationAddressProps) => {
               register={register}
               placeholder={t("t.addNotes")}
             />
-          </GridCell>
-        </GridSection>
-      </GridSection>
-    </div>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx
index b9a96cbfd2..0ddce9d2ea 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationDates.tsx
@@ -6,7 +6,6 @@ import dayjs from "dayjs"
 
 import {
   t,
-  GridSection,
   DateField,
   TimeField,
   Drawer,
@@ -17,8 +16,10 @@ import {
   Modal,
   AppearanceStyleType,
 } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { FormListing, TempEvent } from "../../../../lib/listings/formTypes"
 import { OpenHouseForm } from "../OpenHouseForm"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type ApplicationDatesProps = {
   openHouseEvents: TempEvent[]
@@ -117,66 +118,69 @@ const ApplicationDates = ({
 
   return (
     <>
-      <GridSection
-        grid={false}
-        separator
-        title={t("listings.sections.applicationDatesTitle")}
-        description={t("listings.sections.applicationDatesSubtitle")}
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.applicationDatesTitle")}
+        subheading={t("listings.sections.applicationDatesSubtitle")}
       >
-        <GridSection columns={2}>
-          <DateField
-            label={t("listings.applicationDeadline")}
-            name={"applicationDueDateField"}
-            id={"applicationDueDateField"}
-            register={register}
-            watch={watch}
-            note={t("listings.whenApplicationsClose")}
-            disabled={enableDueDate === YesNoAnswer.No}
-            defaultDate={{
-              month: listing?.applicationDueDate
-                ? dayjs(new Date(listing?.applicationDueDate)).format("MM")
-                : null,
-              day: listing?.applicationDueDate
-                ? dayjs(new Date(listing?.applicationDueDate)).format("DD")
-                : null,
-              year: listing?.applicationDueDate
-                ? dayjs(new Date(listing?.applicationDueDate)).format("YYYY")
-                : null,
-            }}
-          />
-          <TimeField
-            label={t("listings.applicationDueTime")}
-            name={"applicationDueTimeField"}
-            id={"applicationDueTimeField"}
-            register={register}
-            watch={watch}
-            disabled={enableDueDate === YesNoAnswer.No}
-            defaultValues={{
-              hours: listing?.applicationDueDate
-                ? dayjs(new Date(listing?.applicationDueDate)).format("hh")
-                : enableDueDate === YesNoAnswer.No
-                ? null
-                : "05",
-              minutes: listing?.applicationDueDate
-                ? dayjs(new Date(listing?.applicationDueDate)).format("mm")
-                : enableDueDate === YesNoAnswer.No
-                ? null
-                : "00",
-              seconds: listing?.applicationDueDate
-                ? dayjs(new Date(listing?.applicationDueDate)).format("ss")
-                : enableDueDate === YesNoAnswer.No
-                ? null
-                : "00",
-              period: listing?.applicationDueDate
-                ? new Date(listing?.applicationDueDate).getHours() >= 12
-                  ? "pm"
-                  : "am"
-                : "pm",
-            }}
-          />
-        </GridSection>
-        <div className="mt-5">
-          <div className="bg-gray-300 px-4 py-5 mt-5">
+        <Grid.Row columns={2}>
+          <Grid.Cell>
+            <DateField
+              label={t("listings.applicationDeadline")}
+              name={"applicationDueDateField"}
+              id={"applicationDueDateField"}
+              register={register}
+              watch={watch}
+              note={t("listings.whenApplicationsClose")}
+              disabled={enableDueDate === YesNoAnswer.No}
+              defaultDate={{
+                month: listing?.applicationDueDate
+                  ? dayjs(new Date(listing?.applicationDueDate)).format("MM")
+                  : null,
+                day: listing?.applicationDueDate
+                  ? dayjs(new Date(listing?.applicationDueDate)).format("DD")
+                  : null,
+                year: listing?.applicationDueDate
+                  ? dayjs(new Date(listing?.applicationDueDate)).format("YYYY")
+                  : null,
+              }}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <TimeField
+              label={t("listings.applicationDueTime")}
+              name={"applicationDueTimeField"}
+              id={"applicationDueTimeField"}
+              register={register}
+              watch={watch}
+              disabled={enableDueDate === YesNoAnswer.No}
+              defaultValues={{
+                hours: listing?.applicationDueDate
+                  ? dayjs(new Date(listing?.applicationDueDate)).format("hh")
+                  : enableDueDate === YesNoAnswer.No
+                  ? null
+                  : "05",
+                minutes: listing?.applicationDueDate
+                  ? dayjs(new Date(listing?.applicationDueDate)).format("mm")
+                  : enableDueDate === YesNoAnswer.No
+                  ? null
+                  : "00",
+                seconds: listing?.applicationDueDate
+                  ? dayjs(new Date(listing?.applicationDueDate)).format("ss")
+                  : enableDueDate === YesNoAnswer.No
+                  ? null
+                  : "00",
+                period: listing?.applicationDueDate
+                  ? new Date(listing?.applicationDueDate).getHours() >= 12
+                    ? "pm"
+                    : "am"
+                  : "pm",
+              }}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Cell className="grid-inset-section">
             {!!openHouseTableData.length && (
               <div className="mb-5">
                 <MinimalTable headers={openHouseHeaders} data={openHouseTableData} />
@@ -191,9 +195,9 @@ const ApplicationDates = ({
             >
               {t("listings.sections.addOpenHouse")}
             </Button>
-          </div>
-        </div>
-      </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
 
       <Drawer
         open={!!drawerOpenHouse}
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx
index 0affd13b4f..a1707c1259 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ApplicationTypes.tsx
@@ -6,8 +6,6 @@ import {
   Button,
   Drawer,
   Dropzone,
-  GridSection,
-  GridCell,
   FieldGroup,
   Field,
   MinimalTable,
@@ -18,6 +16,7 @@ import {
   StandardTableData,
   AppearanceSizeType,
 } from "@bloom-housing/ui-components"
+import { Card, Grid } from "@bloom-housing/ui-seeds"
 import {
   cloudinaryFileUploader,
   fieldMessage,
@@ -30,6 +29,7 @@ import {
   Language,
 } from "@bloom-housing/backend-core/types"
 import { FormListing } from "../../../../lib/listings/formTypes"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 interface Methods {
   digital: ApplicationMethodCreate
@@ -191,14 +191,13 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
   register("applicationMethods")
   return (
     <>
-      <GridSection
-        grid={false}
-        separator
-        title={t("listings.sections.applicationTypesTitle")}
-        description={t("listings.sections.applicationTypesSubtitle")}
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.applicationTypesTitle")}
+        subheading={t("listings.sections.applicationTypesSubtitle")}
       >
-        <GridSection columns={2}>
-          <GridCell>
+        <Grid.Row columns={2}>
+          <Grid.Cell>
             <p
               className={`field-label m-4 ml-0 ${
                 fieldHasError(errors?.digitalApplication) &&
@@ -248,9 +247,9 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                 },
               ]}
             />
-          </GridCell>
+          </Grid.Cell>
           {digitalApplicationChoice === YesNoAnswer.Yes && (
-            <GridCell>
+            <Grid.Cell>
               <p className="field-label m-4 ml-0">{t("listings.usingCommonDigitalApplication")}</p>
 
               <FieldGroup
@@ -294,17 +293,17 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                   },
                 ]}
               />
-            </GridCell>
+            </Grid.Cell>
           )}
-        </GridSection>
+        </Grid.Row>
         {((commonDigitalApplicationChoice &&
           commonDigitalApplicationChoice === YesNoAnswer.No &&
           digitalApplicationChoice === YesNoAnswer.Yes) ||
           (digitalApplicationChoice === YesNoAnswer.Yes &&
             !commonDigitalApplicationChoice &&
             listing?.commonDigitalApplication === false)) && (
-          <GridSection columns={1}>
-            <GridCell>
+          <Grid.Row columns={1}>
+            <Grid.Cell>
               <Field
                 label={t("listings.customOnlineApplicationUrl")}
                 name="customOnlineApplicationUrl"
@@ -327,12 +326,12 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                 error={fieldHasError(errors?.applicationMethods?.[0]?.externalReference)}
                 errorMessage={fieldMessage(errors?.applicationMethods?.[0]?.externalReference)}
               />
-            </GridCell>
-          </GridSection>
+            </Grid.Cell>
+          </Grid.Row>
         )}
 
-        <GridSection columns={2}>
-          <GridCell>
+        <Grid.Row columns={2}>
+          <Grid.Cell>
             <p
               className={`field-label m-4 ml-0 ${
                 fieldHasError(errors?.paperApplication) &&
@@ -382,11 +381,11 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                 },
               ]}
             />
-          </GridCell>
-        </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
         {paperApplicationChoice === YesNoAnswer.Yes && (
-          <GridSection columns={1} tinted inset>
-            <GridCell>
+          <Grid.Row columns={1}>
+            <Grid.Cell>
               {methods.paper?.paperApplications?.length > 0 && (
                 <MinimalTable
                   className="mb-8"
@@ -433,12 +432,12 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
               >
                 {t("listings.addPaperApplication")}
               </Button>
-            </GridCell>
-          </GridSection>
+            </Grid.Cell>
+          </Grid.Row>
         )}
 
-        <GridSection columns={1}>
-          <GridCell>
+        <Grid.Row columns={1}>
+          <Grid.Cell>
             <p
               className={`field-label m-4 ml-0 ${
                 fieldHasError(errors?.referralOpportunity) &&
@@ -490,11 +489,11 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                 },
               ]}
             />
-          </GridCell>
-        </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
         {referralOpportunityChoice === YesNoAnswer.Yes && (
-          <GridSection columns={3}>
-            <GridCell>
+          <Grid.Row columns={3}>
+            <Grid.Cell>
               <PhoneField
                 label={t("listings.referralContactPhone")}
                 name="referralContactPhone"
@@ -518,8 +517,8 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                 )}
                 controlClassName={"control"}
               />
-            </GridCell>
-            <GridCell span={2}>
+            </Grid.Cell>
+            <Grid.Cell className="seeds-grid-span-2">
               <Textarea
                 label={t("listings.referralSummary")}
                 rows={3}
@@ -541,10 +540,10 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
                   },
                 }}
               />
-            </GridCell>
-          </GridSection>
+            </Grid.Cell>
+          </Grid.Row>
         )}
-      </GridSection>
+      </SectionWithGrid>
 
       <Drawer
         open={drawerState}
@@ -574,42 +573,44 @@ const ApplicationTypes = ({ listing }: { listing: FormListing }) => {
           </Button>,
         ]}
       >
-        <section className="border rounded-md p-8 bg-white">
-          {cloudinaryData.url === "" && (
-            <div className="field">
-              <p className="mb-2">
-                <label className="label">{t("t.language")}</label>
-              </p>
-              <Select
-                name="paperApplicationLanguage"
-                options={Object.values(Language).map((item) => ({
-                  label: t(`languages.${item}`),
-                  value: item,
-                }))}
-                defaultValue={selectedLanguage}
-                inputProps={{
-                  onChange: (e) => {
-                    setSelectedLanguage(e.target.value)
-                  },
-                }}
-              />
-            </div>
-          )}
-          <Dropzone
-            id="listing-paper-application-upload"
-            label={t("t.uploadFile")}
-            helptext={t("listings.pdfHelperText")}
-            uploader={pdfUploader}
-            accept="application/pdf"
-            progress={progressValue}
-          />
-          {cloudinaryData.url !== "" && (
-            <MinimalTable
-              headers={paperApplicationsTableHeaders}
-              data={previewPaperApplicationsTableRows}
-            ></MinimalTable>
-          )}
-        </section>
+        <Card spacing="lg" className="spacer-section">
+          <Card.Section>
+            {cloudinaryData.url === "" && (
+              <div className="field">
+                <p className="mb-2">
+                  <label className="label">{t("t.language")}</label>
+                </p>
+                <Select
+                  name="paperApplicationLanguage"
+                  options={Object.values(Language).map((item) => ({
+                    label: t(`languages.${item}`),
+                    value: item,
+                  }))}
+                  defaultValue={selectedLanguage}
+                  inputProps={{
+                    onChange: (e) => {
+                      setSelectedLanguage(e.target.value)
+                    },
+                  }}
+                />
+              </div>
+            )}
+            <Dropzone
+              id="listing-paper-application-upload"
+              label={t("t.uploadFile")}
+              helptext={t("listings.pdfHelperText")}
+              uploader={pdfUploader}
+              accept="application/pdf"
+              progress={progressValue}
+            />
+            {cloudinaryData.url !== "" && (
+              <MinimalTable
+                headers={paperApplicationsTableHeaders}
+                data={previewPaperApplicationsTableRows}
+              ></MinimalTable>
+            )}
+          </Card.Section>
+        </Card>
       </Drawer>
     </>
   )
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingDetails.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingDetails.tsx
index bf307a491c..106c4d8e53 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingDetails.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingDetails.tsx
@@ -2,21 +2,20 @@ import React, { useEffect, useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import {
   t,
-  GridSection,
-  GridCell,
   Field,
   Select,
   FieldGroup,
   ListingMap,
   LatitudeLongitude,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { stateKeys } from "@bloom-housing/shared-helpers"
 import { FormListing } from "../../../../lib/listings/formTypes"
 import GeocodeService, {
   GeocodeService as GeocodeServiceType,
 } from "@mapbox/mapbox-sdk/services/geocoding"
 import { fieldHasError, fieldMessage } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 interface MapBoxFeature {
   center: number[] // Index 0: longitude, Index 1: latitude
@@ -146,172 +145,173 @@ const BuildingDetails = ({
   }
 
   return (
-    <GridSection
-      grid={false}
-      columns={3}
-      separator
-      title={t("listings.sections.buildingDetailsTitle")}
-      description={t("listings.sections.buildingDetailsSubtitle")}
-    >
-      <GridSection columns={3} subtitle={t("listings.sections.buildingAddress")}>
-        <GridCell span={2}>
-          <Field
-            label={t("application.contact.streetAddress")}
-            name={"buildingAddress.street"}
-            id={"buildingAddress.street"}
-            error={
-              !!getAddressErrorMessage(
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.buildingDetailsTitle")}
+        subheading={t("listings.sections.buildingDetailsSubtitle")}
+      >
+        <SectionWithGrid.HeadingRow>
+          {t("listings.sections.buildingAddress")}
+        </SectionWithGrid.HeadingRow>
+        <Grid.Row columns={3}>
+          <Grid.Cell className="seeds-grid-span-2">
+            <Field
+              label={t("application.contact.streetAddress")}
+              name={"buildingAddress.street"}
+              id={"buildingAddress.street"}
+              error={
+                !!getAddressErrorMessage(
+                  "buildingAddress.street",
+                  fieldMessage(errors?.buildingAddress?.street)
+                )
+              }
+              errorMessage={getAddressErrorMessage(
                 "buildingAddress.street",
                 fieldMessage(errors?.buildingAddress?.street)
-              )
-            }
-            errorMessage={getAddressErrorMessage(
-              "buildingAddress.street",
-              fieldMessage(errors?.buildingAddress?.street)
-            )}
-            placeholder={t("application.contact.streetAddress")}
-            inputProps={{
-              onChange: () =>
-                fieldHasError(errors?.buildingAddress?.street) && clearErrors("buildingAddress"),
-            }}
-            register={register}
-          />
-        </GridCell>
-        <Field
-          label={t("t.neighborhood")}
-          name={"neighborhood"}
-          id={"neighborhood"}
-          placeholder={t("t.neighborhood")}
-          register={register}
-        />
-      </GridSection>
-      <GridSection columns={6}>
-        <GridCell span={2}>
+              )}
+              placeholder={t("application.contact.streetAddress")}
+              inputProps={{
+                onChange: () =>
+                  fieldHasError(errors?.buildingAddress?.street) && clearErrors("buildingAddress"),
+              }}
+              register={register}
+            />
+          </Grid.Cell>
           <Field
-            label={t("application.contact.city")}
-            name={"buildingAddress.city"}
-            id={"buildingAddress.city"}
-            error={
-              !!getAddressErrorMessage(
-                "buildingAddress.city",
-                fieldMessage(errors?.buildingAddress?.city)
-              )
-            }
-            errorMessage={getAddressErrorMessage(
-              "buildingAddress.city",
-              fieldMessage(errors?.buildingAddress?.city)
-            )}
-            placeholder={t("application.contact.city")}
-            inputProps={{
-              onChange: () =>
-                fieldHasError(errors?.buildingAddress?.city) && clearErrors("buildingAddress"),
-            }}
+            label={t("t.neighborhood")}
+            name={"neighborhood"}
+            id={"neighborhood"}
+            placeholder={t("t.neighborhood")}
             register={register}
           />
-          <p className="field-sub-note">{t("listings.requiredToPublish")}</p>
-        </GridCell>
-        <GridCell>
-          <FieldValue
-            label={t("application.contact.state")}
-            className={`mb-0 ${
-              getAddressErrorMessage(
-                "buildingAddress.state",
-                fieldMessage(errors?.buildingAddress?.state)
-              )
-                ? "field-value-error"
-                : ""
-            }`}
-          >
-            <Select
-              id={`buildingAddress.state`}
-              name={`buildingAddress.state`}
+        </Grid.Row>
+        <Grid.Row columns={6}>
+          <Grid.Cell className="seeds-grid-span-2">
+            <Field
+              label={t("application.contact.city")}
+              name={"buildingAddress.city"}
+              id={"buildingAddress.city"}
               error={
                 !!getAddressErrorMessage(
-                  "buildingAddress.state",
-                  fieldMessage(errors?.buildingAddress?.state)
+                  "buildingAddress.city",
+                  fieldMessage(errors?.buildingAddress?.city)
                 )
               }
               errorMessage={getAddressErrorMessage(
-                "buildingAddress.state",
-                fieldMessage(errors?.buildingAddress?.state)
+                "buildingAddress.city",
+                fieldMessage(errors?.buildingAddress?.city)
               )}
-              label={t("application.contact.state")}
-              labelClassName="sr-only"
-              register={register}
-              controlClassName="control"
-              options={stateKeys}
-              keyPrefix="states"
+              placeholder={t("application.contact.city")}
               inputProps={{
                 onChange: () =>
-                  fieldHasError(errors?.buildingAddress?.state) && clearErrors("buildingAddress"),
+                  fieldHasError(errors?.buildingAddress?.city) && clearErrors("buildingAddress"),
               }}
+              register={register}
             />
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <Field
-            label={t("application.contact.zip")}
-            name={"buildingAddress.zipCode"}
-            id={"buildingAddress.zipCode"}
-            placeholder={t("application.contact.zip")}
-            error={
-              !!getAddressErrorMessage(
-                "buildingAddress.zipCode",
-                fieldMessage(errors?.buildingAddress?.zipCode)
-              )
-            }
-            errorMessage={getAddressErrorMessage(
-              "buildingAddress.zipCode",
-              fieldMessage(errors?.buildingAddress?.zipCode)
-            )}
-            inputProps={{
-              onChange: () =>
-                fieldHasError(errors?.buildingAddress?.zipCode) && clearErrors("buildingAddress"),
-            }}
-            register={register}
-          />
-        </GridCell>
-        <GridCell span={2}>
-          <Field
-            label={t("listings.yearBuilt")}
-            name={"yearBuilt"}
-            id={"yearBuilt"}
-            placeholder={t("listings.yearBuilt")}
-            type={"number"}
-            register={register}
-          />
-        </GridCell>
-      </GridSection>
-      <GridSection columns={3}>
-        <GridCell span={2}>
-          <FieldValue label={t("listings.mapPreview")}>
-            {displayMapPreview() ? (
-              <ListingMap
-                listingName={listing?.name}
-                address={{
-                  city: buildingAddress.city,
-                  state: buildingAddress.state,
-                  street: buildingAddress.street,
-                  zipCode: buildingAddress.zipCode,
-                  latitude: latLong.latitude,
-                  longitude: latLong.longitude,
+            <p className="field-sub-note">{t("listings.requiredToPublish")}</p>
+          </Grid.Cell>
+          <Grid.Cell>
+            <FieldValue
+              label={t("application.contact.state")}
+              className={`mb-0 ${
+                getAddressErrorMessage(
+                  "buildingAddress.state",
+                  fieldMessage(errors?.buildingAddress?.state)
+                )
+                  ? "field-value-error"
+                  : ""
+              }`}
+            >
+              <Select
+                id={`buildingAddress.state`}
+                name={`buildingAddress.state`}
+                error={
+                  !!getAddressErrorMessage(
+                    "buildingAddress.state",
+                    fieldMessage(errors?.buildingAddress?.state)
+                  )
+                }
+                errorMessage={getAddressErrorMessage(
+                  "buildingAddress.state",
+                  fieldMessage(errors?.buildingAddress?.state)
+                )}
+                label={t("application.contact.state")}
+                labelClassName="sr-only"
+                register={register}
+                controlClassName="control"
+                options={stateKeys}
+                keyPrefix="states"
+                inputProps={{
+                  onChange: () =>
+                    fieldHasError(errors?.buildingAddress?.state) && clearErrors("buildingAddress"),
                 }}
-                enableCustomPinPositioning={getValues("mapPinPosition") === "custom"}
-                setCustomMapPositionChosen={setCustomMapPositionChosen}
-                setLatLong={setLatLong}
               />
-            ) : (
-              <div
-                className={"w-full bg-gray-400 p-3 flex items-center justify-center"}
-                style={{ height: "400px" }}
-              >
-                {t("listings.mapPreviewNoAddress")}
-              </div>
-            )}
-          </FieldValue>
-        </GridCell>
-        <GridCell>
-          <GridCell>
+            </FieldValue>
+          </Grid.Cell>
+          <Grid.Cell>
+            <Field
+              label={t("application.contact.zip")}
+              name={"buildingAddress.zipCode"}
+              id={"buildingAddress.zipCode"}
+              placeholder={t("application.contact.zip")}
+              error={
+                !!getAddressErrorMessage(
+                  "buildingAddress.zipCode",
+                  fieldMessage(errors?.buildingAddress?.zipCode)
+                )
+              }
+              errorMessage={getAddressErrorMessage(
+                "buildingAddress.zipCode",
+                fieldMessage(errors?.buildingAddress?.zipCode)
+              )}
+              inputProps={{
+                onChange: () =>
+                  fieldHasError(errors?.buildingAddress?.zipCode) && clearErrors("buildingAddress"),
+              }}
+              register={register}
+            />
+          </Grid.Cell>
+          <Grid.Cell className="seeds-grid-span-2">
+            <Field
+              label={t("listings.yearBuilt")}
+              name={"yearBuilt"}
+              id={"yearBuilt"}
+              placeholder={t("listings.yearBuilt")}
+              type={"number"}
+              register={register}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={3}>
+          <Grid.Cell className="seeds-grid-span-2">
+            <FieldValue label={t("listings.mapPreview")}>
+              {displayMapPreview() ? (
+                <ListingMap
+                  listingName={listing?.name}
+                  address={{
+                    city: buildingAddress.city,
+                    state: buildingAddress.state,
+                    street: buildingAddress.street,
+                    zipCode: buildingAddress.zipCode,
+                    latitude: latLong.latitude,
+                    longitude: latLong.longitude,
+                  }}
+                  enableCustomPinPositioning={getValues("mapPinPosition") === "custom"}
+                  setCustomMapPositionChosen={setCustomMapPositionChosen}
+                  setLatLong={setLatLong}
+                />
+              ) : (
+                <div
+                  className={"w-full bg-gray-400 p-3 flex items-center justify-center"}
+                  style={{ height: "400px" }}
+                >
+                  {t("listings.mapPreviewNoAddress")}
+                </div>
+              )}
+            </FieldValue>
+          </Grid.Cell>
+          <Grid.Cell>
             <p className="field-label m-4 ml-0">{t("listings.mapPinPosition")}</p>
             <FieldGroup
               name="mapPinPosition"
@@ -336,10 +336,10 @@ const BuildingDetails = ({
                 },
               ]}
             />
-          </GridCell>
-        </GridCell>
-      </GridSection>
-    </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingFeatures.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingFeatures.tsx
index eaca11888d..2d46492555 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingFeatures.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingFeatures.tsx
@@ -1,9 +1,10 @@
 import React, { useMemo, useContext } from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, Textarea, FieldGroup, GridCell } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Textarea, FieldGroup } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { listingFeatures, AuthContext } from "@bloom-housing/shared-helpers"
 import { ListingFeatures } from "@bloom-housing/backend-core/types"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type BuildingFeaturesProps = {
   existingFeatures: ListingFeatures
@@ -30,75 +31,80 @@ const BuildingFeatures = (props: BuildingFeaturesProps) => {
     ?.enableAccessibilityFeatures
 
   return (
-    <div>
-      <GridSection
-        columns={2}
-        separator
-        title={t("listings.sections.buildingFeaturesTitle")}
-        description={t("listings.sections.buildingFeaturesSubtitle")}
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.buildingFeaturesTitle")}
+        subheading={t("listings.sections.buildingFeaturesSubtitle")}
       >
-        <GridCell>
-          <Textarea
-            label={t("t.propertyAmenities")}
-            name={"amenities"}
-            id={"amenities"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("t.additionalAccessibility")}
-            name={"accessibility"}
-            id={"accessibility"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("t.unitAmenities")}
-            name={"unitAmenities"}
-            id={"unitAmenities"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("t.smokingPolicy")}
-            name={"smokingPolicy"}
-            id={"smokingPolicy"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("t.petsPolicy")}
-            name={"petPolicy"}
-            id={"petPolicy"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
-        <GridCell>
-          <Textarea
-            label={t("t.servicesOffered")}
-            name={"servicesOffered"}
-            id={"servicesOffered"}
-            fullWidth={true}
-            register={register}
-            maxLength={600}
-          />
-        </GridCell>
+        <Grid.Row>
+          <Grid.Cell>
+            <Textarea
+              label={t("t.propertyAmenities")}
+              name={"amenities"}
+              id={"amenities"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Textarea
+              label={t("t.additionalAccessibility")}
+              name={"accessibility"}
+              id={"accessibility"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Cell>
+            <Textarea
+              label={t("t.unitAmenities")}
+              name={"unitAmenities"}
+              id={"unitAmenities"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Textarea
+              label={t("t.smokingPolicy")}
+              name={"smokingPolicy"}
+              id={"smokingPolicy"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Cell>
+            <Textarea
+              label={t("t.petsPolicy")}
+              name={"petPolicy"}
+              id={"petPolicy"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Textarea
+              label={t("t.servicesOffered")}
+              name={"servicesOffered"}
+              id={"servicesOffered"}
+              fullWidth={true}
+              register={register}
+              maxLength={600}
+            />
+          </Grid.Cell>
+        </Grid.Row>
         {!enableAccessibilityFeatures ? null : (
-          <GridCell span={2}>
+          <Grid.Row>
             <FieldValue label={t("listings.sections.accessibilityFeatures")}>
               <FieldGroup
                 type="checkbox"
@@ -108,10 +114,10 @@ const BuildingFeatures = (props: BuildingFeaturesProps) => {
                 fieldGroupClassName="grid grid-cols-3 mt-4"
               />
             </FieldValue>
-          </GridCell>
+          </Grid.Row>
         )}
-      </GridSection>
-    </div>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx
index 604cc8f6c0..3cb6c23e89 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/BuildingSelectionCriteria.tsx
@@ -7,14 +7,13 @@ import {
   Drawer,
   Dropzone,
   Field,
-  GridCell,
-  GridSection,
   MinimalTable,
   TableThumbnail,
   FieldGroup,
   StandardTableData,
   AppearanceSizeType,
 } from "@bloom-housing/ui-components"
+import { Card, FieldValue, Grid, Heading } from "@bloom-housing/ui-seeds"
 import { cloudinaryUrlFromId } from "@bloom-housing/shared-helpers"
 import { cloudinaryFileUploader } from "../../../../lib/helpers"
 
@@ -200,31 +199,32 @@ const BuildingSelectionCriteria = () => {
       <input type="hidden" {...register("buildingSelectionCriteriaFile.fileId")} />
       <input type="hidden" {...register("buildingSelectionCriteriaFile.label")} />
 
-      <div className="field mt-8 mb-2">
-        {((listingCriteriaURL && listingCriteriaURL != "") ||
-          (listingCriteriaFile?.fileId && listingCriteriaFile.fileId != "")) && (
-          <label className="label">{t("listings.buildingSelectionCriteria")}</label>
-        )}
-      </div>
-
-      <GridSection columns={1} tinted inset>
-        <GridCell>
-          {(listingCriteriaURL && listingCriteriaURL != "") ||
-          (listingCriteriaFile?.fileId && listingCriteriaFile.fileId != "") ? (
-            <MinimalTable headers={criteriaTableHeaders} data={criteriaTableRows}></MinimalTable>
-          ) : (
-            <Button
-              id="addBuildingSelectionCriteriaButton"
-              type="button"
-              onClick={() => {
-                setDrawerState(true)
-              }}
-            >
-              {t("listings.addBuildingSelectionCriteria")}
-            </Button>
-          )}
-        </GridCell>
-      </GridSection>
+      {((listingCriteriaURL && listingCriteriaURL != "") ||
+        (listingCriteriaFile?.fileId && listingCriteriaFile.fileId != "")) && (
+        <Heading size="lg" priority={3} className="spacer-header">
+          {t("listings.buildingSelectionCriteria")}
+        </Heading>
+      )}
+      <Grid spacing="lg" className="grid-inset-section">
+        <Grid.Row>
+          <Grid.Cell>
+            {(listingCriteriaURL && listingCriteriaURL != "") ||
+            (listingCriteriaFile?.fileId && listingCriteriaFile.fileId != "") ? (
+              <MinimalTable headers={criteriaTableHeaders} data={criteriaTableRows}></MinimalTable>
+            ) : (
+              <Button
+                id="addBuildingSelectionCriteriaButton"
+                type="button"
+                onClick={() => {
+                  setDrawerState(true)
+                }}
+              >
+                {t("listings.addBuildingSelectionCriteria")}
+              </Button>
+            )}
+          </Grid.Cell>
+        </Grid.Row>
+      </Grid>
 
       <Drawer
         open={drawerState}
@@ -266,67 +266,69 @@ const BuildingSelectionCriteria = () => {
           </Button>,
         ]}
       >
-        <section className="border rounded-md p-8 bg-white">
-          <div className={!criteriaAttachType ? "" : "hidden"}>
-            <span className="grid-section__description">
-              {t("listings.addBuildingSelectionCriteriaSubtitle")}
-            </span>
-            <FieldGroup
-              name="criteriaAttachType"
-              type="radio"
-              register={register}
-              fields={[
-                {
-                  label: "Upload PDF",
-                  value: "upload",
-                  id: "criteriaAttachTypeUpload",
-                  defaultChecked: false,
-                },
-                {
-                  label: "Webpage URL",
-                  value: "url",
-                  id: "criteriaAttachTypeURL",
-                  defaultChecked: false,
-                },
-              ]}
-            />
-          </div>
+        <Card spacing="lg" className="spacer-section">
+          <Card.Section>
+            <FieldValue
+              label={t("listings.addBuildingSelectionCriteriaSubtitle")}
+              className={!criteriaAttachType ? "" : "hidden"}
+            >
+              <FieldGroup
+                name="criteriaAttachType"
+                type="radio"
+                register={register}
+                fields={[
+                  {
+                    label: "Upload PDF",
+                    value: "upload",
+                    id: "criteriaAttachTypeUpload",
+                    defaultChecked: false,
+                  },
+                  {
+                    label: "Webpage URL",
+                    value: "url",
+                    id: "criteriaAttachTypeURL",
+                    defaultChecked: false,
+                  },
+                ]}
+              />
+            </FieldValue>
 
-          {criteriaAttachType === "upload" && (
-            <>
-              <Dropzone
-                id="listing-building-selection-criteria-upload"
-                label={t("t.uploadFile")}
-                helptext={t("listings.pdfHelperText")}
-                uploader={pdfUploader}
-                accept="application/pdf"
-                progress={progressValue}
+            {criteriaAttachType === "upload" && (
+              <>
+                <Dropzone
+                  id="listing-building-selection-criteria-upload"
+                  label={t("t.uploadFile")}
+                  helptext={t("listings.pdfHelperText")}
+                  uploader={pdfUploader}
+                  accept="application/pdf"
+                  progress={progressValue}
+                />
+                {cloudinaryData.url !== "" && (
+                  <MinimalTable
+                    headers={previewCriteriaTableHeaders}
+                    data={previewTableRows}
+                  ></MinimalTable>
+                )}
+              </>
+            )}
+            {criteriaAttachType === "url" && (
+              <Field
+                type="url"
+                placeholder="https://"
+                label="Informational Webpage URL"
+                name="buildingSelectionCriteriaURL"
+                id="buildingSelectionCriteriaURL"
+                register={register}
+                error={errors?.buildingSelectionCriteriaURL}
+                errorMessage={
+                  errors?.buildingSelectionCriteriaURL?.type === "https"
+                    ? t("errors.urlHttpsError")
+                    : t("errors.urlError")
+                }
               />
-              {cloudinaryData.url !== "" && (
-                <MinimalTable
-                  headers={previewCriteriaTableHeaders}
-                  data={previewTableRows}
-                ></MinimalTable>
-              )}
-            </>
-          )}
-          {criteriaAttachType === "url" && (
-            <Field
-              type="url"
-              placeholder="https://"
-              label="Informational Webpage URL"
-              name="buildingSelectionCriteriaURL"
-              id="buildingSelectionCriteriaURL"
-              register={register}
-              error={errors?.buildingSelectionCriteriaURL}
-              errorMessage={
-                errors?.buildingSelectionCriteriaURL?.type === "https"
-                  ? t("errors.urlHttpsError")
-                  : t("errors.urlError")
-              }
-            />
-          )}
-        </section>
+            )}
+          </Card.Section>
+        </Card>
       </Drawer>
     </>
   )
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/CommunityType.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/CommunityType.tsx
index 98776de50d..f3f787e249 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/CommunityType.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/CommunityType.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, GridCell, Select, Textarea } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Select, Textarea } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { useReservedCommunityTypeList } from "../../../../lib/hooks"
 import { arrayToFormOptions } from "../../../../lib/helpers"
 import { ReservedCommunityType } from "@bloom-housing/backend-core/types"
 import { FormListing } from "../../../../lib/listings/formTypes"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type CommunityTypeProps = {
   listing?: FormListing
@@ -44,45 +45,45 @@ const CommunityType = ({ listing }: CommunityTypeProps) => {
   }, [reservedCommunityType, listing?.reservedCommunityType?.id])
 
   return (
-    <GridSection
-      grid={false}
-      columns={3}
-      separator
-      title={t("listings.sections.communityType")}
-      description={t("listings.sections.communityTypeSubtitle")}
-    >
-      <GridSection columns={2}>
-        <FieldValue label={t("listings.reservedCommunityType")}>
-          {options && (
-            <Select
-              id={`reservedCommunityType.id`}
-              name={`reservedCommunityType.id`}
-              label={t("listings.reservedCommunityType")}
-              labelClassName="sr-only"
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.communityType")}
+        subheading={t("listings.sections.communityTypeSubtitle")}
+      >
+        <Grid.Row columns={2}>
+          <FieldValue label={t("listings.reservedCommunityType")}>
+            {options && (
+              <Select
+                id={`reservedCommunityType.id`}
+                name={`reservedCommunityType.id`}
+                label={t("listings.reservedCommunityType")}
+                labelClassName="sr-only"
+                register={register}
+                controlClassName="control"
+                options={options}
+                inputProps={{
+                  onChange: () => {
+                    setCurrentCommunityType(reservedCommunityType)
+                  },
+                }}
+              />
+            )}
+          </FieldValue>
+        </Grid.Row>
+        <Grid.Row columns={3}>
+          <Grid.Cell className="seeds-grid-span-2">
+            <Textarea
+              label={t("listings.reservedCommunityDescription")}
+              name={"reservedCommunityDescription"}
+              id={"reservedCommunityDescription"}
+              fullWidth={true}
               register={register}
-              controlClassName="control"
-              options={options}
-              inputProps={{
-                onChange: () => {
-                  setCurrentCommunityType(reservedCommunityType)
-                },
-              }}
             />
-          )}
-        </FieldValue>
-      </GridSection>
-      <GridSection columns={3}>
-        <GridCell span={2}>
-          <Textarea
-            label={t("listings.reservedCommunityDescription")}
-            name={"reservedCommunityDescription"}
-            id={"reservedCommunityDescription"}
-            fullWidth={true}
-            register={register}
-          />
-        </GridCell>
-      </GridSection>
-    </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/LeasingAgent.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/LeasingAgent.tsx
index bc9a40ddef..f353b5b56d 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/LeasingAgent.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/LeasingAgent.tsx
@@ -1,17 +1,10 @@
 import React, { useEffect, useState } from "react"
 import { useFormContext } from "react-hook-form"
-import {
-  t,
-  GridSection,
-  Textarea,
-  Field,
-  PhoneField,
-  GridCell,
-  Select,
-} from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Textarea, Field, PhoneField, Select } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { stateKeys } from "@bloom-housing/shared-helpers"
 import { fieldMessage, fieldHasError } from "../../../../lib/helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 const LeasingAgent = () => {
   const formMethods = useFormContext()
@@ -37,71 +30,81 @@ const LeasingAgent = () => {
   }, [leasingAgentPhoneField, clearErrors, phoneField])
 
   return (
-    <div>
-      <GridSection
-        grid={false}
-        separator
-        title={t("listings.sections.leasingAgentTitle")}
-        description={t("listings.sections.leasingAgentSubtitle")}
+    <>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid
+        heading={t("listings.sections.leasingAgentTitle")}
+        subheading={t("listings.sections.leasingAgentSubtitle")}
       >
-        <GridSection columns={3}>
-          <Field
-            label={t("leasingAgent.name")}
-            name={"leasingAgentName"}
-            id={"leasingAgentName"}
-            subNote={t("listings.requiredToPublish")}
-            error={fieldHasError(errors?.leasingAgentName)}
-            errorMessage={fieldMessage(errors?.leasingAgentName)}
-            placeholder={t("leasingAgent.namePlaceholder")}
-            register={register}
-            inputProps={{
-              onChange: () => clearErrors("leasingAgentName"),
-            }}
-          />
-          <Field
-            label={t("t.email")}
-            name={"leasingAgentEmail"}
-            id={"leasingAgentEmail"}
-            subNote={t("listings.requiredToPublish")}
-            error={fieldHasError(errors?.leasingAgentEmail)}
-            errorMessage={fieldMessage(errors?.leasingAgentEmail)}
-            placeholder={t("t.emailAddressPlaceholder")}
-            register={register}
-            inputProps={{
-              onChange: () => clearErrors("leasingAgentEmail"),
-            }}
-          />
-          <PhoneField
-            label={t("t.phone")}
-            name={"leasingAgentPhone"}
-            id={"leasingAgentPhone"}
-            subNote={t("listings.requiredToPublish")}
-            error={fieldHasError(errors?.leasingAgentPhone)}
-            errorMessage={fieldMessage(errors?.leasingAgentPhone)}
-            placeholder={t("t.phoneNumberPlaceholder")}
-            control={control}
-            controlClassName={"control"}
-          />
-        </GridSection>
-        <GridSection columns={2}>
-          <Field
-            label={t("leasingAgent.title")}
-            name={"leasingAgentTitle"}
-            id={"leasingAgentTitle"}
-            placeholder={t("leasingAgent.title")}
-            register={register}
-          />
-          <Textarea
-            label={t("leasingAgent.officeHours")}
-            name={"leasingAgentOfficeHours"}
-            id={"leasingAgentOfficeHours"}
-            fullWidth={true}
-            placeholder={t("leasingAgent.officeHoursPlaceholder")}
-            register={register}
-          />
-        </GridSection>
-        <GridSection columns={3} subtitle={"Leasing Agent Address"}>
-          <GridCell span={2}>
+        <Grid.Row columns={3}>
+          <Grid.Cell>
+            <Field
+              label={t("leasingAgent.name")}
+              name={"leasingAgentName"}
+              id={"leasingAgentName"}
+              subNote={t("listings.requiredToPublish")}
+              error={fieldHasError(errors?.leasingAgentName)}
+              errorMessage={fieldMessage(errors?.leasingAgentName)}
+              placeholder={t("leasingAgent.namePlaceholder")}
+              register={register}
+              inputProps={{
+                onChange: () => clearErrors("leasingAgentName"),
+              }}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <Field
+              label={t("t.email")}
+              name={"leasingAgentEmail"}
+              id={"leasingAgentEmail"}
+              subNote={t("listings.requiredToPublish")}
+              error={fieldHasError(errors?.leasingAgentEmail)}
+              errorMessage={fieldMessage(errors?.leasingAgentEmail)}
+              placeholder={t("t.emailAddressPlaceholder")}
+              register={register}
+              inputProps={{
+                onChange: () => clearErrors("leasingAgentEmail"),
+              }}
+            />
+          </Grid.Cell>
+          <Grid.Cell>
+            <PhoneField
+              label={t("t.phone")}
+              name={"leasingAgentPhone"}
+              id={"leasingAgentPhone"}
+              subNote={t("listings.requiredToPublish")}
+              error={fieldHasError(errors?.leasingAgentPhone)}
+              errorMessage={fieldMessage(errors?.leasingAgentPhone)}
+              placeholder={t("t.phoneNumberPlaceholder")}
+              control={control}
+              controlClassName={"control"}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={3}>
+          <Grid.Cell>
+            <Field
+              label={t("leasingAgent.title")}
+              name={"leasingAgentTitle"}
+              id={"leasingAgentTitle"}
+              placeholder={t("leasingAgent.title")}
+              register={register}
+            />
+          </Grid.Cell>
+          <Grid.Cell className="seeds-grid-span-2">
+            <Textarea
+              label={t("leasingAgent.officeHours")}
+              name={"leasingAgentOfficeHours"}
+              id={"leasingAgentOfficeHours"}
+              fullWidth={true}
+              placeholder={t("leasingAgent.officeHoursPlaceholder")}
+              register={register}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <SectionWithGrid.HeadingRow>Leasing Agent Address</SectionWithGrid.HeadingRow>
+        <Grid.Row columns={3}>
+          <Grid.Cell className="seeds-grid-span-2">
             <Field
               label={t("listings.streetAddressOrPOBox")}
               name={"leasingAgentAddress.street"}
@@ -114,17 +117,19 @@ const LeasingAgent = () => {
                 onChange: () => clearErrors("leasingAgentAddress"),
               }}
             />
-          </GridCell>
-          <Field
-            label={t("application.contact.apt")}
-            name={"leasingAgentAddress.street2"}
-            id={"leasingAgentAddress.street2"}
-            register={register}
-            placeholder={t("application.contact.apt")}
-          />
-        </GridSection>
-        <GridSection columns={7}>
-          <GridCell span={3}>
+          </Grid.Cell>
+          <Grid.Cell>
+            <Field
+              label={t("application.contact.apt")}
+              name={"leasingAgentAddress.street2"}
+              id={"leasingAgentAddress.street2"}
+              register={register}
+              placeholder={t("application.contact.apt")}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={7}>
+          <Grid.Cell className="seeds-grid-span-3">
             <Field
               label={t("application.contact.city")}
               name={"leasingAgentAddress.city"}
@@ -137,27 +142,27 @@ const LeasingAgent = () => {
                 onChange: () => clearErrors("leasingAgentAddress"),
               }}
             />
-          </GridCell>
-          <GridCell span={2}>
-            <FieldValue label={t("application.contact.state")} className="mb-0">
-              <Select
-                id={`leasingAgentAddress.state`}
-                name={`leasingAgentAddress.state`}
-                label={t("application.contact.state")}
-                labelClassName="sr-only"
-                register={register}
-                controlClassName="control"
-                options={stateKeys}
-                keyPrefix="states"
-                errorMessage={getErrorMessage("leasingAgentAddress.state")}
-                error={!!getErrorMessage("leasingAgentAddress.state")}
-                inputProps={{
-                  onChange: () => clearErrors("leasingAgentAddress"),
-                }}
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell span={2}>
+          </Grid.Cell>
+
+          <FieldValue label={t("application.contact.state")} className="seeds-grid-span-2">
+            <Select
+              id={`leasingAgentAddress.state`}
+              name={`leasingAgentAddress.state`}
+              label={t("application.contact.state")}
+              labelClassName="sr-only"
+              register={register}
+              controlClassName="control"
+              options={stateKeys}
+              keyPrefix="states"
+              errorMessage={getErrorMessage("leasingAgentAddress.state")}
+              error={!!getErrorMessage("leasingAgentAddress.state")}
+              inputProps={{
+                onChange: () => clearErrors("leasingAgentAddress"),
+              }}
+            />
+          </FieldValue>
+
+          <Grid.Cell className="seeds-grid-span-2">
             <Field
               label={t("application.contact.zip")}
               name={"leasingAgentAddress.zipCode"}
@@ -170,10 +175,10 @@ const LeasingAgent = () => {
                 onChange: () => clearErrors("leasingAgentAddress"),
               }}
             />
-          </GridCell>
-        </GridSection>
-      </GridSection>
-    </div>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx
index 9663b6e127..3904970a4a 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx
@@ -1,9 +1,10 @@
 import React from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, GridCell, Field, SelectOption, Select } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { t, Field, SelectOption, Select } from "@bloom-housing/ui-components"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { fieldMessage, fieldHasError } from "../../../../lib/helpers"
 import { Jurisdiction } from "@bloom-housing/backend-core/types"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 interface ListingIntroProps {
   jurisdictions: Jurisdiction[]
@@ -24,82 +25,87 @@ const ListingIntro = (props: ListingIntroProps) => {
   const defaultJurisdiction = props.jurisdictions.length === 1 ? props.jurisdictions[0].id : ""
 
   return (
-    <GridSection
-      columns={3}
-      title={t("listings.sections.introTitle")}
-      description={t("listings.sections.introSubtitle")}
-    >
-      <GridCell span={2} className={`${defaultJurisdiction ? "hidden" : ""}`}>
-        <FieldValue
-          label={t("t.jurisdiction")}
-          className={`mb-0 ${
-            fieldHasError(errors?.jurisdiction) || fieldHasError(errors?.["jurisdiction.id"])
-              ? "field-value-error"
-              : ""
-          }`}
-        >
-          <Select
-            id={"jurisdiction.id"}
-            defaultValue={defaultJurisdiction}
-            name={"jurisdiction.id"}
+    <>
+      <SectionWithGrid
+        heading={t("listings.sections.introTitle")}
+        subheading={t("listings.sections.introSubtitle")}
+      >
+        <Grid.Row className={`${defaultJurisdiction ? "hidden" : ""}`}>
+          <Grid.Cell>
+            <Field
+              id="name"
+              name="name"
+              label={t("listings.listingName")}
+              placeholder={t("listings.listingName")}
+              inputProps={{
+                onChange: () => {
+                  fieldHasError(errors?.name) && clearErrors("name")
+                },
+              }}
+              subNote={t("listings.requiredToPublish")}
+              register={register}
+              error={fieldHasError(errors?.name)}
+              errorMessage={fieldMessage(errors?.name)}
+              dataTestId={"nameField"}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+        <Grid.Row columns={2}>
+          <FieldValue
             label={t("t.jurisdiction")}
-            labelClassName="sr-only"
-            register={register}
-            controlClassName={`control ${defaultJurisdiction ? "hidden" : ""}`}
-            error={
+            className={`${
               fieldHasError(errors?.jurisdiction) || fieldHasError(errors?.["jurisdiction.id"])
-            }
-            subNote={t("listings.requiredToPublish")}
-            errorMessage={
-              fieldMessage(errors?.jurisdiction) ??
-              fieldMessage(errors?.["jurisdiction.id"]) ??
-              undefined
-            }
-            keyPrefix={"jurisdictions"}
-            options={jurisdictionOptions}
-            inputProps={{
-              onChange: () => {
-                console.log("jurisdiction change")
-                ;(fieldHasError(errors?.jurisdiction) ||
-                  fieldHasError(errors?.["jurisdiction.id"])) &&
-                  clearErrors("jurisdiction")
-              },
-            }}
-          />
-        </FieldValue>
-      </GridCell>
-      <GridCell span={2}>
-        <Field
-          id="name"
-          name="name"
-          label={t("listings.listingName")}
-          placeholder={t("listings.listingName")}
-          inputProps={{
-            onChange: () => {
-              fieldHasError(errors?.name) && clearErrors("name")
-            },
-          }}
-          subNote={t("listings.requiredToPublish")}
-          register={register}
-          error={fieldHasError(errors?.name)}
-          errorMessage={fieldMessage(errors?.name)}
-          dataTestId={"nameField"}
-        />
-      </GridCell>
-      <Field
-        id="developer"
-        name="developer"
-        label={t("listings.developer")}
-        placeholder={t("listings.developer")}
-        subNote={t("listings.requiredToPublish")}
-        error={fieldHasError(errors?.developer)}
-        errorMessage={fieldMessage(errors?.developer)}
-        inputProps={{
-          onChange: () => fieldHasError(errors?.developer) && clearErrors("developer"),
-        }}
-        register={register}
-      />
-    </GridSection>
+                ? "field-value-error"
+                : ""
+            }`}
+          >
+            <Select
+              id={"jurisdiction.id"}
+              defaultValue={defaultJurisdiction}
+              name={"jurisdiction.id"}
+              label={t("t.jurisdiction")}
+              labelClassName="sr-only"
+              register={register}
+              controlClassName={`control ${defaultJurisdiction ? "hidden" : ""}`}
+              error={
+                fieldHasError(errors?.jurisdiction) || fieldHasError(errors?.["jurisdiction.id"])
+              }
+              subNote={t("listings.requiredToPublish")}
+              errorMessage={
+                fieldMessage(errors?.jurisdiction) ??
+                fieldMessage(errors?.["jurisdiction.id"]) ??
+                undefined
+              }
+              keyPrefix={"jurisdictions"}
+              options={jurisdictionOptions}
+              inputProps={{
+                onChange: () => {
+                  console.log("jurisdiction change")
+                  ;(fieldHasError(errors?.jurisdiction) ||
+                    fieldHasError(errors?.["jurisdiction.id"])) &&
+                    clearErrors("jurisdiction")
+                },
+              }}
+            />
+          </FieldValue>
+          <Grid.Cell>
+            <Field
+              id="developer"
+              name="developer"
+              label={t("listings.developer")}
+              placeholder={t("listings.developer")}
+              subNote={t("listings.requiredToPublish")}
+              error={fieldHasError(errors?.developer)}
+              errorMessage={fieldMessage(errors?.developer)}
+              inputProps={{
+                onChange: () => fieldHasError(errors?.developer) && clearErrors("developer"),
+              }}
+              register={register}
+            />
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx
index 639b8633f5..166aeeda0b 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/ListingPhotos.tsx
@@ -4,8 +4,6 @@ import {
   t,
   AppearanceStyleType,
   Dropzone,
-  GridSection,
-  GridCell,
   MinimalTable,
   TableThumbnail,
   StandardTableData,
@@ -17,6 +15,8 @@ import { getUrlForListingImage, CLOUDINARY_BUILDING_LABEL } from "@bloom-housing
 
 import { cloudinaryFileUploader, fieldHasError } from "../../../../lib/helpers"
 import { ListingImage, Asset } from "@bloom-housing/backend-core"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
+import { Grid } from "@bloom-housing/ui-seeds"
 
 const ListingPhotos = () => {
   const formMethods = useFormContext()
@@ -195,6 +195,7 @@ const ListingPhotos = () => {
    */
   return (
     <>
+      <hr className="spacer-section-above spacer-section" />
       {fields.map((item, index) => (
         <span key={item.id}>
           <input
@@ -205,17 +206,13 @@ const ListingPhotos = () => {
           />
         </span>
       ))}
-      <GridSection
-        grid={false}
-        separator
-        title={t("listings.sections.photoTitle")}
-        description={t("listings.sections.photoSubtitle")}
+      <SectionWithGrid
+        heading={t("listings.sections.photoTitle")}
+        subheading={t("listings.sections.photoSubtitle")}
       >
-        <span className={"text-tiny text-gray-800 block mb-2"}>
-          {t("listings.sections.photoTitle")}
-        </span>
-        <GridSection columns={1} tinted inset>
-          <GridCell>
+        <SectionWithGrid.HeadingRow>{t("listings.sections.photoTitle")}</SectionWithGrid.HeadingRow>
+        <Grid.Row columns={1} className="grid-inset-section">
+          <Grid.Cell>
             {listingFormPhotos.length > 0 && (
               <div className="mb-5" data-testid="photos-table">
                 <MinimalTable
@@ -237,9 +234,9 @@ const ListingPhotos = () => {
             >
               {t(listingFormPhotos.length > 0 ? "listings.editPhotos" : "listings.addPhoto")}
             </Button>
-          </GridCell>
-        </GridSection>
-      </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
       {fieldHasError(errors?.images) && (
         <span className={"text-sm text-alert"}>{errors?.images?.nested?.message}</span>
       )}
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
index 0d543e1755..f5a9e6daa0 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
@@ -16,6 +16,7 @@ import {
   ListingEventCreate,
   ListingEventType,
 } from "@bloom-housing/backend-core/types"
+import { Card } from "@bloom-housing/ui-seeds"
 import { cloudinaryFileUploader } from "../../../../lib/helpers"
 import { cloudinaryUrlFromId } from "@bloom-housing/shared-helpers"
 
@@ -162,19 +163,21 @@ const LotteryResults = (props: LotteryResultsProps) => {
         </Button>,
       ]}
     >
-      <section className="border rounded-md p-8 bg-white">
-        <Dropzone
-          id="lottery-results-upload"
-          label={t("listings.sections.lotteryResultsHelperText")}
-          helptext={t("listings.pdfHelperText")}
-          uploader={pdfUploader}
-          accept="application/pdf"
-          progress={progressValue}
-        />
-        {cloudinaryData.url !== "" && (
-          <MinimalTable headers={resultsTableHeaders} data={previewTableRows}></MinimalTable>
-        )}
-      </section>
+      <Card spacing="lg" className="spacer-section">
+        <Card.Section>
+          <Dropzone
+            id="lottery-results-upload"
+            label={t("listings.sections.lotteryResultsHelperText")}
+            helptext={t("listings.pdfHelperText")}
+            uploader={pdfUploader}
+            accept="application/pdf"
+            progress={progressValue}
+          />
+          {cloudinaryData.url !== "" && (
+            <MinimalTable headers={resultsTableHeaders} data={previewTableRows}></MinimalTable>
+          )}
+        </Card.Section>
+      </Card>
     </Drawer>
   )
 }
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx
index ea91462ada..a47f678bde 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx
@@ -3,21 +3,13 @@ import dayjs from "dayjs"
 import utc from "dayjs/plugin/utc"
 dayjs.extend(utc)
 import { useFormContext, useWatch } from "react-hook-form"
-import {
-  t,
-  GridSection,
-  Field,
-  FieldGroup,
-  GridCell,
-  Textarea,
-  DateField,
-  TimeField,
-} from "@bloom-housing/ui-components"
-
+import { t, Field, FieldGroup, Textarea, DateField, TimeField } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { YesNoAnswer } from "../../../../lib/helpers"
 import { FormListing } from "../../../../lib/listings/formTypes"
 import { ListingReviewOrder } from "@bloom-housing/backend-core/types"
 import { getLotteryEvent } from "@bloom-housing/shared-helpers"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type RankingsAndResultsProps = {
   listing?: FormListing
@@ -66,15 +58,14 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
     },
   ]
   return (
-    <div>
-      <GridSection
-        grid={false}
-        title={t("listings.sections.rankingsResultsTitle")}
-        description={t("listings.sections.rankingsResultsSubtitle")}
+    <>
+      <SectionWithGrid
+        heading={t("listings.sections.rankingsResultsTitle")}
+        subheading={t("listings.sections.rankingsResultsSubtitle")}
       >
         {availabilityQuestion !== "openWaitlist" && (
-          <GridSection columns={2} className={"flex items-center"}>
-            <GridCell>
+          <Grid.Row columns={2} className={"flex items-center"}>
+            <Grid.Cell>
               <p className="field-label m-4 ml-0">{t("listings.reviewOrderQuestion")}</p>
               <FieldGroup
                 name="reviewOrderQuestion"
@@ -96,12 +87,12 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
                   },
                 ]}
               />
-            </GridCell>
-          </GridSection>
+            </Grid.Cell>
+          </Grid.Row>
         )}
         {reviewOrder === "reviewOrderFCFS" && (
-          <GridSection columns={2} className={"flex items-center"}>
-            <GridCell>
+          <Grid.Row columns={2} className={"flex items-center"}>
+            <Grid.Cell>
               <p className="field-label m-4 ml-0">{t("listings.dueDateQuestion")}</p>
               <FieldGroup
                 name="dueDateQuestion"
@@ -120,13 +111,13 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
                   },
                 ]}
               />
-            </GridCell>
-          </GridSection>
+            </Grid.Cell>
+          </Grid.Row>
         )}
         {reviewOrder === "reviewOrderLottery" && (
           <>
-            <GridSection columns={3}>
-              <GridCell>
+            <Grid.Row columns={3}>
+              <Grid.Cell>
                 <DateField
                   label={t("listings.lotteryDateQuestion")}
                   name={"lotteryDate"}
@@ -145,8 +136,8 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
                       : null,
                   }}
                 />
-              </GridCell>
-              <GridCell>
+              </Grid.Cell>
+              <Grid.Cell>
                 <TimeField
                   label={t("listings.lotteryStartTime")}
                   name={"lotteryStartTime"}
@@ -166,8 +157,8 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
                     period: new Date(lotteryEvent?.startTime).getHours() >= 12 ? "pm" : "am",
                   }}
                 />
-              </GridCell>
-              <GridCell>
+              </Grid.Cell>
+              <Grid.Cell>
                 <TimeField
                   label={t("listings.lotteryEndTime")}
                   name={"lotteryEndTime"}
@@ -187,10 +178,10 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
                     period: new Date(lotteryEvent?.endTime).getHours() >= 12 ? "pm" : "am",
                   }}
                 />
-              </GridCell>
-            </GridSection>
-            <GridSection columns={3}>
-              <GridCell span={2}>
+              </Grid.Cell>
+            </Grid.Row>
+            <Grid.Row columns={3}>
+              <Grid.Cell className="seeds-grid-span-2">
                 <Textarea
                   label={t("listings.lotteryDateNotes")}
                   name={"lotteryDateNotes"}
@@ -201,12 +192,12 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
                   register={register}
                   defaultValue={lotteryEvent ? lotteryEvent.note : null}
                 />
-              </GridCell>
-            </GridSection>
+              </Grid.Cell>
+            </Grid.Row>
           </>
         )}
-        <GridSection columns={2} className={"flex items-center"}>
-          <GridCell>
+        <Grid.Row columns={2} className={"flex items-center"}>
+          <Grid.Cell>
             <p className={`field-label m-4 ml-0`}>{t("listings.waitlist.openQuestion")}</p>
             <FieldGroup
               name="waitlistOpenQuestion"
@@ -228,10 +219,10 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
                 },
               ]}
             />
-          </GridCell>
-        </GridSection>
+          </Grid.Cell>
+        </Grid.Row>
         {waitlistOpen === YesNoAnswer.Yes && availabilityQuestion === "openWaitlist" && (
-          <GridSection columns={3}>
+          <Grid.Row columns={3}>
             <Field
               name="waitlistOpenSpots"
               id="waitlistOpenSpots"
@@ -240,10 +231,10 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
               placeholder={t("listings.waitlist.openSize")}
               type={"number"}
             />
-          </GridSection>
+          </Grid.Row>
         )}
-        <GridSection columns={3}>
-          <GridCell span={2}>
+        <Grid.Row columns={3}>
+          <Grid.Cell className="seeds-grid-span-2">
             <Textarea
               label={t("listings.whatToExpectLabel")}
               name={"whatToExpect"}
@@ -251,10 +242,10 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
               fullWidth={true}
               register={register}
             />
-          </GridCell>
-        </GridSection>
-      </GridSection>
-    </div>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
+    </>
   )
 }
 
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
index 2394801d25..f9d22241fd 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react"
 import {
   t,
-  GridSection,
   MinimalTable,
   Button,
   AppearanceSizeType,
@@ -10,9 +9,11 @@ import {
   Field,
   StandardTableData,
 } from "@bloom-housing/ui-components"
+import { Card, Grid } from "@bloom-housing/ui-seeds"
 import { useFormContext } from "react-hook-form"
 import { ApplicationSection, MultiselectQuestion } from "@bloom-housing/backend-core/types"
 import LinkComponent from "../../../../components/core/LinkComponent"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type SelectAndOrderSection = MultiselectQuestion
 
@@ -200,7 +201,7 @@ const SelectAndOrder = ({
       )
     }
     return (
-      <div className="ml-8 -mt-4 md:-mt-12 mb-4 text-sm">
+      <div className="ml-8 -mt-6 mb-4 text-sm">
         <div>
           <button
             onClick={() => {
@@ -229,25 +230,28 @@ const SelectAndOrder = ({
 
   return (
     <>
-      <GridSection title={title} description={subtitle} grid={false} separator>
-        <div className="bg-gray-300 px-4 py-5">
-          {!!listingData.length && (
-            <div className="mb-5">
-              <MinimalTable headers={formTableHeaders} data={formTableData} />
-            </div>
-          )}
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={title} subheading={subtitle} inset>
+        <Grid.Row>
+          <Grid.Cell>
+            {!!listingData.length && (
+              <div className="mb-5">
+                <MinimalTable headers={formTableHeaders} data={formTableData} />
+              </div>
+            )}
 
-          <Button
-            id={`add-${applicationSection}-button`}
-            type="button"
-            size={AppearanceSizeType.normal}
-            onClick={() => setTableDrawer(true)}
-          >
-            {listingData.length ? editText : addText}
-          </Button>
-        </div>
-        {subNote && <p className="field-sub-note">{subNote}</p>}
-      </GridSection>
+            <Button
+              id={`add-${applicationSection}-button`}
+              type="button"
+              size={AppearanceSizeType.normal}
+              onClick={() => setTableDrawer(true)}
+            >
+              {listingData.length ? editText : addText}
+            </Button>
+            {subNote && <p className="field-sub-note">{subNote}</p>}
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
 
       <Drawer
         open={!!tableDrawer}
@@ -304,31 +308,37 @@ const SelectAndOrder = ({
         }}
         className={"drawer__small"}
       >
-        <div className="border rounded-md p-8 bg-white">
-          {jurisdiction
-            ? fetchedData.map((item, index) => {
-                const previewShown = openPreviews.some((preview) => preview === index)
-                return (
-                  <GridSection columns={1} key={index} className={"md:-mb-6"}>
-                    <Field
-                      className={"font-semibold"}
-                      id={`${formKey}.${item.id}`}
-                      name={`${formKey}.${item.id}`}
-                      type="checkbox"
-                      label={item.text}
-                      register={register}
-                      inputProps={{
-                        defaultChecked: draftListingData.some(
-                          (existingItem) => existingItem.text === item.text
-                        ),
-                      }}
-                    />
-                    {getPreviewSection(previewShown, index, item)}
-                  </GridSection>
-                )
-              })
-            : t("listings.selectJurisdiction")}
-        </div>
+        <Card>
+          <Card.Section>
+            {jurisdiction
+              ? fetchedData.map((item, index) => {
+                  const previewShown = openPreviews.some((preview) => preview === index)
+                  return (
+                    <Grid key={index}>
+                      <Grid.Row>
+                        <Grid.Cell>
+                          <Field
+                            className={"font-semibold"}
+                            id={`${formKey}.${item.id}`}
+                            name={`${formKey}.${item.id}`}
+                            type="checkbox"
+                            label={item.text}
+                            register={register}
+                            inputProps={{
+                              defaultChecked: draftListingData.some(
+                                (existingItem) => existingItem.text === item.text
+                              ),
+                            }}
+                          />
+                          {getPreviewSection(previewShown, index, item)}
+                        </Grid.Cell>
+                      </Grid.Row>
+                    </Grid>
+                  )
+                })
+              : t("listings.selectJurisdiction")}
+          </Card.Section>
+        </Card>
         {jurisdiction && (
           <Button
             id="addPreferenceSaveButton"
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
index a162fea619..44bc2ff51d 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
@@ -1,23 +1,22 @@
 import React, { useState, useMemo, useCallback, useEffect } from "react"
 import {
   t,
-  GridSection,
   MinimalTable,
   Button,
   AppearanceSizeType,
   Drawer,
   Modal,
   AppearanceStyleType,
-  GridCell,
   FieldGroup,
   StandardTableData,
 } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import UnitForm from "../UnitForm"
 import { useFormContext, useWatch } from "react-hook-form"
 import { TempUnit } from "../../../../lib/listings/formTypes"
 import { fieldHasError, fieldMessage } from "../../../../lib/helpers"
 import { ListingReviewOrder } from "@bloom-housing/backend-core"
+import SectionWithGrid from "../../../shared/SectionWithGrid"
 
 type UnitProps = {
   units: TempUnit[]
@@ -156,77 +155,71 @@ const FormUnits = ({ units, setUnits, disableUnitsAccordion }: UnitProps) => {
 
   return (
     <>
-      <GridSection
-        title={t("listings.units")}
-        description={t("listings.unitsDescription")}
-        grid={false}
-        separator
-      >
-        <GridSection columns={2}>
-          <GridCell>
-            <FieldValue label={t("listings.unitTypesOrIndividual")} className="mb-1">
-              <FieldGroup
-                name="disableUnitsAccordion"
-                type="radio"
-                register={register}
-                fields={disableUnitsAccordionOptions}
-                fieldClassName="m-0"
-                fieldGroupClassName="flex h-12 items-center"
-              />
-            </FieldValue>
-          </GridCell>
-          <GridCell>
-            <FieldValue label={t("listings.listingAvailabilityQuestion")} className={"mb-1"}>
-              <FieldGroup
-                name="listingAvailabilityQuestion"
-                type="radio"
-                register={register}
-                groupSubNote={t("listings.requiredToPublish")}
-                error={fieldHasError(errors?.listingAvailability) && listingAvailability === null}
-                errorMessage={fieldMessage(errors?.listingAvailability)}
-                fieldClassName="m-0"
-                fieldGroupClassName="flex h-12 items-center"
-                fields={[
-                  {
-                    label: t("listings.availableUnits"),
-                    value: "availableUnits",
-                    id: "availableUnits",
-                    dataTestId: "listingAvailability.availableUnits",
-                    defaultChecked: listing?.reviewOrderType !== ListingReviewOrder.waitlist,
-                  },
-                  {
-                    label: t("listings.waitlist.open"),
-                    value: "openWaitlist",
-                    id: "openWaitlist",
-                    dataTestId: "listingAvailability.openWaitlist",
-                    defaultChecked: listing?.reviewOrderType === ListingReviewOrder.waitlist,
-                  },
-                ]}
-              />
-            </FieldValue>
-          </GridCell>
-        </GridSection>
-        <span className={"text-sm text-gray-800 block mb-2"}>{t("listings.units")}</span>
-        <div className="bg-gray-300 px-4 py-5">
-          {!!units.length && (
-            <div className="mb-5">
-              <MinimalTable headers={unitTableHeaders} data={unitTableData} />
-            </div>
-          )}
-          <Button
-            id="addUnitsButton"
-            type="button"
-            size={AppearanceSizeType.normal}
-            styleType={fieldHasError(errors?.units) ? AppearanceStyleType.alert : null}
-            onClick={() => {
-              editUnit(units.length + 1)
-              clearErrors("units")
-            }}
-          >
-            {t("listings.unit.add")}
-          </Button>
-        </div>
-      </GridSection>
+      <hr className="spacer-section-above spacer-section" />
+      <SectionWithGrid heading={t("listings.units")} subheading={t("listings.unitsDescription")}>
+        <Grid.Row columns={2}>
+          <FieldValue label={t("listings.unitTypesOrIndividual")} className="mb-1">
+            <FieldGroup
+              name="disableUnitsAccordion"
+              type="radio"
+              register={register}
+              fields={disableUnitsAccordionOptions}
+              fieldClassName="m-0"
+              fieldGroupClassName="flex h-12 items-center"
+            />
+          </FieldValue>
+          <FieldValue label={t("listings.listingAvailabilityQuestion")} className={"mb-1"}>
+            <FieldGroup
+              name="listingAvailabilityQuestion"
+              type="radio"
+              register={register}
+              groupSubNote={t("listings.requiredToPublish")}
+              error={fieldHasError(errors?.listingAvailability) && listingAvailability === null}
+              errorMessage={fieldMessage(errors?.listingAvailability)}
+              fieldClassName="m-0"
+              fieldGroupClassName="flex h-12 items-center"
+              fields={[
+                {
+                  label: t("listings.availableUnits"),
+                  value: "availableUnits",
+                  id: "availableUnits",
+                  dataTestId: "listingAvailability.availableUnits",
+                  defaultChecked: listing?.reviewOrderType !== ListingReviewOrder.waitlist,
+                },
+                {
+                  label: t("listings.waitlist.open"),
+                  value: "openWaitlist",
+                  id: "openWaitlist",
+                  dataTestId: "listingAvailability.openWaitlist",
+                  defaultChecked: listing?.reviewOrderType === ListingReviewOrder.waitlist,
+                },
+              ]}
+            />
+          </FieldValue>
+        </Grid.Row>
+        <SectionWithGrid.HeadingRow>{t("listings.units")}</SectionWithGrid.HeadingRow>
+        <Grid.Row>
+          <Grid.Cell className="grid-inset-section">
+            {!!units.length && (
+              <div className="mb-5">
+                <MinimalTable headers={unitTableHeaders} data={unitTableData} />
+              </div>
+            )}
+            <Button
+              id="addUnitsButton"
+              type="button"
+              size={AppearanceSizeType.normal}
+              styleType={fieldHasError(errors?.units) ? AppearanceStyleType.alert : null}
+              onClick={() => {
+                editUnit(units.length + 1)
+                clearErrors("units")
+              }}
+            >
+              {t("listings.unit.add")}
+            </Button>
+          </Grid.Cell>
+        </Grid.Row>
+      </SectionWithGrid>
 
       <p className="field-sub-note">{t("listings.requiredToPublish")}</p>
       {fieldHasError(errors?.units) && (
diff --git a/sites/partners/src/components/settings/PreferenceDrawer.tsx b/sites/partners/src/components/settings/PreferenceDrawer.tsx
index cbab62dbd0..bf97efbe36 100644
--- a/sites/partners/src/components/settings/PreferenceDrawer.tsx
+++ b/sites/partners/src/components/settings/PreferenceDrawer.tsx
@@ -6,15 +6,13 @@ import {
   Drawer,
   Field,
   FieldGroup,
-  GridCell,
-  GridSection,
   Select,
   Textarea,
   t,
   MinimalTable,
   StandardTableData,
 } from "@bloom-housing/ui-components"
-import { FormErrorMessage, FieldValue } from "@bloom-housing/ui-seeds"
+import { FormErrorMessage, FieldValue, Card, Grid } from "@bloom-housing/ui-seeds"
 import { AuthContext } from "@bloom-housing/shared-helpers"
 import { useForm } from "react-hook-form"
 import { YesNoAnswer } from "../../lib/helpers"
@@ -27,6 +25,7 @@ import {
 } from "@bloom-housing/backend-core"
 import ManageIconSection from "./ManageIconSection"
 import { DrawerType } from "../../pages/settings/index"
+import SectionWithGrid from "../shared/SectionWithGrid"
 
 type PreferenceDrawerProps = {
   drawerOpen: boolean
@@ -162,97 +161,95 @@ const PreferenceDrawer = ({
           onDrawerClose()
         }}
       >
-        <div className="border rounded-md p-8 bg-white">
-          <GridSection title={t("settings.preference")} columns={3}>
-            <GridCell span={2}>
-              <FieldValue label={t("t.title")}>
-                <Field
-                  id="text"
-                  name="text"
-                  label={t("t.title")}
-                  placeholder={t("t.title")}
-                  register={register}
-                  type="text"
-                  readerOnly
-                  dataTestId={"preference-title"}
-                  defaultValue={questionData?.text}
-                  errorMessage={t("errors.requiredFieldError")}
-                  validation={{ required: true }}
-                  error={errors.text}
-                  inputProps={{
-                    onChange: () => clearErrors("text"),
+        <Card>
+          <Card.Section>
+            <SectionWithGrid heading={t("settings.preference")}>
+              <Grid.Row>
+                <Grid.Cell>
+                  <Field
+                    id="text"
+                    name="text"
+                    label={t("t.title")}
+                    placeholder={t("t.title")}
+                    register={register}
+                    type="text"
+                    dataTestId={"preference-title"}
+                    defaultValue={questionData?.text}
+                    errorMessage={t("errors.requiredFieldError")}
+                    validation={{ required: true }}
+                    error={errors.text}
+                    inputProps={{
+                      onChange: () => clearErrors("text"),
+                    }}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Cell>
+                  <Textarea
+                    label={t("t.descriptionTitle")}
+                    name={"description"}
+                    id={"description"}
+                    fullWidth={true}
+                    placeholder={t("settings.preferenceDescription")}
+                    register={register}
+                    dataTestId={"preference-description"}
+                    defaultValue={questionData?.description}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Cell>
+                  <Field
+                    id="preferenceUrl"
+                    name="preferenceUrl"
+                    label={t("t.url")}
+                    placeholder={"https://"}
+                    register={register}
+                    type="url"
+                    dataTestId={"preference-link"}
+                    error={!!errors?.preferenceUrl}
+                    errorMessage={
+                      errors?.preferenceUrl?.type === "https"
+                        ? t("errors.urlHttpsError")
+                        : t("errors.urlError")
+                    }
+                    defaultValue={questionData?.links?.length > 0 ? questionData?.links[0].url : ""}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Cell>
+                  <Field
+                    id="preferenceLinkTitle"
+                    name="preferenceLinkTitle"
+                    label={t("settings.preferenceLinkTitle")}
+                    placeholder={t("settings.preferenceLinkTitle")}
+                    register={register}
+                    type="text"
+                    dataTestId={"preference-link-title"}
+                    defaultValue={
+                      questionData?.links?.length > 0 ? questionData?.links[0].title : ""
+                    }
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+            </SectionWithGrid>
+            {questionData?.options?.length > 0 && (
+              <div className="mb-5">
+                <MinimalTable
+                  headers={{
+                    name: "t.name",
+                    description: "t.descriptionTitle",
+                    action: "",
                   }}
+                  data={draggableTableData}
+                  draggable={true}
+                  setData={setDragOrder}
                 />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-          <GridSection columns={3} className={"mb-4"}>
-            <GridCell span={2}>
-              <Textarea
-                label={t("t.descriptionTitle")}
-                name={"description"}
-                id={"description"}
-                fullWidth={true}
-                placeholder={t("settings.preferenceDescription")}
-                register={register}
-                dataTestId={"preference-description"}
-                defaultValue={questionData?.description}
-              />
-            </GridCell>
-          </GridSection>
-          <GridSection columns={3} className={"mt-4 mb-6"}>
-            <GridCell>
-              <FieldValue label={t("t.url")}>
-                <Field
-                  id="preferenceUrl"
-                  name="preferenceUrl"
-                  label={t("t.url")}
-                  placeholder={"https://"}
-                  register={register}
-                  type="url"
-                  readerOnly
-                  dataTestId={"preference-link"}
-                  error={!!errors?.preferenceUrl}
-                  errorMessage={
-                    errors?.preferenceUrl?.type === "https"
-                      ? t("errors.urlHttpsError")
-                      : t("errors.urlError")
-                  }
-                  defaultValue={questionData?.links?.length > 0 ? questionData?.links[0].url : ""}
-                />
-              </FieldValue>
-            </GridCell>
-            <GridCell>
-              <FieldValue label={t("settings.preferenceLinkTitle")}>
-                <Field
-                  id="preferenceLinkTitle"
-                  name="preferenceLinkTitle"
-                  label={t("settings.preferenceLinkTitle")}
-                  placeholder={t("settings.preferenceLinkTitle")}
-                  register={register}
-                  type="text"
-                  readerOnly
-                  dataTestId={"preference-link-title"}
-                  defaultValue={questionData?.links?.length > 0 ? questionData?.links[0].title : ""}
-                />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-          {questionData?.options?.length > 0 && (
-            <div className="mb-5">
-              <MinimalTable
-                headers={{
-                  name: "t.name",
-                  description: "t.descriptionTitle",
-                  action: "",
-                }}
-                data={draggableTableData}
-                draggable={true}
-                setData={setDragOrder}
-              />
-            </div>
-          )}
-          <GridSection columns={3} className={"mt-4"}>
+              </div>
+            )}
+
             <div className={"flex flex-col"}>
               <Button
                 type="button"
@@ -275,125 +272,124 @@ const PreferenceDrawer = ({
                 </FormErrorMessage>
               )}
             </div>
-          </GridSection>
-          <GridSection columns={3} className={"mt-4"}>
-            <GridCell>
-              <FieldValue label={t("settings.preferenceOptOut")} className="mb-1">
-                <FieldGroup
-                  name="canYouOptOutQuestion"
-                  type="radio"
-                  register={register}
-                  fields={[
-                    {
-                      id: "optOutYes",
-                      label: t("t.yes"),
-                      value: YesNoAnswer.Yes,
-                      defaultChecked: questionData === null || questionData?.optOutText !== null,
-                      dataTestId: "opt-out-question-yes",
-                    },
-                    {
-                      id: "optOutNo",
-                      label: t("t.no"),
-                      value: YesNoAnswer.No,
-                      defaultChecked: questionData && questionData?.optOutText === null,
-                      dataTestId: "opt-out-question-no",
-                    },
-                  ]}
-                  fieldClassName="m-0"
-                  fieldGroupClassName="flex h-12 items-center"
-                  dataTestId={"preference-can-you-opt-out"}
-                />
-              </FieldValue>
-            </GridCell>
-            {optOutQuestion === YesNoAnswer.Yes && (
-              <GridCell>
-                <FieldValue label={t("settings.preferenceOptOutLabel")}>
-                  <Field
-                    id="optOutText"
-                    name="optOutText"
-                    label={t("settings.preferenceOptOutLabel")}
-                    placeholder={t("settings.preferenceOptOutLabel")}
+
+            <Grid>
+              <Grid.Row>
+                <Grid.Cell>
+                  <FieldGroup
+                    name="canYouOptOutQuestion"
+                    type="radio"
                     register={register}
-                    type="text"
-                    readerOnly
-                    dataTestId={"preference-opt-out-label"}
+                    groupLabel={t("settings.preferenceOptOut")}
+                    fields={[
+                      {
+                        id: "optOutYes",
+                        label: t("t.yes"),
+                        value: YesNoAnswer.Yes,
+                        defaultChecked: questionData === null || questionData?.optOutText !== null,
+                        dataTestId: "opt-out-question-yes",
+                      },
+                      {
+                        id: "optOutNo",
+                        label: t("t.no"),
+                        value: YesNoAnswer.No,
+                        defaultChecked: questionData && questionData?.optOutText === null,
+                        dataTestId: "opt-out-question-no",
+                      },
+                    ]}
+                    fieldClassName="m-0"
+                    fieldGroupClassName="flex h-12 items-center"
+                    dataTestId={"preference-can-you-opt-out"}
+                  />
+                </Grid.Cell>
+                {optOutQuestion === YesNoAnswer.Yes && (
+                  <Grid.Cell>
+                    <Field
+                      id="optOutText"
+                      name="optOutText"
+                      label={t("settings.preferenceOptOutLabel")}
+                      placeholder={t("settings.preferenceOptOutLabel")}
+                      register={register}
+                      type="text"
+                      dataTestId={"preference-opt-out-label"}
+                      defaultValue={
+                        questionData?.optOutText ?? t("application.preferences.dontWantSingular")
+                      }
+                    />
+                  </Grid.Cell>
+                )}
+              </Grid.Row>
+            </Grid>
+            <Grid>
+              <Grid.Row>
+                <Grid.Cell>
+                  <FieldGroup
+                    name="showOnListingQuestion"
+                    type="radio"
+                    register={register}
+                    groupLabel={t("settings.preferenceShowOnListing")}
+                    fields={[
+                      {
+                        id: "showOnListingYes",
+                        label: t("t.yes"),
+                        value: YesNoAnswer.Yes,
+                        defaultChecked: questionData === null || !questionData?.hideFromListing,
+                        dataTestId: "show-on-listing-question-yes",
+                      },
+                      {
+                        id: "showOnListingNo",
+                        label: t("t.no"),
+                        value: YesNoAnswer.No,
+                        defaultChecked: questionData?.hideFromListing,
+                        dataTestId: "show-on-listing-question-no",
+                      },
+                    ]}
+                    fieldClassName="m-0"
+                    fieldGroupClassName="flex h-12 items-center"
+                    dataTestId={"preference-show-on-listing"}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+            </Grid>
+            <Grid>
+              <Grid.Row>
+                <Grid.Cell>
+                  <Select
+                    id={"jurisdictionId"}
+                    name={"jurisdictionId"}
+                    label={t("t.jurisdiction")}
+                    register={register}
+                    controlClassName={"control"}
+                    keyPrefix={"jurisdictions"}
+                    options={
+                      profile
+                        ? [
+                            { label: "", value: "" },
+                            ...profile?.jurisdictions.map((jurisdiction) => ({
+                              label: jurisdiction.name,
+                              value: jurisdiction.id,
+                            })),
+                          ]
+                        : [{ label: "", value: "" }]
+                    }
+                    dataTestId={"preference-jurisdiction"}
                     defaultValue={
-                      questionData?.optOutText ?? t("application.preferences.dontWantSingular")
+                      questionData?.jurisdictions?.length > 0
+                        ? questionData.jurisdictions[0].id
+                        : null
                     }
+                    errorMessage={t("errors.requiredFieldError")}
+                    error={errors.jurisdictionId}
+                    validation={{ required: true }}
+                    inputProps={{
+                      onChange: () => clearErrors("jurisdictionId"),
+                    }}
                   />
-                </FieldValue>
-              </GridCell>
-            )}
-          </GridSection>
-          <GridSection columns={3} className={"mt-4"}>
-            <GridCell>
-              <FieldValue label={t("settings.preferenceShowOnListing")} className="mb-1">
-                <FieldGroup
-                  name="showOnListingQuestion"
-                  type="radio"
-                  register={register}
-                  fields={[
-                    {
-                      id: "showOnListingYes",
-                      label: t("t.yes"),
-                      value: YesNoAnswer.Yes,
-                      defaultChecked: questionData === null || !questionData?.hideFromListing,
-                      dataTestId: "show-on-listing-question-yes",
-                    },
-                    {
-                      id: "showOnListingNo",
-                      label: t("t.no"),
-                      value: YesNoAnswer.No,
-                      defaultChecked: questionData?.hideFromListing,
-                      dataTestId: "show-on-listing-question-no",
-                    },
-                  ]}
-                  fieldClassName="m-0"
-                  fieldGroupClassName="flex h-12 items-center"
-                  dataTestId={"preference-show-on-listing"}
-                />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-          <GridSection columns={3}>
-            <GridCell span={1}>
-              <FieldValue label={t("t.jurisdiction")}>
-                <Select
-                  id={"jurisdictionId"}
-                  name={"jurisdictionId"}
-                  label={t("t.jurisdiction")}
-                  labelClassName="sr-only"
-                  register={register}
-                  controlClassName={"control"}
-                  keyPrefix={"jurisdictions"}
-                  options={
-                    profile
-                      ? [
-                          { label: "", value: "" },
-                          ...profile?.jurisdictions.map((jurisdiction) => ({
-                            label: jurisdiction.name,
-                            value: jurisdiction.id,
-                          })),
-                        ]
-                      : [{ label: "", value: "" }]
-                  }
-                  dataTestId={"preference-jurisdiction"}
-                  defaultValue={
-                    questionData?.jurisdictions?.length > 0
-                      ? questionData.jurisdictions[0].id
-                      : null
-                  }
-                  errorMessage={t("errors.requiredFieldError")}
-                  error={errors.jurisdictionId}
-                  validation={{ required: true }}
-                  inputProps={{
-                    onChange: () => clearErrors("jurisdictionId"),
-                  }}
-                />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-        </div>
+                </Grid.Cell>
+              </Grid.Row>
+            </Grid>
+          </Card.Section>
+        </Card>
         <Button
           type="button"
           className={"mt-4"}
@@ -447,130 +443,129 @@ const PreferenceDrawer = ({
         }}
         className={"w-auto"}
       >
-        <div className="border rounded-md p-8 bg-white">
-          <GridSection title={t("t.option")} columns={3}>
-            <GridCell span={2}>
-              <FieldValue label={t("t.title")}>
-                <Field
-                  id="optionTitle"
-                  name="optionTitle"
-                  label={t("t.title")}
-                  placeholder={t("t.title")}
-                  register={register}
-                  type="text"
-                  readerOnly
-                  dataTestId={"preference-option-title"}
-                  defaultValue={optionData?.text}
-                  errorMessage={t("errors.requiredFieldError")}
-                  error={!!errors["optionTitle"]}
-                  inputProps={{
-                    onChange: () => {
-                      clearErrors("optionTitle")
-                    },
-                  }}
-                />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-          <GridSection columns={3} className={"mb-4"}>
-            <GridCell span={2}>
-              <Textarea
-                label={t("t.descriptionTitle")}
-                name={"optionDescription"}
-                id={"optionDescription"}
-                placeholder={t("settings.preferenceOptionDescription")}
-                fullWidth={true}
-                register={register}
-                dataTestId={"preference-option-description"}
-                defaultValue={optionData?.description}
-              />
-            </GridCell>
-          </GridSection>
-          <GridSection columns={3} className={"mt-4"}>
-            <GridCell>
-              <FieldValue label={t("t.url")}>
-                <Field
-                  id="optionUrl"
-                  name="optionUrl"
-                  label={t("t.url")}
-                  placeholder={"https://"}
-                  register={register}
-                  type="url"
-                  error={!!errors?.optionUrl}
-                  errorMessage={
-                    errors?.optionUrl?.type === "https"
-                      ? t("errors.urlHttpsError")
-                      : t("errors.urlError")
-                  }
-                  readerOnly
-                  dataTestId={"preference-option-link"}
-                  defaultValue={optionData?.links?.length > 0 ? optionData?.links[0].url : ""}
-                />
-              </FieldValue>
-            </GridCell>
-            <GridCell>
-              <FieldValue label={t("settings.preferenceLinkTitle")}>
-                <Field
-                  id="optionLinkTitle"
-                  name="optionLinkTitle"
-                  label={t("settings.preferenceLinkTitle")}
-                  placeholder={t("settings.preferenceLinkTitle")}
-                  register={register}
-                  type="text"
-                  readerOnly
-                  dataTestId={"preference-option-link-title"}
-                  defaultValue={optionData?.links?.length > 0 ? optionData?.links[0].title : ""}
-                />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-          <GridSection columns={3} className={"mt-8"}>
-            <GridCell>
-              <Field
-                type="checkbox"
-                id="collectAddress"
-                name="collectAddress"
-                label={t("settings.preferenceCollectAddress")}
-                register={register}
-                dataTestId={"preference-option-collect-address"}
-                controlClassName={"font-normal"}
-                inputProps={{
-                  defaultChecked: optionData?.collectAddress,
-                }}
-              />
-            </GridCell>
-          </GridSection>
-          <GridSection>
-            <GridCell>
-              <FieldValue label={t("settings.preferenceExclusiveQuestion")} className="mb-1">
-                <FieldGroup
-                  name="exclusiveQuestion"
-                  type="radio"
-                  register={register}
-                  fields={[
-                    {
-                      id: "multiselect",
-                      label: t("settings.preferenceMultiSelect"),
-                      value: "multiselect",
-                      defaultChecked: optionData === null || !optionData?.exclusive,
-                      dataTestId: "exclusive-question-multiselect",
-                    },
-                    {
-                      id: "exclusive",
-                      label: t("settings.preferenceExclusive"),
-                      value: "exclusive",
-                      defaultChecked: optionData?.exclusive,
-                      dataTestId: "exclusive-question-exclusive",
-                    },
-                  ]}
-                  fieldClassName="m-0"
-                  fieldGroupClassName="flex h-12 items-center"
-                  dataTestId={"preference-exclusive-question"}
-                />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-        </div>
+        <Card>
+          <Card.Section>
+            <SectionWithGrid heading={t("t.option")}>
+              <Grid.Row>
+                <FieldValue label={t("t.title")}>
+                  <Field
+                    id="optionTitle"
+                    name="optionTitle"
+                    label={t("t.title")}
+                    placeholder={t("t.title")}
+                    register={register}
+                    type="text"
+                    readerOnly
+                    dataTestId={"preference-option-title"}
+                    defaultValue={optionData?.text}
+                    errorMessage={t("errors.requiredFieldError")}
+                    error={!!errors["optionTitle"]}
+                    inputProps={{
+                      onChange: () => {
+                        clearErrors("optionTitle")
+                      },
+                    }}
+                  />
+                </FieldValue>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Cell>
+                  <Textarea
+                    label={t("t.descriptionTitle")}
+                    name={"optionDescription"}
+                    id={"optionDescription"}
+                    placeholder={t("settings.preferenceOptionDescription")}
+                    fullWidth={true}
+                    register={register}
+                    dataTestId={"preference-option-description"}
+                    defaultValue={optionData?.description}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+              <Grid.Row>
+                <FieldValue label={t("t.url")}>
+                  <Field
+                    id="optionUrl"
+                    name="optionUrl"
+                    label={t("t.url")}
+                    placeholder={"https://"}
+                    register={register}
+                    type="url"
+                    error={!!errors?.optionUrl}
+                    errorMessage={
+                      errors?.optionUrl?.type === "https"
+                        ? t("errors.urlHttpsError")
+                        : t("errors.urlError")
+                    }
+                    readerOnly
+                    dataTestId={"preference-option-link"}
+                    defaultValue={optionData?.links?.length > 0 ? optionData?.links[0].url : ""}
+                  />
+                </FieldValue>
+              </Grid.Row>
+              <Grid.Row>
+                <FieldValue label={t("settings.preferenceLinkTitle")}>
+                  <Field
+                    id="optionLinkTitle"
+                    name="optionLinkTitle"
+                    label={t("settings.preferenceLinkTitle")}
+                    placeholder={t("settings.preferenceLinkTitle")}
+                    register={register}
+                    type="text"
+                    readerOnly
+                    dataTestId={"preference-option-link-title"}
+                    defaultValue={optionData?.links?.length > 0 ? optionData?.links[0].title : ""}
+                  />
+                </FieldValue>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Cell>
+                  <Field
+                    type="checkbox"
+                    id="collectAddress"
+                    name="collectAddress"
+                    label={t("settings.preferenceCollectAddress")}
+                    register={register}
+                    dataTestId={"preference-option-collect-address"}
+                    controlClassName={"font-normal"}
+                    inputProps={{
+                      defaultChecked: optionData?.collectAddress,
+                    }}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+
+              <Grid.Row>
+                <FieldValue label={t("settings.preferenceExclusiveQuestion")} className="mb-1">
+                  <FieldGroup
+                    name="exclusiveQuestion"
+                    type="radio"
+                    register={register}
+                    fields={[
+                      {
+                        id: "multiselect",
+                        label: t("settings.preferenceMultiSelect"),
+                        value: "multiselect",
+                        defaultChecked: optionData === null || !optionData?.exclusive,
+                        dataTestId: "exclusive-question-multiselect",
+                      },
+                      {
+                        id: "exclusive",
+                        label: t("settings.preferenceExclusive"),
+                        value: "exclusive",
+                        defaultChecked: optionData?.exclusive,
+                        dataTestId: "exclusive-question-exclusive",
+                      },
+                    ]}
+                    fieldClassName="m-0"
+                    fieldGroupClassName="flex h-12 items-center"
+                    dataTestId={"preference-exclusive-question"}
+                  />
+                </FieldValue>
+              </Grid.Row>
+            </SectionWithGrid>
+          </Card.Section>
+        </Card>
         <Button
           type="button"
           className={"mt-4"}
diff --git a/sites/partners/src/components/shared/SectionWithGrid.tsx b/sites/partners/src/components/shared/SectionWithGrid.tsx
new file mode 100644
index 0000000000..bb6c751e0c
--- /dev/null
+++ b/sites/partners/src/components/shared/SectionWithGrid.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+import { Grid, Heading, HeadingGroup } from "@bloom-housing/ui-seeds"
+
+interface SectionWithGridProps {
+  heading: React.ReactNode
+  subheading?: React.ReactNode
+  inset?: boolean
+  bypassGrid?: boolean
+  children: React.ReactNode
+}
+
+const HeadingRow = ({ children }) => {
+  return (
+    <Grid.Row>
+      <Grid.Cell>
+        <Heading size="lg" priority={3} className="grid-section-row-heading">
+          {children}
+        </Heading>
+      </Grid.Cell>
+    </Grid.Row>
+  )
+}
+
+const SectionWithGrid = (props: SectionWithGridProps) => {
+  return (
+    <section className="section-with-grid spacer-section">
+      {props.subheading ? (
+        <HeadingGroup size="xl" heading={props.heading} subheading={props.subheading} />
+      ) : (
+        <Heading className="spacer-content" size="xl" priority={2}>
+          {props.heading}
+        </Heading>
+      )}
+
+      {props.bypassGrid ? (
+        <div className={props.inset ? "grid-inset-section" : "spacer-section-above"}>
+          {props.children}
+        </div>
+      ) : (
+        <Grid spacing="lg" className={props.inset ? "grid-inset-section" : "spacer-section-above"}>
+          {props.children}
+        </Grid>
+      )}
+    </section>
+  )
+}
+
+SectionWithGrid.HeadingRow = HeadingRow
+
+export default SectionWithGrid
diff --git a/sites/partners/src/components/shared/StatusAside.tsx b/sites/partners/src/components/shared/StatusAside.tsx
index d8694da919..6f680203c4 100644
--- a/sites/partners/src/components/shared/StatusAside.tsx
+++ b/sites/partners/src/components/shared/StatusAside.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import { GridSection } from "@bloom-housing/ui-components"
 import styles from "./StatusAside.module.scss"
+import { Grid } from "@bloom-housing/ui-seeds"
 
 // Ensure each action has a unique key
 export interface StatusAsideProps {
@@ -12,9 +12,9 @@ export interface StatusAsideProps {
 export const StatusAside = (props: StatusAsideProps) => (
   <div>
     <div className={styles["status-aside__buttons"]}>
-      <GridSection columns={props.columns || 2} tightSpacing={true}>
-        {props.actions}
-      </GridSection>
+      <Grid spacing="sm">
+        <Grid.Row columns={props.columns || 2}>{props.actions}</Grid.Row>
+      </Grid>
     </div>
 
     {React.Children.count(props.children) > 0 && <div>{props.children}</div>}
diff --git a/sites/partners/src/components/users/FormUserManage.tsx b/sites/partners/src/components/users/FormUserManage.tsx
index fc85f8ed37..7fb6586f6f 100644
--- a/sites/partners/src/components/users/FormUserManage.tsx
+++ b/sites/partners/src/components/users/FormUserManage.tsx
@@ -4,8 +4,6 @@ import {
   Button,
   t,
   Form,
-  GridSection,
-  GridCell,
   Field,
   Select,
   useMutate,
@@ -14,10 +12,11 @@ import {
   AppearanceSizeType,
   Modal,
 } from "@bloom-housing/ui-components"
-import { FieldValue, Tag } from "@bloom-housing/ui-seeds"
+import { Card, Grid, Tag } from "@bloom-housing/ui-seeds"
 import { RoleOption, roleKeys, AuthContext } from "@bloom-housing/shared-helpers"
 import { Listing, User, UserRolesCreate } from "@bloom-housing/backend-core/types"
 import { JurisdictionAndListingSelection } from "./JurisdictionAndListingSelection"
+import SectionWithGrid from "../shared/SectionWithGrid"
 
 type FormUserManageProps = {
   mode: "add" | "edit"
@@ -309,105 +308,96 @@ const FormUserManage = ({
   return (
     <FormProvider {...methods}>
       <Form onSubmit={() => false}>
-        <div className="border rounded-md p-8 bg-white">
-          <GridSection
-            title={
-              <div className="flex content-center">
-                <span>{t("users.userDetails")}</span>
-
-                {mode === "edit" && (
-                  <div className="ml-2 mt-1 flex items-center justify-center">
-                    <Tag variant={user.confirmedAt ? "success" : "primary"}>
-                      {user.confirmedAt ? t("users.confirmed") : t("users.unconfirmed")}
-                    </Tag>
-                  </div>
-                )}
-              </div>
-            }
-            columns={4}
-          >
-            <GridCell>
-              <FieldValue label={t("authentication.createAccount.firstName")}>
-                <Field
-                  id="firstName"
-                  name="firstName"
-                  label={t("authentication.createAccount.firstName")}
-                  placeholder={t("authentication.createAccount.firstName")}
-                  error={!!errors?.firstName}
-                  errorMessage={t("errors.requiredFieldError")}
-                  validation={{ required: true }}
-                  register={register}
-                  type="text"
-                  readerOnly
-                />
-              </FieldValue>
-            </GridCell>
-
-            <GridCell>
-              <FieldValue label={t("authentication.createAccount.lastName")}>
-                <Field
-                  id="lastName"
-                  name="lastName"
-                  label={t("authentication.createAccount.lastName")}
-                  placeholder={t("authentication.createAccount.lastName")}
-                  error={!!errors?.lastName}
-                  errorMessage={t("errors.requiredFieldError")}
-                  validation={{ required: true }}
-                  register={register}
-                  type="text"
-                  readerOnly
-                />
-              </FieldValue>
-            </GridCell>
-
-            <GridCell>
-              <FieldValue label={t("t.email")}>
-                <Field
-                  id="email"
-                  name="email"
-                  label={t("t.email")}
-                  placeholder={t("t.email")}
-                  error={!!errors?.email}
-                  errorMessage={t("authentication.signIn.loginError")}
-                  validation={{ required: true, pattern: emailRegex }}
-                  register={register}
-                  type="email"
-                  readerOnly
-                />
-              </FieldValue>
-            </GridCell>
-
-            <GridCell>
-              <FieldValue label={t("t.role")}>
-                <Select
-                  id="role"
-                  name="role"
-                  label={t("t.role")}
-                  placeholder={t("t.role")}
-                  labelClassName="sr-only"
-                  register={register}
-                  controlClassName="control"
-                  keyPrefix="users"
-                  options={roleKeys
-                    .filter((elem) => {
-                      if (profile?.roles?.isJurisdictionalAdmin) {
-                        return elem !== RoleOption.Administrator
-                      }
-                      return true
-                    })
-                    .sort((a, b) => (a < b ? -1 : 1))}
-                  error={!!errors?.role}
-                  errorMessage={t("errors.requiredFieldError")}
-                  validation={{ required: true }}
-                />
-              </FieldValue>
-            </GridCell>
-          </GridSection>
-          <JurisdictionAndListingSelection
-            jurisdictionOptions={jurisdictionOptions}
-            listingsOptions={listingsOptions}
-          />
-        </div>
+        <Card>
+          <Card.Section>
+            <SectionWithGrid
+              heading={
+                <div className="flex content-center">
+                  <span>{t("users.userDetails")}</span>
+
+                  {mode === "edit" && (
+                    <div className="ml-2 mt-1 flex items-center justify-center">
+                      <Tag variant={user.confirmedAt ? "success" : "primary"}>
+                        {user.confirmedAt ? t("users.confirmed") : t("users.unconfirmed")}
+                      </Tag>
+                    </div>
+                  )}
+                </div>
+              }
+            >
+              <Grid.Row columns={4}>
+                <Grid.Cell>
+                  <Field
+                    id="firstName"
+                    name="firstName"
+                    label={t("authentication.createAccount.firstName")}
+                    placeholder={t("authentication.createAccount.firstName")}
+                    error={!!errors?.firstName}
+                    errorMessage={t("errors.requiredFieldError")}
+                    validation={{ required: true }}
+                    register={register}
+                    type="text"
+                  />
+                </Grid.Cell>
+
+                <Grid.Cell>
+                  <Field
+                    id="lastName"
+                    name="lastName"
+                    label={t("authentication.createAccount.lastName")}
+                    placeholder={t("authentication.createAccount.lastName")}
+                    error={!!errors?.lastName}
+                    errorMessage={t("errors.requiredFieldError")}
+                    validation={{ required: true }}
+                    register={register}
+                    type="text"
+                  />
+                </Grid.Cell>
+
+                <Grid.Cell>
+                  <Field
+                    id="email"
+                    name="email"
+                    label={t("t.email")}
+                    placeholder={t("t.email")}
+                    error={!!errors?.email}
+                    errorMessage={t("authentication.signIn.loginError")}
+                    validation={{ required: true, pattern: emailRegex }}
+                    register={register}
+                    type="email"
+                  />
+                </Grid.Cell>
+
+                <Grid.Cell>
+                  <Select
+                    id="role"
+                    name="role"
+                    label={t("t.role")}
+                    placeholder={t("t.role")}
+                    register={register}
+                    controlClassName="control"
+                    keyPrefix="users"
+                    options={roleKeys
+                      .filter((elem) => {
+                        if (profile?.roles?.isJurisdictionalAdmin) {
+                          return elem !== RoleOption.Administrator
+                        }
+                        return true
+                      })
+                      .sort((a, b) => (a < b ? -1 : 1))}
+                    error={!!errors?.role}
+                    errorMessage={t("errors.requiredFieldError")}
+                    validation={{ required: true }}
+                  />
+                </Grid.Cell>
+              </Grid.Row>
+            </SectionWithGrid>
+            <JurisdictionAndListingSelection
+              jurisdictionOptions={jurisdictionOptions}
+              listingsOptions={listingsOptions}
+            />
+          </Card.Section>
+        </Card>
 
         <div className="mt-6">
           {mode === "edit" && (
diff --git a/sites/partners/src/components/users/JurisdictionAndListingSelection.tsx b/sites/partners/src/components/users/JurisdictionAndListingSelection.tsx
index bdb84d4dd8..bdbd40462f 100644
--- a/sites/partners/src/components/users/JurisdictionAndListingSelection.tsx
+++ b/sites/partners/src/components/users/JurisdictionAndListingSelection.tsx
@@ -1,7 +1,9 @@
 import React, { useContext } from "react"
 import { useFormContext } from "react-hook-form"
-import { t, GridSection, GridCell, Field, FieldGroup, Select } from "@bloom-housing/ui-components"
+import { t, Field, FieldGroup, Select } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { RoleOption, AuthContext } from "@bloom-housing/shared-helpers"
+import SectionWithGrid from "../shared/SectionWithGrid"
 
 const JurisdictionAndListingSelection = ({ jurisdictionOptions, listingsOptions }) => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -60,44 +62,48 @@ const JurisdictionAndListingSelection = ({ jurisdictionOptions, listingsOptions
       }
       const jurisdictionLabel = jurisdictionOptions.find((elem) => elem.id === key)?.label
       return (
-        <GridCell key={`listings_${key}`}>
-          <GridSection
-            title={
+        <Grid.Cell key={`listings_${key}`}>
+          <SectionWithGrid
+            heading={
               renderTitle
                 ? t("users.jurisdictionalizedListings", {
                     jurisdiction: jurisdictionLabel,
                   })
                 : ""
             }
-            columns={1}
           >
-            <GridCell ariaLabel={`${jurisdictionLabel} Listing Selection`}>
-              <Field
-                id={`listings_all_${key}`}
-                name={`listings_all_${key}`}
-                label={t("users.alljurisdictionalizedListings", {
-                  jurisdiction: jurisdictionLabel,
-                })}
-                register={register}
-                type="checkbox"
-                inputProps={{
-                  onChange: (e: React.ChangeEvent<HTMLInputElement>) => updateAllCheckboxes(e, key),
-                }}
-              />
+            <Grid.Row>
+              <Grid.Cell>
+                <div aria-label={`${jurisdictionLabel} Listing Selection`}>
+                  <Field
+                    id={`listings_all_${key}`}
+                    name={`listings_all_${key}`}
+                    label={t("users.alljurisdictionalizedListings", {
+                      jurisdiction: jurisdictionLabel,
+                    })}
+                    register={register}
+                    type="checkbox"
+                    inputProps={{
+                      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+                        updateAllCheckboxes(e, key),
+                    }}
+                  />
 
-              <FieldGroup
-                name="user_listings"
-                fields={listingsOptions[key]}
-                type="checkbox"
-                register={register}
-                error={!!errors?.user_listings}
-                errorMessage={t("errors.requiredFieldError")}
-                validation={{ required: true }}
-                dataTestId={`listings_${jurisdictionLabel}`}
-              />
-            </GridCell>
-          </GridSection>
-        </GridCell>
+                  <FieldGroup
+                    name="user_listings"
+                    fields={listingsOptions[key]}
+                    type="checkbox"
+                    register={register}
+                    error={!!errors?.user_listings}
+                    errorMessage={t("errors.requiredFieldError")}
+                    validation={{ required: true }}
+                    dataTestId={`listings_${jurisdictionLabel}`}
+                  />
+                </div>
+              </Grid.Cell>
+            </Grid.Row>
+          </SectionWithGrid>
+        </Grid.Cell>
       )
     })
   }
@@ -105,64 +111,71 @@ const JurisdictionAndListingSelection = ({ jurisdictionOptions, listingsOptions
   if (profile?.roles?.isAdmin) {
     if (selectedRoles === RoleOption.JurisdictionalAdmin) {
       return (
-        <GridSection title={t("t.jurisdiction")} columns={4}>
-          <GridCell ariaLabel="Jurisdiction Selection">
-            <Select
-              id="jurisdictions"
-              name="jurisdictions"
-              label={t("t.jurisdiction")}
-              placeholder={t("t.selectOne")}
-              labelClassName="sr-only"
-              register={register}
-              controlClassName="control"
-              keyPrefix="users"
-              options={jurisdictionOptions}
-              error={!!errors?.jurisdictions}
-              errorMessage={t("errors.requiredFieldError")}
-              validation={{ required: true }}
-            />
-          </GridCell>
-        </GridSection>
-      )
-    } else if (selectedRoles === RoleOption.Partner) {
-      return (
-        <>
-          <GridSection title={t("t.jurisdiction")} columns={4}>
-            <GridCell ariaLabel="Jurisdiction Selection">
-              <Field
-                id="jurisdiction_all"
-                name="jurisdiction_all"
-                label={t("users.allJurisdictions")}
-                register={register}
-                type="checkbox"
-                inputProps={{
-                  onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
-                    updateAllJurisdictionCheckboxes(e),
-                }}
-              />
-
-              <FieldGroup
+        <SectionWithGrid heading={t("t.jurisdiction")}>
+          <Grid.Row columns={4}>
+            <Grid.Cell>
+              <Select
+                id="jurisdictions"
                 name="jurisdictions"
-                fields={jurisdictionOptions}
-                type="checkbox"
+                label={t("t.jurisdiction")}
+                placeholder={t("t.selectOne")}
                 register={register}
+                controlClassName="control"
+                keyPrefix="users"
+                options={jurisdictionOptions}
                 error={!!errors?.jurisdictions}
                 errorMessage={t("errors.requiredFieldError")}
                 validation={{ required: true }}
-                dataTestId={"jurisdictions"}
               />
-            </GridCell>
-          </GridSection>
-          {selectedJurisdictions && <GridSection columns={4}>{ListingSection(true)}</GridSection>}
+            </Grid.Cell>
+          </Grid.Row>
+        </SectionWithGrid>
+      )
+    } else if (selectedRoles === RoleOption.Partner) {
+      return (
+        <>
+          <SectionWithGrid heading={t("t.jurisdiction")}>
+            <Grid.Row columns={4}>
+              <Grid.Cell>
+                <Field
+                  id="jurisdiction_all"
+                  name="jurisdiction_all"
+                  label={t("users.allJurisdictions")}
+                  register={register}
+                  type="checkbox"
+                  inputProps={{
+                    onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+                      updateAllJurisdictionCheckboxes(e),
+                  }}
+                />
+
+                <FieldGroup
+                  name="jurisdictions"
+                  fields={jurisdictionOptions}
+                  type="checkbox"
+                  register={register}
+                  error={!!errors?.jurisdictions}
+                  errorMessage={t("errors.requiredFieldError")}
+                  validation={{ required: true }}
+                  dataTestId={"jurisdictions"}
+                />
+              </Grid.Cell>
+            </Grid.Row>
+          </SectionWithGrid>
+          {selectedJurisdictions && (
+            <Grid>
+              <Grid.Row>{ListingSection(true)}</Grid.Row>
+            </Grid>
+          )}
         </>
       )
     }
   } else if (profile?.roles?.isJurisdictionalAdmin) {
     if (selectedRoles === RoleOption.Partner && selectedJurisdictions) {
       return (
-        <GridSection title={t("nav.listings")} columns={1}>
-          {ListingSection()}
-        </GridSection>
+        <SectionWithGrid heading={t("nav.listings")}>
+          <Grid.Row columns={1}>{ListingSection()}</Grid.Row>
+        </SectionWithGrid>
       )
     }
   }
diff --git a/sites/partners/src/pages/application/[id]/review.tsx b/sites/partners/src/pages/application/[id]/review.tsx
index 55dece3247..5089b4258f 100644
--- a/sites/partners/src/pages/application/[id]/review.tsx
+++ b/sites/partners/src/pages/application/[id]/review.tsx
@@ -13,7 +13,6 @@ import {
   useMutate,
   AgTable,
   useAgTable,
-  GridSection,
   Modal,
   Field,
   AppearanceSizeType,
@@ -194,7 +193,7 @@ const Flag = () => {
             </div>
 
             <aside className="md:w-3/12 md:pl-6">
-              <GridSection columns={1} className={"w-full"}>
+              <section className={"w-full"}>
                 <Button
                   styleType={AppearanceStyleType.primary}
                   onClick={() => setSaveModalOpen(true)}
@@ -207,7 +206,7 @@ const Flag = () => {
                     {t("t.lastUpdated")}: {dayjs(data?.updatedAt).format("MMMM DD, YYYY")}
                   </div>
                 )}
-              </GridSection>
+              </section>
             </aside>
           </div>
         </div>
diff --git a/sites/partners/styles/overrides.scss b/sites/partners/styles/overrides.scss
index d3527060a6..59a025cb57 100644
--- a/sites/partners/styles/overrides.scss
+++ b/sites/partners/styles/overrides.scss
@@ -1,6 +1,6 @@
 :root {
   .field-value-error {
-    --field-value-label-color: var(--seeds-color-red-500);
+    --field-value-label-color: var(--seeds-color-alert);
   }
 
   .seeds-tag {
@@ -14,3 +14,77 @@
     text-align: center;
   }
 }
+
+.section-with-grid hgroup p {
+  color: var(--seeds-text-color);
+}
+
+.grid-inset-section {
+  background: var(--seeds-bg-color-surface-primary);
+  padding: var(--seeds-spacer-section);
+}
+
+.grid-section-row-heading {
+  margin-block-end: calc(var(--seeds-s3) - var(--grid-gap, var(--seeds-s7)));
+}
+
+.spacer-container-above {
+  margin-block-start: var(--seeds-spacer-container);
+}
+
+.spacer-container {
+  margin-block-end: var(--seeds-spacer-container);
+}
+
+.spacer-section-above {
+  margin-block-start: var(--seeds-spacer-section);
+}
+
+.spacer-section {
+  margin-block-end: var(--seeds-spacer-section);
+}
+
+.spacer-content-above {
+  margin-block-start: var(--seeds-spacer-content);
+}
+
+.spacer-content {
+  margin-block-end: var(--seeds-spacer-content);
+}
+
+.spacer-header-above {
+  margin-block-start: var(--seeds-spacer-header);
+}
+
+.spacer-header {
+  margin-block-end: var(--seeds-spacer-header);
+}
+
+.spacer-label-above {
+  margin-block-start: var(--seeds-spacer-label);
+}
+
+.spacer-label {
+  margin-block-end: var(--seeds-spacer-label);
+}
+
+.spacer-text-above {
+  margin-block-start: var(--seeds-spacer-text);
+}
+
+.spacer-text {
+  margin-block-end: var(--seeds-spacer-text);
+}
+
+:is(.spacer-container, .spacer-section, .spacer-content, .spacer-header, .spacer-label, .spacer-text):last-child {
+  margin-block-end: 0;
+}
+
+/* Override out-of-date ui-components labeling */
+:is(label, legend).text__caps-spaced {
+  /*  --text-caps-spaced-font-family: var(--bloom-font-sans); */
+  --text-caps-spaced-letter-spacing: normal;
+  --text-caps-spaced-font-weight: normal;
+  --text-caps-spaced-margin-bottom: var(--seeds-s2);
+  text-transform: none;
+}
diff --git a/sites/public/package.json b/sites/public/package.json
index 1192ad2a48..295e965f36 100644
--- a/sites/public/package.json
+++ b/sites/public/package.json
@@ -28,7 +28,7 @@
     "@bloom-housing/backend-core": "^7.13.0",
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.0.21",
-    "@bloom-housing/ui-seeds": "^1.9.1",
+    "@bloom-housing/ui-seeds": "^1.12.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
diff --git a/yarn.lock b/yarn.lock
index 5fb4368d67..1de2e1fbcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1645,10 +1645,10 @@
     tailwindcss-rtl "^0.9.0"
     typesafe-actions "^5.1.0"
 
-"@bloom-housing/ui-seeds@^1.9.1":
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/@bloom-housing/ui-seeds/-/ui-seeds-1.9.1.tgz#ff581dbab27d0a8bdee92e72ef575959c1fc28f8"
-  integrity sha512-7TLEWscoJRniUjsDx0eWdUwE9nhSFLICzxa4bRhpqJnsmKT3rmA87gclHgqFgEvNdbsvStWISltztNe9ZTND2g==
+"@bloom-housing/ui-seeds@^1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@bloom-housing/ui-seeds/-/ui-seeds-1.12.0.tgz#d93d565241a855a8699aef8b2b097bbde1024061"
+  integrity sha512-XyCSRCkPyYAb19BYLDrI2JcMW1vMGs1GDrpKNJRsr4RcExbpyL7pIo/J97DsmQRBwfmn9NAjlLkEOYRnd1DrEw==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^6.3.0"
     "@fortawesome/free-regular-svg-icons" "^6.3.0"
@@ -1659,6 +1659,7 @@
     "@types/node" "^16.7.13"
     "@types/react" "^18.0.0"
     "@types/react-dom" "^18.0.0"
+    focus-trap-react "^10.2.1"
     markdown-to-jsx "^6.11.4"
     react "^18.2.0"
     react-dom "^18.2.0"
@@ -1823,6 +1824,31 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@csstools/cascade-layer-name-parser@^1.0.3":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz#3ff490b84660dc0592b4315029f22908f3de0577"
+  integrity sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==
+
+"@csstools/css-parser-algorithms@^2.3.0":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz#ec4fc764ba45d2bb7ee2774667e056aa95003f3a"
+  integrity sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==
+
+"@csstools/css-tokenizer@^2.1.1":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz#9d70e6dcbe94e44c7400a2929928db35c4de32b5"
+  integrity sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==
+
+"@csstools/media-query-list-parser@^2.1.2":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz#0017f99945f6c16dd81a7aacf6821770933c3a5c"
+  integrity sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==
+
+"@csstools/postcss-global-data@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-global-data/-/postcss-global-data-2.0.1.tgz#3e465cdd66894737b9a8f66d4ecced99c44d6aec"
+  integrity sha512-MTaupJCsDS9BDgo+Lvb5G1/MkqnKN65I14nr2Hu0QqHoqJEIOpn6CBGrs7jXAjksGG0OUDQY0zlhjM3q7AI54A==
+
 "@cypress/code-coverage@^3.10.1":
   version "3.10.1"
   resolved "https://registry.npmjs.org/@cypress/code-coverage/-/code-coverage-3.10.1.tgz"
@@ -9246,6 +9272,21 @@ focus-lock@^0.11.6:
   dependencies:
     tslib "^2.0.3"
 
+focus-trap-react@^10.2.1:
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.2.3.tgz#a5a2ea7fbb042ffa4337fde72758325ed0fb793a"
+  integrity sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==
+  dependencies:
+    focus-trap "^7.5.4"
+    tabbable "^6.2.0"
+
+focus-trap@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.4.tgz#6c4e342fe1dae6add9c2aa332a6e7a0bbd495ba2"
+  integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==
+  dependencies:
+    tabbable "^6.2.0"
+
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz"
@@ -14879,6 +14920,16 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-custom-media@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-10.0.0.tgz#299781f67d043de7d3eaa13923c26c586d9cd57a"
+  integrity sha512-NxDn7C6GJ7X8TsWOa8MbCdq9rLERRLcPfQSp856k1jzMreL8X9M6iWk35JjPRIb9IfRnVohmxAylDRx7n4Rv4g==
+  dependencies:
+    "@csstools/cascade-layer-name-parser" "^1.0.3"
+    "@csstools/css-parser-algorithms" "^2.3.0"
+    "@csstools/css-tokenizer" "^2.1.1"
+    "@csstools/media-query-list-parser" "^2.1.2"
+
 postcss-js@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
@@ -17372,6 +17423,11 @@ symbol-tree@^3.2.4:
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.npmjs.org/table/-/table-5.4.6.tgz"