diff --git a/.storybook/main.ts b/.storybook/main.ts
index 6de93c74..e4d400a2 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,9 +1,6 @@
 import { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
-  stories: [
-    '../libs/design/**/*.stories.tsx',
-    '../libs/pages/**/*.stories.tsx',
-  ],
+  stories: ['../libs/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-essentials',
     'storybook-addon-apollo-client',
diff --git a/libs/design/DashboardCard/CollapsibleDashboardCard.stories.tsx b/libs/design/DashboardCard/CollapsibleDashboardCard.stories.tsx
index 5d9675d4..673d5120 100644
--- a/libs/design/DashboardCard/CollapsibleDashboardCard.stories.tsx
+++ b/libs/design/DashboardCard/CollapsibleDashboardCard.stories.tsx
@@ -4,7 +4,7 @@ import { DashboardTitle } from '../DashboardTitle';
 import { CollapsibleDashboardCard } from './CollapsibleDashboardCard';
 
 export default {
-  title: 'CollapsibleDashboardCard',
+  title: 'design/CollapsibleDashboardCard',
   component: CollapsibleDashboardCard,
 } as Meta<typeof CollapsibleDashboardCard>;
 
diff --git a/libs/design/DashboardCard/DashboardCard.stories.tsx b/libs/design/DashboardCard/DashboardCard.stories.tsx
index 6863fc4f..83651215 100644
--- a/libs/design/DashboardCard/DashboardCard.stories.tsx
+++ b/libs/design/DashboardCard/DashboardCard.stories.tsx
@@ -5,7 +5,6 @@ import { DashboardTitle } from '../DashboardTitle';
 import { DashboardCard } from './DashboardCard';
 
 export default {
-  title: 'DashboardCard',
   component: DashboardCard,
 } as Meta<typeof DashboardCard>;
 
diff --git a/libs/design/NavLink/NavLink.stories.tsx b/libs/design/NavLink/NavLink.stories.tsx
index 29cdadcd..4bbdf7d2 100644
--- a/libs/design/NavLink/NavLink.stories.tsx
+++ b/libs/design/NavLink/NavLink.stories.tsx
@@ -7,7 +7,6 @@ import { NavLink } from './NavLink';
 
 export default {
   component: NavLink,
-  title: 'NavLink',
   render(args) {
     return (
       <Stack sx={{ width: 300 }}>
diff --git a/libs/design/NavLink/NavLinks.stories.tsx b/libs/design/NavLink/NavLinks.stories.tsx
index 052c7c15..a6b504a0 100644
--- a/libs/design/NavLink/NavLinks.stories.tsx
+++ b/libs/design/NavLink/NavLinks.stories.tsx
@@ -7,7 +7,7 @@ import { NavLinks } from './NavLinks';
 
 export default {
   component: NavLinks,
-  title: 'NavLinks',
+  title: 'design/NavLinks',
   render: args => (
     <Stack sx={{ width: 300 }}>
       <NavLinks {...args} />
diff --git a/libs/pages/Households/HouseholdDetail/HouseholdDetail.tsx b/libs/pages/Households/HouseholdDetail/HouseholdDetail.tsx
index 595a1dab..f3e925b5 100644
--- a/libs/pages/Households/HouseholdDetail/HouseholdDetail.tsx
+++ b/libs/pages/Households/HouseholdDetail/HouseholdDetail.tsx
@@ -25,14 +25,13 @@ import {
 import { ArrowUpIcon, CheckIcon, EditIcon, TrashIcon } from '@camp/icons';
 import { errorMessages, messages } from '@camp/messages';
 import { AppRoute, useNavigate, useParams } from '@camp/router';
+import { InformationBadge, SeverityBadge } from '@camp/shared-components';
 import { tid } from '@camp/test';
 import { isNull } from '@fullstacksjs/toolbox';
 import { Button, Flex, Title } from '@mantine/core';
 import { useBoolean } from 'ahooks';
 import { useForm } from 'react-hook-form';
 
-import { InformationBadge } from '../../+components/InformationBadge';
-import { SeverityBadge } from '../../+components/SeverityBadge';
 import { openDeleteHouseholdModal } from '../DeleteHouseholdModal';
 import { householdDetailIds as ids } from './HouseholdDetail.ids';
 import { HouseholderDetail } from './HouseholderDetail';
diff --git a/libs/pages/Households/HouseholdDetail/MemberForm/MemberFormHeader.tsx b/libs/pages/Households/HouseholdDetail/MemberForm/MemberFormHeader.tsx
index ca4bfcb1..fdf58d8c 100644
--- a/libs/pages/Households/HouseholdDetail/MemberForm/MemberFormHeader.tsx
+++ b/libs/pages/Households/HouseholdDetail/MemberForm/MemberFormHeader.tsx
@@ -1,8 +1,7 @@
 import { messages } from '@camp/messages';
+import { InformationBadge } from '@camp/shared-components';
 import { Group, Title } from '@mantine/core';
 
-import { InformationBadge } from '../../../+components/InformationBadge';
-
 const t = messages.member;
 
 interface Props {
diff --git a/libs/pages/Households/HouseholdList/HouseholdList.tsx b/libs/pages/Households/HouseholdList/HouseholdList.tsx
index 9f13ac78..dd616765 100644
--- a/libs/pages/Households/HouseholdList/HouseholdList.tsx
+++ b/libs/pages/Households/HouseholdList/HouseholdList.tsx
@@ -4,6 +4,7 @@ import { DashboardCard, DashboardTitle, showNotification } from '@camp/design';
 import { householdColumnHelper } from '@camp/domain';
 import { errorMessages, messages } from '@camp/messages';
 import { AppRoute } from '@camp/router';
+import { InformationBadge, SeverityBadge } from '@camp/shared-components';
 import { tid } from '@camp/test';
 import { isEmpty } from '@fullstacksjs/toolbox';
 import { Group } from '@mantine/core';
@@ -11,8 +12,6 @@ import type { PaginationState, SortingState } from '@tanstack/react-table';
 import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { useState } from 'react';
 
-import { InformationBadge } from '../../+components/InformationBadge';
-import { SeverityBadge } from '../../+components/SeverityBadge';
 import { CreateHouseholdButton } from '../CreateHousehold';
 import { HouseholdActionButton } from '../HouseholdActionButton';
 import { HouseholdEmptyState } from '../HouseholdEmptyState';
diff --git a/libs/pages/+components/InformationBadge/InformationBadge.stories.tsx b/libs/shared-components/InformationBadge/InformationBadge.stories.tsx
similarity index 100%
rename from libs/pages/+components/InformationBadge/InformationBadge.stories.tsx
rename to libs/shared-components/InformationBadge/InformationBadge.stories.tsx
diff --git a/libs/pages/+components/InformationBadge/InformationBadge.tsx b/libs/shared-components/InformationBadge/InformationBadge.tsx
similarity index 100%
rename from libs/pages/+components/InformationBadge/InformationBadge.tsx
rename to libs/shared-components/InformationBadge/InformationBadge.tsx
diff --git a/libs/pages/+components/InformationBadge/index.ts b/libs/shared-components/InformationBadge/index.ts
similarity index 100%
rename from libs/pages/+components/InformationBadge/index.ts
rename to libs/shared-components/InformationBadge/index.ts
diff --git a/libs/pages/+components/SeverityBadge/SeverityBadge.stories.tsx b/libs/shared-components/SeverityBadge/SeverityBadge.stories.tsx
similarity index 100%
rename from libs/pages/+components/SeverityBadge/SeverityBadge.stories.tsx
rename to libs/shared-components/SeverityBadge/SeverityBadge.stories.tsx
diff --git a/libs/pages/+components/SeverityBadge/SeverityBadge.tsx b/libs/shared-components/SeverityBadge/SeverityBadge.tsx
similarity index 100%
rename from libs/pages/+components/SeverityBadge/SeverityBadge.tsx
rename to libs/shared-components/SeverityBadge/SeverityBadge.tsx
diff --git a/libs/pages/+components/SeverityBadge/index.ts b/libs/shared-components/SeverityBadge/index.ts
similarity index 100%
rename from libs/pages/+components/SeverityBadge/index.ts
rename to libs/shared-components/SeverityBadge/index.ts
diff --git a/libs/shared-components/index.ts b/libs/shared-components/index.ts
new file mode 100644
index 00000000..a4f5679b
--- /dev/null
+++ b/libs/shared-components/index.ts
@@ -0,0 +1,2 @@
+export * from './InformationBadge';
+export * from './SeverityBadge';
diff --git a/tsconfig.json b/tsconfig.json
index d44395a8..3d7f45ca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,7 @@
       "@camp/messages": ["./app/messages.ts"],
       "@camp/pages/*": ["./libs/pages/*"],
       "@camp/router": ["./libs/router/index.ts"],
+      "@camp/shared-components": ["./libs/shared-components/index.ts"],
       "@camp/test": ["./libs/test/index.ts"],
       "@camp/zod-addons": ["./libs/zod-addons/index.ts"],
       "@camp/zod-addons/monkey-patch": ["./libs/zod-addons/monkeyPatchZod.ts"]