diff --git a/.changeset/breezy-eagles-perform.md b/.changeset/breezy-eagles-perform.md
new file mode 100644
index 000000000..688218386
--- /dev/null
+++ b/.changeset/breezy-eagles-perform.md
@@ -0,0 +1,5 @@
+---
+'wingman-fe': patch
+---
+
+Remove deprecated `dividers` in Braid components
diff --git a/.eslintignore b/.eslintignore
index c65292cfc..d1a4a5170 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,6 +4,7 @@
 .prettierrc
 coverage/
 dist/
+pnpm-lock.yaml
 report/
 tsconfig.json
 # end managed by sku
diff --git a/.prettierignore b/.prettierignore
index acba15a6b..d1a4a5170 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,8 +4,7 @@
 .prettierrc
 coverage/
 dist/
+pnpm-lock.yaml
 report/
 tsconfig.json
 # end managed by sku
-
-pnpm-lock.yaml
diff --git a/fe/example/src/App/Sidebar.tsx b/fe/example/src/App/Sidebar.tsx
index 0c220833a..42a02bf5f 100644
--- a/fe/example/src/App/Sidebar.tsx
+++ b/fe/example/src/App/Sidebar.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Divider,
   Heading,
   IconEducation,
   IconHome,
@@ -65,18 +66,18 @@ const SidebarLink = ({ children, size, to }: SidebarLinkProps) => {
 
 export const Sidebar = () => (
   <Box className={styles.sidebar}>
-    <Stack dividers space="none">
+    <Stack space="none">
       <Box padding="gutter">
         <Heading level="3">🛩</Heading>
       </Box>
-
-      <Stack dividers space="none">
+      <Divider />
+      <Stack space="none">
         <Box paddingY="gutter">
           <SidebarLink to="/">
             <IconHome /> Home
           </SidebarLink>
         </Box>
-
+        <Divider />
         {/* TODO: rebuild from shared components. */}
         {/* <Box paddingY="gutter">
           <SidebarLink to="/positions">
diff --git a/fe/example/src/components/RichDropdown.tsx b/fe/example/src/components/RichDropdown.tsx
index 4ad0c7ee4..f301ce3d0 100644
--- a/fe/example/src/components/RichDropdown.tsx
+++ b/fe/example/src/components/RichDropdown.tsx
@@ -1,4 +1,4 @@
-import { Box, IconChevron, Stack } from 'braid-design-system';
+import { Box, Divider, IconChevron, Stack } from 'braid-design-system';
 import React, { type ReactNode, useState } from 'react';
 
 import * as styles from './RichDropdown.css';
@@ -55,11 +55,14 @@ export const RichDropdown = <T extends BaseT>({
   };
 
   return expanded ? (
-    <Stack dividers space="none">
-      {values.map((value) => (
-        <Item key={value.id} onClick={() => select(value)} value={value}>
-          {children}
-        </Item>
+    <Stack space="none">
+      {values.map((value, index) => (
+        <React.Fragment key={value.id}>
+          {index > 0 ? <Divider /> : null}
+          <Item onClick={() => select(value)} value={value}>
+            {children}
+          </Item>
+        </React.Fragment>
       ))}
     </Stack>
   ) : (
diff --git a/fe/example/src/pages/Admin/Admin.tsx b/fe/example/src/pages/Admin/Admin.tsx
index 7980c7688..56f0a781b 100644
--- a/fe/example/src/pages/Admin/Admin.tsx
+++ b/fe/example/src/pages/Admin/Admin.tsx
@@ -1,4 +1,10 @@
-import { Box, ContentBlock, Heading, Stack } from 'braid-design-system';
+import {
+  Box,
+  ContentBlock,
+  Divider,
+  Heading,
+  Stack,
+} from 'braid-design-system';
 import React from 'react';
 
 import { ClientOnly } from '../../components/ClientOnly';
@@ -10,11 +16,11 @@ import { Version } from './Version';
 import { Webhook } from './Webhook';
 
 export const AdminPage = () => (
-  <Stack dividers space="none">
+  <Stack space="none">
     <Header>
       <Heading level="3">Admin</Heading>
     </Header>
-
+    <Divider />
     <ClientOnly>
       <ContentBlock width="large">
         <Box padding="gutter">
diff --git a/fe/example/src/pages/Admin/Attachments.tsx b/fe/example/src/pages/Admin/Attachments.tsx
index be523c517..bf35a6041 100644
--- a/fe/example/src/pages/Admin/Attachments.tsx
+++ b/fe/example/src/pages/Admin/Attachments.tsx
@@ -1,4 +1,4 @@
-import { Card, Heading, List, Stack, Text } from 'braid-design-system';
+import { Card, Divider, Heading, List, Stack, Text } from 'braid-design-system';
 import React from 'react';
 
 import { useBrowserToken } from '../../../../lib/hooks';
@@ -16,9 +16,9 @@ export const Attachments = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">Attachments</Heading>
-
+        <Divider />
         <List>
           <Text>
             <DownloadLink
diff --git a/fe/example/src/pages/Admin/User.tsx b/fe/example/src/pages/Admin/User.tsx
index 98d588191..e9d3c4139 100644
--- a/fe/example/src/pages/Admin/User.tsx
+++ b/fe/example/src/pages/Admin/User.tsx
@@ -1,4 +1,11 @@
-import { Card, Checkbox, Heading, Stack, TextField } from 'braid-design-system';
+import {
+  Card,
+  Checkbox,
+  Divider,
+  Heading,
+  Stack,
+  TextField,
+} from 'braid-design-system';
 import React, { useState } from 'react';
 
 import { useClient } from '../../hooks/user';
@@ -10,9 +17,9 @@ export const User = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">User</Heading>
-
+        <Divider />
         <Stack space="large">
           <Checkbox
             checked={editMode}
diff --git a/fe/example/src/pages/Admin/Version.tsx b/fe/example/src/pages/Admin/Version.tsx
index 7bcbe7acc..b743a209e 100644
--- a/fe/example/src/pages/Admin/Version.tsx
+++ b/fe/example/src/pages/Admin/Version.tsx
@@ -1,4 +1,11 @@
-import { Card, Heading, Loader, Stack, Text } from 'braid-design-system';
+import {
+  Card,
+  Divider,
+  Heading,
+  Loader,
+  Stack,
+  Text,
+} from 'braid-design-system';
 import React, { useEffect, useState } from 'react';
 
 import { querySeekGraph } from '../../api/seekGraph';
@@ -22,9 +29,9 @@ export const Version = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">Version</Heading>
-
+        <Divider />
         <Text>{typeof version === 'undefined' ? <Loader /> : version}</Text>
       </Stack>
     </Card>
diff --git a/fe/example/src/pages/Admin/Webhook.tsx b/fe/example/src/pages/Admin/Webhook.tsx
index 3a0c5723a..c2d7ab8ef 100644
--- a/fe/example/src/pages/Admin/Webhook.tsx
+++ b/fe/example/src/pages/Admin/Webhook.tsx
@@ -2,6 +2,7 @@ import {
   Actions,
   Button,
   Card,
+  Divider,
   Heading,
   Stack,
   useToast,
@@ -57,9 +58,9 @@ export const Webhook = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">Webhook</Heading>
-
+        <Divider />
         <Stack space="medium">
           <Actions>
             <Button loading={loading} onClick={onClick}>
diff --git a/fe/example/src/pages/Ads/List.tsx b/fe/example/src/pages/Ads/List.tsx
index 57bd0f01d..df7d1f6b5 100644
--- a/fe/example/src/pages/Ads/List.tsx
+++ b/fe/example/src/pages/Ads/List.tsx
@@ -7,6 +7,7 @@ import {
   Card,
   Column,
   Columns,
+  Divider,
   Heading,
   IconAdd,
   IconEdit,
@@ -58,14 +59,14 @@ export const AdList = ({ ads }: Props) => {
             onClick={() => setSelectedAdId(ad.id)}
           >
             {editAds[index] ? (
-              <Stack dividers space="none">
+              <Stack space="none">
                 <Card>
                   <Heading level="4">Edit ad</Heading>
                 </Card>
-
+                <Divider />
                 {/* TODO: avoid sharing the same local storage state */}
                 <NewAdForm initial={ad} />
-
+                <Divider />
                 <Card>
                   {/* TODO: actually do something */}
                   <Actions>
@@ -144,14 +145,14 @@ export const AdList = ({ ads }: Props) => {
         ))}
 
         {newAd ? (
-          <Stack dividers space="none">
+          <Stack space="none">
             <Card>
               <Heading level="4">New ad</Heading>
             </Card>
-
+            <Divider />
             {/* TODO: avoid sharing the same local storage state */}
             <NewAdForm />
-
+            <Divider />
             <Card>
               {/* TODO: actually do something */}
               <Actions>
diff --git a/fe/example/src/pages/Candidates/Detail.tsx b/fe/example/src/pages/Candidates/Detail.tsx
index e1e265d70..0567f8808 100644
--- a/fe/example/src/pages/Candidates/Detail.tsx
+++ b/fe/example/src/pages/Candidates/Detail.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   ContentBlock,
+  Divider,
   Heading,
   IconDocument,
   IconNote,
@@ -158,7 +159,7 @@ const CandidateDetails = () => {
   ];
 
   return (
-    <Stack dividers space="none">
+    <Stack space="none">
       <Header>
         <Heading level="3">
           <Breadcrumbs>
@@ -172,7 +173,7 @@ const CandidateDetails = () => {
           </Breadcrumbs>
         </Heading>
       </Header>
-
+      <Divider />
       <Box background="surface" padding="gutter">
         <Stack space="gutter">
           {preferences.devTools ? (
@@ -185,7 +186,7 @@ const CandidateDetails = () => {
           </Text>
         </Stack>
       </Box>
-
+      <Divider />
       <TabsProvider id="candidate">
         <Box background="surface">
           <Tabs gutter="gutter" label="Candidate" reserveHitArea>
diff --git a/fe/example/src/pages/Candidates/Detail/Attachment.tsx b/fe/example/src/pages/Candidates/Detail/Attachment.tsx
index d5bf0ba9c..ea4e93fc5 100644
--- a/fe/example/src/pages/Candidates/Detail/Attachment.tsx
+++ b/fe/example/src/pages/Candidates/Detail/Attachment.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Card,
+  Divider,
   Heading,
   IconDownload,
   IconImage,
@@ -23,7 +24,7 @@ export const CandidateAttachment = ({ children: attachment }: Props) => {
 
   return (
     <Card key={attachment.id}>
-      <Stack dividers space="gutter">
+      <Stack space="gutter">
         <Box alignItems="center" display="flex" justifyContent="spaceBetween">
           <Heading level="4">{attachment.filename}</Heading>
           <Actions>
@@ -32,7 +33,7 @@ export const CandidateAttachment = ({ children: attachment }: Props) => {
             </Button>
           </Actions>
         </Box>
-
+        <Divider />
         <Box
           alignItems="center"
           background="neutralLight"
diff --git a/fe/example/src/pages/Candidates/Detail/Notes.tsx b/fe/example/src/pages/Candidates/Detail/Notes.tsx
index 3db8572d7..ac0f999ca 100644
--- a/fe/example/src/pages/Candidates/Detail/Notes.tsx
+++ b/fe/example/src/pages/Candidates/Detail/Notes.tsx
@@ -2,6 +2,7 @@ import {
   Actions,
   Button,
   Card,
+  Divider,
   IconAdd,
   Inline,
   Stack,
@@ -41,17 +42,20 @@ export const CandidateNotes = ({ children: candidate }: Props) => {
 
       {candidate.notes.length ? (
         <Card>
-          <Stack dividers space="large">
+          <Stack space="large">
             {candidate.notes.map((note, index) => (
-              <Stack key={index} space="gutter">
-                <Inline space="small">
-                  <Text>
-                    <Strong>{note.author.formattedName}</Strong> ·{' '}
-                    <RelativeDate date={note.date} />
-                  </Text>
-                </Inline>
-                <Text>{note.text}</Text>
-              </Stack>
+              <React.Fragment key={index}>
+                {index > 0 ? <Divider /> : null}
+                <Stack space="gutter">
+                  <Inline space="small">
+                    <Text>
+                      <Strong>{note.author.formattedName}</Strong> ·{' '}
+                      <RelativeDate date={note.date} />
+                    </Text>
+                  </Inline>
+                  <Text>{note.text}</Text>
+                </Stack>
+              </React.Fragment>
             ))}
           </Stack>
         </Card>
diff --git a/fe/example/src/pages/Candidates/Detail/Profile.tsx b/fe/example/src/pages/Candidates/Detail/Profile.tsx
index edf5430c1..4c7f3567f 100644
--- a/fe/example/src/pages/Candidates/Detail/Profile.tsx
+++ b/fe/example/src/pages/Candidates/Detail/Profile.tsx
@@ -42,13 +42,17 @@ interface Props {
 export const CandidateProfile = ({ children: candidate }: Props) => (
   <Stack space="gutter">
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="4">Career history</Heading>
 
         {candidate.roles.length ? undefined : (
-          <Text tone="promote">
-            <IconPromote /> New to the workforce
-          </Text>
+          <>
+            <Divider />
+
+            <Text tone="promote">
+              <IconPromote /> New to the workforce
+            </Text>
+          </>
         )}
 
         {candidate.roles
@@ -57,33 +61,42 @@ export const CandidateProfile = ({ children: candidate }: Props) => (
             candidate.roles.length === MAX_ROLES ? MAX_ROLES : MAX_ROLES - 1,
           )
           .map((role, index) => (
-            <RoleDetails key={index}>{role}</RoleDetails>
+            <React.Fragment key={index}>
+              <Divider />
+              <RoleDetails>{role}</RoleDetails>
+            </React.Fragment>
           ))}
 
         {candidate.roles.length > MAX_ROLES ? (
-          <AccordionItem
-            id="roles"
-            label={`+${String(candidate.roles.length - MAX_ROLES)} more`}
-          >
-            <Stack space="gutter">
-              <Divider />
-
-              <Stack dividers space="gutter">
-                {candidate.roles.slice(MAX_ROLES - 1).map((role, index) => (
-                  <RoleDetails key={index}>{role}</RoleDetails>
-                ))}
+          <>
+            <Divider />
+            <AccordionItem
+              id="roles"
+              label={`+${String(candidate.roles.length - MAX_ROLES)} more`}
+            >
+              <Stack space="gutter">
+                <Divider />
+
+                <Stack space="gutter">
+                  {candidate.roles.slice(MAX_ROLES - 1).map((role, index) => (
+                    <React.Fragment key={index}>
+                      {index > 0 ? <Divider /> : null}
+                      <RoleDetails>{role}</RoleDetails>
+                    </React.Fragment>
+                  ))}
+                </Stack>
               </Stack>
-            </Stack>
-          </AccordionItem>
+            </AccordionItem>
+          </>
         ) : undefined}
       </Stack>
     </Card>
 
     {candidate.qualifications.length ? (
       <Card>
-        <Stack dividers space="large">
+        <Stack space="large">
           <Heading level="4">Education</Heading>
-
+          <Divider />
           <Stack space="gutter">
             {candidate.qualifications.map((qualification, index) => (
               <Inline key={index} space="gutter">
@@ -102,9 +115,9 @@ export const CandidateProfile = ({ children: candidate }: Props) => (
 
     {candidate.skills.length ? (
       <Card>
-        <Stack dividers space="large">
+        <Stack space="large">
           <Heading level="4">Skills</Heading>
-
+          <Divider />
           <Inline space="gutter">
             {candidate.skills.map((skill, index) => (
               <Tag key={index}>{skill.name}</Tag>
diff --git a/fe/example/src/pages/Candidates/List.tsx b/fe/example/src/pages/Candidates/List.tsx
index 132271a5a..dd3c62da2 100644
--- a/fe/example/src/pages/Candidates/List.tsx
+++ b/fe/example/src/pages/Candidates/List.tsx
@@ -1,4 +1,4 @@
-import { Heading, Stack } from 'braid-design-system';
+import { Divider, Heading, Stack } from 'braid-design-system';
 import React from 'react';
 
 import { Header } from '../../components/Header';
@@ -6,11 +6,11 @@ import { CANDIDATES } from '../../data/candidates';
 import { CandidateList } from '../../widgets/CandidateList';
 
 export const CandidateListPage = () => (
-  <Stack dividers space="none">
+  <Stack space="none">
     <Header>
       <Heading level="3">Candidates</Heading>
     </Header>
-
+    <Divider />
     {/* TODO: support pagination */}
     <CandidateList candidates={CANDIDATES.slice(0, 25)} />
   </Stack>
diff --git a/fe/example/src/pages/Home.tsx b/fe/example/src/pages/Home.tsx
index cec0c38c5..ba57474b5 100644
--- a/fe/example/src/pages/Home.tsx
+++ b/fe/example/src/pages/Home.tsx
@@ -1,15 +1,22 @@
-import { Box, ContentBlock, Heading, Stack, Text } from 'braid-design-system';
+import {
+  Box,
+  ContentBlock,
+  Divider,
+  Heading,
+  Stack,
+  Text,
+} from 'braid-design-system';
 import React from 'react';
 import { SmartTextLink } from 'scoobie';
 
 import { Header } from '../components/Header';
 
 export const HomePage = () => (
-  <Stack dividers space="none">
+  <Stack space="none">
     <Header>
       <Heading level="3">🚧</Heading>
     </Header>
-
+    <Divider />
     <ContentBlock>
       <Box padding="gutter">
         <Box
diff --git a/fe/example/src/pages/Oops.tsx b/fe/example/src/pages/Oops.tsx
index 2003f9ad6..175786030 100644
--- a/fe/example/src/pages/Oops.tsx
+++ b/fe/example/src/pages/Oops.tsx
@@ -2,6 +2,7 @@ import {
   Alert,
   Box,
   ContentBlock,
+  Divider,
   Heading,
   Stack,
   Text,
@@ -11,11 +12,11 @@ import React from 'react';
 import { Header } from '../components/Header';
 
 export const OopsPage = () => (
-  <Stack dividers space="none">
+  <Stack space="none">
     <Header>
       <Heading level="3">Oops!</Heading>
     </Header>
-
+    <Divider />
     <ContentBlock width="large">
       <Box padding="gutter">
         <Alert tone="info">
diff --git a/fe/example/src/pages/Positions/Detail.tsx b/fe/example/src/pages/Positions/Detail.tsx
index 2e5140512..57fc037cd 100644
--- a/fe/example/src/pages/Positions/Detail.tsx
+++ b/fe/example/src/pages/Positions/Detail.tsx
@@ -2,6 +2,7 @@ import {
   Badge,
   Box,
   ContentBlock,
+  Divider,
   Heading,
   IconPeople,
   IconVisibility,
@@ -154,7 +155,7 @@ const PositionDetails = () => {
   const candidates = CANDIDATES_BY_POSITION_ID[position.id];
 
   return (
-    <Stack dividers space="none">
+    <Stack space="none">
       <Header>
         <Heading level="3">
           <Breadcrumbs>
@@ -168,7 +169,7 @@ const PositionDetails = () => {
           </Breadcrumbs>
         </Heading>
       </Header>
-
+      <Divider />
       <Box background="surface" padding="gutter">
         <Stack space="medium">
           {preferences.devTools ? (
@@ -203,6 +204,7 @@ const PositionDetails = () => {
           </Text>
         </Stack>
       </Box>
+      <Divider />
       <PositionDetailTabs
         ads={ads}
         candidates={candidates}
diff --git a/fe/example/src/pages/Positions/List.tsx b/fe/example/src/pages/Positions/List.tsx
index b987d20e2..50819fc1e 100644
--- a/fe/example/src/pages/Positions/List.tsx
+++ b/fe/example/src/pages/Positions/List.tsx
@@ -1,4 +1,4 @@
-import { Heading, Stack } from 'braid-design-system';
+import { Divider, Heading, Stack } from 'braid-design-system';
 import React from 'react';
 
 import { Header } from '../../components/Header';
@@ -6,11 +6,11 @@ import { POSITIONS } from '../../data/positions';
 import { PositionList } from '../../widgets/PositionList';
 
 export const PositionListPage = () => (
-  <Stack dividers space="none">
+  <Stack space="none">
     <Header>
       <Heading level="3">Positions</Heading>
     </Header>
-
+    <Divider />
     <PositionList>
       {
         // TODO: support pagination
diff --git a/fe/example/src/pages/Positions/New.tsx b/fe/example/src/pages/Positions/New.tsx
index 2773642cd..fe41fcfa0 100644
--- a/fe/example/src/pages/Positions/New.tsx
+++ b/fe/example/src/pages/Positions/New.tsx
@@ -1,4 +1,10 @@
-import { Box, ContentBlock, Heading, Stack } from 'braid-design-system';
+import {
+  Box,
+  ContentBlock,
+  Divider,
+  Heading,
+  Stack,
+} from 'braid-design-system';
 import React from 'react';
 
 import { Breadcrumbs } from '../../components/Breadcrumbs';
@@ -7,7 +13,7 @@ import { Header } from '../../components/Header';
 import { NewPositionForm } from '../../widgets/NewPositionForm';
 
 export const PositionNewPage = () => (
-  <Stack dividers space="none">
+  <Stack space="none">
     <Header>
       <Heading level="3">
         <Breadcrumbs>
@@ -21,7 +27,7 @@ export const PositionNewPage = () => (
         </Breadcrumbs>
       </Heading>
     </Header>
-
+    <Divider />
     <ContentBlock width="large">
       <Box padding="gutter">
         <ClientOnly>
diff --git a/fe/example/src/pages/Positions/Questionnaires.tsx b/fe/example/src/pages/Positions/Questionnaires.tsx
index a173bbe63..3225ad96f 100644
--- a/fe/example/src/pages/Positions/Questionnaires.tsx
+++ b/fe/example/src/pages/Positions/Questionnaires.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   ContentBlock,
+  Divider,
   Heading,
   Stack,
 } from 'braid-design-system';
@@ -17,11 +18,11 @@ export const PositionQuestionnairePage = () => {
   const [selection, setSelection] = useState<Questionnaire>();
 
   return (
-    <Stack dividers space="none">
+    <Stack space="none">
       <Header>
         <Heading level="3">Questionnaires</Heading>
       </Header>
-
+      <Divider />
       <ContentBlock width="large">
         <Box padding="gutter">
           <Stack space="gutter">
diff --git a/fe/example/src/widgets/NewPositionForm.tsx b/fe/example/src/widgets/NewPositionForm.tsx
index c319f3c19..605b37f84 100644
--- a/fe/example/src/widgets/NewPositionForm.tsx
+++ b/fe/example/src/widgets/NewPositionForm.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   Card,
   Checkbox,
+  Divider,
   Heading,
   Notice,
   Stack,
@@ -30,7 +31,7 @@ export const NewPositionForm = () => {
   });
 
   return (
-    <Stack dividers space="none">
+    <Stack space="none">
       <Card>
         <Stack space="large">
           <TextField
@@ -59,7 +60,7 @@ export const NewPositionForm = () => {
           />
         </Stack>
       </Card>
-
+      <Divider />
       <Card>
         <Stack space="large">
           <Heading level="4">Advertise your position</Heading>
@@ -85,8 +86,13 @@ export const NewPositionForm = () => {
         </Stack>
       </Card>
 
-      {seekAd ? <NewAdForm initial={{ title: name }} /> : undefined}
-
+      {seekAd ? (
+        <>
+          <Divider />
+          <NewAdForm initial={{ title: name }} />
+        </>
+      ) : undefined}
+      <Divider />
       <Card>
         <Actions>
           <Button tone="brandAccent" type="submit">
diff --git a/fe/lib/components/JobCategoryLookup/JobCategoryLookup.tsx b/fe/lib/components/JobCategoryLookup/JobCategoryLookup.tsx
index 89c408e1d..457247c99 100644
--- a/fe/lib/components/JobCategoryLookup/JobCategoryLookup.tsx
+++ b/fe/lib/components/JobCategoryLookup/JobCategoryLookup.tsx
@@ -1,5 +1,6 @@
 import { type ApolloClient, useLazyQuery } from '@apollo/client';
 import {
+  Divider,
   FieldMessage,
   Loader,
   Notice,
@@ -58,7 +59,7 @@ export const JobCategoryLookup = ({
   }, [jobCategoryLookup, debouncedJobCategoryId]);
 
   return (
-    <Stack dividers space="large">
+    <Stack space="large">
       <Stack space="medium">
         <TextField
           aria-label="Job category OID"
@@ -78,36 +79,47 @@ export const JobCategoryLookup = ({
           }
         />
       </Stack>
-
-      {categoryLoading && <Loader />}
+      {categoryLoading && (
+        <>
+          <Divider />
+          <Loader />
+        </>
+      )}
 
       {categoryError && (
-        <FieldMessage
-          id="jobCategoryLookupError"
-          message="Sorry, we couldn’t retrieve this job category. Please try again."
-          tone="critical"
-        />
+        <>
+          <Divider />
+          <FieldMessage
+            id="jobCategoryLookupError"
+            message="Sorry, we couldn’t retrieve this job category. Please try again."
+            tone="critical"
+          />
+        </>
       )}
 
       {categoryData &&
         (categoryData.jobCategory ? (
           <>
+            <Divider />
             <BreadCrumbsString
               segments={flattenResourceByKey(
                 categoryData.jobCategory,
                 'parent',
               ).map((x) => ({ name: x.name, key: x.id.value }))}
             />
-
+            <Divider />
             <SeekApiResponse
               data={categoryData.jobCategory}
               id="jobCategoryLookupSeekApiResponse"
             />
           </>
         ) : (
-          <Notice tone="info">
-            <Text>Hmm, we can’t find that job category.</Text>
-          </Notice>
+          <>
+            <Divider />
+            <Notice tone="info">
+              <Text>Hmm, we can’t find that job category.</Text>
+            </Notice>
+          </>
         ))}
     </Stack>
   );
diff --git a/fe/lib/components/LocationLookup/LocationLookup.tsx b/fe/lib/components/LocationLookup/LocationLookup.tsx
index 45ec0ed86..e1eca3120 100644
--- a/fe/lib/components/LocationLookup/LocationLookup.tsx
+++ b/fe/lib/components/LocationLookup/LocationLookup.tsx
@@ -1,5 +1,6 @@
 import { type ApolloClient, useLazyQuery } from '@apollo/client';
 import {
+  Divider,
   FieldMessage,
   Loader,
   Notice,
@@ -55,7 +56,7 @@ export const LocationLookup = ({
   }, [locationLookup, debouncedLocationId]);
 
   return (
-    <Stack dividers space="large">
+    <Stack space="large">
       <Stack space="medium">
         <TextField
           aria-label="Location OID"
@@ -76,35 +77,47 @@ export const LocationLookup = ({
         />
       </Stack>
 
-      {locationLoading && <Loader />}
+      {locationLoading && (
+        <>
+          <Divider />
+          <Loader />
+        </>
+      )}
 
       {locationError && (
-        <FieldMessage
-          id="locationLookupError"
-          message="Sorry, we couldn’t retrieve this location. Please try again."
-          tone="critical"
-        />
+        <>
+          <Divider />
+          <FieldMessage
+            id="locationLookupError"
+            message="Sorry, we couldn’t retrieve this location. Please try again."
+            tone="critical"
+          />
+        </>
       )}
 
       {locationData &&
         (locationData.location ? (
           <>
+            <Divider />
             <BreadCrumbsString
               segments={flattenResourceByKey(
                 locationData.location,
                 'parent',
               ).map((x) => ({ name: x.name, key: x.id.value }))}
             />
-
+            <Divider />
             <SeekApiResponse
               data={locationData.location}
               id="locationLookupSeekApiResponse"
             />
           </>
         ) : (
-          <Notice tone="info">
-            <Text>Hmm, we can’t find that location.</Text>
-          </Notice>
+          <>
+            <Divider />
+            <Notice tone="info">
+              <Text>Hmm, we can’t find that location.</Text>
+            </Notice>
+          </>
         ))}
     </Stack>
   );
diff --git a/fe/lib/components/LocationSelectMap/LocationSelectMap.tsx b/fe/lib/components/LocationSelectMap/LocationSelectMap.tsx
index fe4aa5fc5..4405db7b7 100644
--- a/fe/lib/components/LocationSelectMap/LocationSelectMap.tsx
+++ b/fe/lib/components/LocationSelectMap/LocationSelectMap.tsx
@@ -5,6 +5,7 @@ import {
   ButtonIcon,
   Column,
   Columns,
+  Divider,
   IconClear,
   Stack,
   Text,
@@ -91,7 +92,7 @@ export const LocationSelectMap = ({
 
   const NearestLocationsCards = () => (
     <Box borderRadius="standard" background="surface">
-      <Stack dividers space="none">
+      <Stack space="none">
         <Box
           paddingX={{ desktop: 'medium', tablet: 'none', mobile: 'none' }}
           paddingY={{ desktop: 'xsmall', tablet: 'medium', mobile: 'medium' }}
@@ -116,22 +117,24 @@ export const LocationSelectMap = ({
           </Columns>
         </Box>
         {nearestLocations?.map((location) => (
-          <Box
-            className={styles.card}
-            cursor="pointer"
-            paddingX={{ desktop: 'medium', tablet: 'none', mobile: 'none' }}
-            paddingY="medium"
-            key={location.id.value}
-            onClick={() => {
-              onLocationSelected(location);
-              setShowSuggestions(false);
-            }}
-          >
-            <Stack space="small">
-              <Text size="small">{location.contextualName}</Text>
-              <InlineCode>{location.id.value}</InlineCode>
-            </Stack>
-          </Box>
+          <React.Fragment key={location.id.value}>
+            <Divider />
+            <Box
+              className={styles.card}
+              cursor="pointer"
+              paddingX={{ desktop: 'medium', tablet: 'none', mobile: 'none' }}
+              paddingY="medium"
+              onClick={() => {
+                onLocationSelected(location);
+                setShowSuggestions(false);
+              }}
+            >
+              <Stack space="small">
+                <Text size="small">{location.contextualName}</Text>
+                <InlineCode>{location.id.value}</InlineCode>
+              </Stack>
+            </Box>
+          </React.Fragment>
         ))}
       </Stack>
     </Box>
@@ -188,7 +191,7 @@ export const LocationSelectMap = ({
       {!isDesktopOrAbove && (
         <>
           {hasNearestLocations ? (
-            <Stack dividers space="none">
+            <Stack space="none">
               <NearestLocationsCards />
             </Stack>
           ) : (
diff --git a/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx b/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx
index f1b181c66..2e191ef81 100644
--- a/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx
+++ b/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   Column,
   Columns,
+  Divider,
   FieldMessage,
   Stack,
   Text,
@@ -148,15 +149,17 @@ export default ({ options, setOptionList }: SelectOptionsProps) => {
         </Stack>
       )}
 
-      <Stack dividers space="small">
-        {options.map(({ text, preferredIndicator }) => (
-          <DisplayOption
-            key={text}
-            text={text}
-            preferredIndicator={preferredIndicator}
-            setPreferred={setPreferred}
-            removeItem={removeItem(text)}
-          />
+      <Stack space="small">
+        {options.map(({ text, preferredIndicator }, index) => (
+          <React.Fragment key={text}>
+            {index > 0 ? <Divider /> : null}
+            <DisplayOption
+              text={text}
+              preferredIndicator={preferredIndicator}
+              setPreferred={setPreferred}
+              removeItem={removeItem(text)}
+            />
+          </React.Fragment>
         ))}
       </Stack>
     </Stack>
diff --git a/fe/lib/components/QuestionnaireBuilder/QuestionnaireBuilder.tsx b/fe/lib/components/QuestionnaireBuilder/QuestionnaireBuilder.tsx
index b5c2644be..9f545a91d 100644
--- a/fe/lib/components/QuestionnaireBuilder/QuestionnaireBuilder.tsx
+++ b/fe/lib/components/QuestionnaireBuilder/QuestionnaireBuilder.tsx
@@ -1,4 +1,11 @@
-import { Card, Column, Columns, Heading, Stack } from 'braid-design-system';
+import {
+  Card,
+  Column,
+  Columns,
+  Divider,
+  Heading,
+  Stack,
+} from 'braid-design-system';
 import {
   Fragment,
   type JSX,
@@ -79,7 +86,7 @@ export const QuestionnaireBuilder = ({
   }, [wrapper]);
 
   return (
-    <Stack space="large" dividers>
+    <Stack space="large">
       <Columns collapseBelow="tablet" space="large">
         <Column width="1/2">
           <Wrapper>
@@ -100,16 +107,19 @@ export const QuestionnaireBuilder = ({
       </Columns>
 
       {showGraphqlOutput ? (
-        <Wrapper>
-          <Stack space="large">
-            <Heading level="3">GraphQL output</Heading>
+        <>
+          <Divider />
+          <Wrapper>
+            <Stack space="large">
+              <Heading level="3">GraphQL output</Heading>
 
-            <QuestionnaireQueryOutput
-              components={formBuilderState}
-              hirerId={hirerId}
-            />
-          </Stack>
-        </Wrapper>
+              <QuestionnaireQueryOutput
+                components={formBuilderState}
+                hirerId={hirerId}
+              />
+            </Stack>
+          </Wrapper>
+        </>
       ) : null}
     </Stack>
   );
diff --git a/fe/lib/private/ConnectionPagination.tsx b/fe/lib/private/ConnectionPagination.tsx
index 527a9dbd8..de7e91910 100644
--- a/fe/lib/private/ConnectionPagination.tsx
+++ b/fe/lib/private/ConnectionPagination.tsx
@@ -1,12 +1,13 @@
 import {
   Column,
   Columns,
+  Divider,
   IconChevron,
   Stack,
   Text,
   TextLinkButton,
 } from 'braid-design-system';
-import type { JSX } from 'react';
+import type { ReactElement } from 'react';
 
 import type { PageInfo } from '../types/seekApi.graphql';
 
@@ -23,7 +24,7 @@ export type OnClickHandler = (event: {
 }) => void;
 
 interface Props<T> {
-  children: (edges: T[]) => JSX.Element;
+  children: (edges: T[]) => ReactElement;
   connection: Connection<T>;
   dividers?: true;
   onPagination: OnClickHandler;
@@ -40,49 +41,52 @@ export const ConnectionPagination = <T,>({
   onPagination,
   pageSize,
 }: Props<T>) => (
-  <Stack dividers={dividers} space="large">
+  <Stack space="large">
     {render(edges)}
 
     {hasPreviousPage || hasNextPage ? (
-      <Columns space="large">
-        {hasPreviousPage && startCursor ? (
-          <Column>
-            <Text align="left">
-              <TextLinkButton
-                onClick={() =>
-                  onPagination({
-                    after: null,
-                    before: startCursor,
-                    first: null,
-                    last: pageSize,
-                  })
-                }
-              >
-                <IconChevron direction="left" /> Previous
-              </TextLinkButton>
-            </Text>
-          </Column>
-        ) : null}
+      <>
+        {dividers ? <Divider /> : null}
+        <Columns space="large">
+          {hasPreviousPage && startCursor ? (
+            <Column>
+              <Text align="left">
+                <TextLinkButton
+                  onClick={() =>
+                    onPagination({
+                      after: null,
+                      before: startCursor,
+                      first: null,
+                      last: pageSize,
+                    })
+                  }
+                >
+                  <IconChevron direction="left" /> Previous
+                </TextLinkButton>
+              </Text>
+            </Column>
+          ) : null}
 
-        {hasNextPage && endCursor ? (
-          <Column>
-            <Text align="right">
-              <TextLinkButton
-                onClick={() =>
-                  onPagination({
-                    after: endCursor,
-                    before: null,
-                    first: pageSize,
-                    last: null,
-                  })
-                }
-              >
-                Next <IconChevron direction="right" />
-              </TextLinkButton>
-            </Text>
-          </Column>
-        ) : null}
-      </Columns>
+          {hasNextPage && endCursor ? (
+            <Column>
+              <Text align="right">
+                <TextLinkButton
+                  onClick={() =>
+                    onPagination({
+                      after: endCursor,
+                      before: null,
+                      first: pageSize,
+                      last: null,
+                    })
+                  }
+                >
+                  Next <IconChevron direction="right" />
+                </TextLinkButton>
+              </Text>
+            </Column>
+          ) : null}
+        </Columns>
+      </>
     ) : null}
   </Stack>
 );
diff --git a/fe/package.json b/fe/package.json
index 336c5d8dc..c443489d9 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -27,7 +27,7 @@
     "@types/react-dom": "18.3.0",
     "@vanilla-extract/css": "1.15.5",
     "@vanilla-extract/css-utils": "0.1.4",
-    "braid-design-system": "32.23.1",
+    "braid-design-system": "32.24.1",
     "clsx": "2.1.1",
     "content-disposition": "0.5.4",
     "date-fns": "3.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 658ad9a1e..3a601012b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,8 +116,8 @@ importers:
         specifier: 0.1.4
         version: 0.1.4
       braid-design-system:
-        specifier: 32.23.1
-        version: 32.23.1(@types/react@18.3.5)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sku@13.1.3(@storybook/react-webpack5@8.2.9(@swc/core@1.7.24)(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(typescript@5.5.4))(@types/node@22.5.4)(@types/react@18.3.5)(react@18.3.1)(terser@5.32.0)(ts-node@10.9.2(@swc/core@1.7.24)(@types/node@22.5.4)(typescript@5.5.4))(type-fest@2.19.0)(webpack-hot-middleware@2.26.1))
+        specifier: 32.24.1
+        version: 32.24.1(@types/react@18.3.5)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sku@13.1.3(@storybook/react-webpack5@8.2.9(@swc/core@1.7.24)(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(typescript@5.5.4))(@types/node@22.5.4)(@types/react@18.3.5)(react@18.3.1)(terser@5.32.0)(ts-node@10.9.2(@swc/core@1.7.24)(@types/node@22.5.4)(typescript@5.5.4))(type-fest@2.19.0)(webpack-hot-middleware@2.26.1))
       clsx:
         specifier: 2.1.1
         version: 2.1.1
@@ -147,7 +147,7 @@ importers:
         version: 6.22.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       scoobie:
         specifier: 16.0.0
-        version: 16.0.0(gxlncul2oeeguxrid7bhvgmbge)
+        version: 16.0.0(a3bfmkymwl64h554yf7kd3w7ji)
       storybook:
         specifier: 8.2.9
         version: 8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2))
@@ -2953,8 +2953,8 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  braid-design-system@32.23.1:
-    resolution: {integrity: sha512-LlkJdXLkYDJQuPbmUiO6rnUKbPCbNq99/2zJTbMwLUo039PekeBobw2gzMS0xuinGQXuOaX0sDuiluUCivzjkw==}
+  braid-design-system@32.24.1:
+    resolution: {integrity: sha512-93Co2nr5iiIjTpmC5C6BYrb3pXC09Z24UNTBTED2AqwI9pKqxYZN5yp9hAmmIo6fD+vUrS6vd6YS0S3ejEZOrQ==}
     hasBin: true
     peerDependencies:
       react: ^17 || ^18
@@ -11483,7 +11483,7 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  braid-design-system@32.23.1(@types/react@18.3.5)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sku@13.1.3(@storybook/react-webpack5@8.2.9(@swc/core@1.7.24)(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(typescript@5.5.4))(@types/node@22.5.4)(@types/react@18.3.5)(react@18.3.1)(terser@5.32.0)(ts-node@10.9.2(@swc/core@1.7.24)(@types/node@22.5.4)(typescript@5.5.4))(type-fest@2.19.0)(webpack-hot-middleware@2.26.1)):
+  braid-design-system@32.24.1(@types/react@18.3.5)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sku@13.1.3(@storybook/react-webpack5@8.2.9(@swc/core@1.7.24)(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(typescript@5.5.4))(@types/node@22.5.4)(@types/react@18.3.5)(react@18.3.1)(terser@5.32.0)(ts-node@10.9.2(@swc/core@1.7.24)(@types/node@22.5.4)(typescript@5.5.4))(type-fest@2.19.0)(webpack-hot-middleware@2.26.1)):
     dependencies:
       '@capsizecss/core': 4.1.2
       '@capsizecss/metrics': 3.2.0
@@ -15582,7 +15582,7 @@ snapshots:
       ajv-formats: 2.1.1(ajv@8.17.1)
       ajv-keywords: 5.1.0(ajv@8.17.1)
 
-  scoobie@16.0.0(gxlncul2oeeguxrid7bhvgmbge):
+  scoobie@16.0.0(a3bfmkymwl64h554yf7kd3w7ji):
     dependencies:
       '@capsizecss/core': 4.1.2
       '@mdx-js/react': 1.6.22(react@18.3.1)
@@ -15590,7 +15590,7 @@ snapshots:
       '@vanilla-extract/css': 1.15.5(babel-plugin-macros@3.1.0)
       '@vanilla-extract/css-utils': 0.1.4
       babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.94.0(@swc/core@1.7.24)(esbuild@0.21.5))
-      braid-design-system: 32.23.1(@types/react@18.3.5)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sku@13.1.3(@storybook/react-webpack5@8.2.9(@swc/core@1.7.24)(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(typescript@5.5.4))(@types/node@22.5.4)(@types/react@18.3.5)(react@18.3.1)(terser@5.32.0)(ts-node@10.9.2(@swc/core@1.7.24)(@types/node@22.5.4)(typescript@5.5.4))(type-fest@2.19.0)(webpack-hot-middleware@2.26.1))
+      braid-design-system: 32.24.1(@types/react@18.3.5)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sku@13.1.3(@storybook/react-webpack5@8.2.9(@swc/core@1.7.24)(esbuild@0.21.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.9(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(typescript@5.5.4))(@types/node@22.5.4)(@types/react@18.3.5)(react@18.3.1)(terser@5.32.0)(ts-node@10.9.2(@swc/core@1.7.24)(@types/node@22.5.4)(typescript@5.5.4))(type-fest@2.19.0)(webpack-hot-middleware@2.26.1))
       clsx: 2.1.1
       find-up: 5.0.0
       fs-extra: 11.2.0