diff --git a/package.json b/package.json
index b9234b229..52da909ff 100644
--- a/package.json
+++ b/package.json
@@ -189,7 +189,8 @@
   "msw": {
     "workerDirectory": [
       "e2e",
-      "e2e/public"
+      "e2e/public",
+      "sdk-app/public"
     ]
   }
 }
diff --git a/sdk-app/public/sample-documents/w9.pdf b/sdk-app/public/sample-documents/w9.pdf
new file mode 100644
index 000000000..c5eb64678
Binary files /dev/null and b/sdk-app/public/sample-documents/w9.pdf differ
diff --git a/sdk-app/src/Sidebar.module.scss b/sdk-app/src/Sidebar.module.scss
index b57b91ff0..636665fa9 100644
--- a/sdk-app/src/Sidebar.module.scss
+++ b/sdk-app/src/Sidebar.module.scss
@@ -51,48 +51,6 @@
   border-bottom: 0.0625rem solid var(--color-border);
 }
 
-.shortcutHint {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  width: 100%;
-  margin-bottom: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  border-radius: 0.25rem;
-  background: transparent;
-  font: inherit;
-  font-size: 0.6875rem;
-  text-align: left;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    color: var(--color-text);
-    background: var(--color-hover-bg);
-  }
-
-  &:focus-visible {
-    outline: 0.125rem solid var(--color-active);
-    outline-offset: 0.125rem;
-  }
-}
-
-.shortcutHintKey {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.125rem;
-  padding: 0 0.3125rem;
-  border: 0.0625rem solid var(--color-border);
-  border-radius: 0.1875rem;
-  background: var(--color-badge-bg);
-  font-family: monospace;
-  font-size: 0.625rem;
-  color: var(--color-text);
-}
-
 .searchRow {
   display: flex;
   align-items: stretch;
@@ -158,10 +116,8 @@
   justify-content: space-between;
   padding: 0.5rem 1rem;
   cursor: pointer;
-  font-weight: 500;
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
   user-select: none;
+
   &:hover {
     color: var(--color-text);
   }
@@ -173,14 +129,17 @@
   border-radius: 0.625rem;
   font-size: 0.6875rem;
   font-weight: 500;
+  color: var(--color-text-muted);
 }
 
 .categoryTitle {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  font-weight: 500;
-  font-size: 0.8rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
   color: var(--color-text-muted);
 }
 
@@ -197,25 +156,47 @@
   list-style: none;
 }
 
-.item a {
+.item > a {
   display: block;
-  padding: 0.375rem 1rem 0.375rem 1.75rem;
+  padding: 0.375rem 1rem 0.375rem 1.5rem;
   color: var(--color-text);
   text-decoration: none;
   font-size: 0.8125rem;
-  border-left: 0.1875rem solid transparent;
+  font-weight: 500;
+  transition:
+    background 0.1s,
+    color 0.1s;
+
+  &:hover {
+    background: var(--color-hover-bg);
+  }
+
+  &:global(.active) {
+    color: var(--color-active);
+  }
+}
+
+.subItems {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.subItem a {
+  display: block;
+  padding: 0.3125rem 1rem 0.3125rem 2.25rem;
+  color: var(--color-text-muted);
+  text-decoration: none;
+  font-size: 0.75rem;
   transition:
     background 0.1s,
-    border-color 0.1s;
+    color 0.1s;
 
   &:hover {
     background: var(--color-hover-bg);
   }
 
   &:global(.active) {
-    background: var(--color-active-bg);
-    border-left-color: var(--color-active);
     color: var(--color-active);
-    font-weight: 500;
   }
 }
diff --git a/sdk-app/src/Sidebar.tsx b/sdk-app/src/Sidebar.tsx
index 8d3f1cb24..8b0cf5cf9 100644
--- a/sdk-app/src/Sidebar.tsx
+++ b/sdk-app/src/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router-dom'
 import {
   categorizedRegistry as previewRegistry,
   CATEGORIES as PREVIEW_CATEGORIES,
@@ -21,6 +21,16 @@ interface SidebarProps {
   onShowShortcuts: () => void
 }
 
+interface SidebarItem {
+  name: string
+  path?: string
+  children?: SidebarItem[]
+}
+
+function isUnder(pathname: string, target: string): boolean {
+  return pathname === target || pathname.startsWith(`${target}/`)
+}
+
 const PREVIEW_CATEGORY_LABELS: Record<string, string> = {
   InformationRequests: 'Info Requests',
   EmployeeManagement: 'Employee Management',
@@ -38,16 +48,20 @@ function CategorySection({
   mode,
 }: {
   category: string
-  items: { name: string; path?: string }[]
+  items: SidebarItem[]
   searchQuery: string
   mode: AppMode
 }) {
   const [collapsed, setCollapsed] = useState(false)
+  const { pathname } = useLocation()
 
   const filteredItems = useMemo(() => {
     if (!searchQuery) return items
     const q = searchQuery.toLowerCase()
-    return items.filter(item => item.name.toLowerCase().includes(q))
+    return items.filter(item => {
+      if (item.name.toLowerCase().includes(q)) return true
+      return item.children?.some(child => child.name.toLowerCase().includes(q)) ?? false
+    })
   }, [items, searchQuery])
 
   if (searchQuery && filteredItems.length === 0) return null
@@ -73,7 +87,6 @@ function CategorySection({
           />
           {displayCategory}
         </div>
-
         <span className={styles.categoryCount}>{filteredItems.length}</span>
       </div>
       {!collapsed && (
@@ -81,9 +94,43 @@ function CategorySection({
           {filteredItems.map(item => {
             const to =
               mode === 'design' && item.path ? item.path : `/${category.toLowerCase()}/${item.name}`
+            const showChildren =
+              !!item.children?.length && !!item.path && isUnder(pathname, item.path)
             return (
               <li key={item.name} className={styles.item}>
-                <NavLink to={to}>{item.name}</NavLink>
+                <NavLink to={to} end={!item.children}>
+                  {item.name}
+                </NavLink>
+                {showChildren && item.children && (
+                  <ul className={styles.subItems}>
+                    {item.children.map(child => {
+                      const childPath = child.path ?? '#'
+                      // A child is "active" when the URL is under its path,
+                      // unless the URL is under a deeper sibling's path
+                      // (so e.g. Prototype stays highlighted while drilled
+                      // into the live flow but un-highlights on Component
+                      // states).
+                      const isActiveByPath = !!child.path && isUnder(pathname, child.path)
+                      const isUnderDeeperSibling =
+                        !!child.path &&
+                        item.children!.some(
+                          other =>
+                            other !== child &&
+                            !!other.path &&
+                            other.path.startsWith(`${child.path!}/`) &&
+                            isUnder(pathname, other.path),
+                        )
+                      const isActive = isActiveByPath && !isUnderDeeperSibling
+                      return (
+                        <li key={child.name} className={styles.subItem}>
+                          <NavLink to={childPath} className={() => (isActive ? 'active' : '')}>
+                            {child.name}
+                          </NavLink>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                )}
               </li>
             )
           })}
@@ -93,14 +140,7 @@ function CategorySection({
   )
 }
 
-export function Sidebar({
-  mode,
-  searchQuery,
-  onSearchChange,
-  isOpen,
-  onToggle,
-  onShowShortcuts,
-}: SidebarProps) {
+export function Sidebar({ mode, searchQuery, onSearchChange, isOpen, onToggle }: SidebarProps) {
   const placeholder = mode === 'design' ? 'Search prototypes...' : 'Search components...'
 
   if (!isOpen) {
@@ -122,14 +162,6 @@ export function Sidebar({
   return (
     <aside className={styles.root}>
       <div className={styles.search}>
-        <button
-          type="button"
-          className={styles.shortcutHint}
-          onClick={onShowShortcuts}
-          aria-label="Show keyboard shortcuts"
-        >
-          Press <kbd className={styles.shortcutHintKey}>?</kbd> for shortcuts
-        </button>
         <div className={styles.searchRow}>
           <input
             type="text"
diff --git a/sdk-app/src/design/DesignLayout.module.scss b/sdk-app/src/design/DesignLayout.module.scss
index 5d741b6ef..fe1daa4f3 100644
--- a/sdk-app/src/design/DesignLayout.module.scss
+++ b/sdk-app/src/design/DesignLayout.module.scss
@@ -1,10 +1,36 @@
+.shell {
+  display: flex;
+  align-items: stretch;
+  min-height: 100vh;
+}
+
+.bodyArea {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
 .bodyContent {
-  padding: 2rem;
+  width: 100%;
   max-width: 1200px;
-  margin: 0 auto;
+  padding: 2rem;
   transition: max-width 0.2s ease;
 }
 
+.rightRail {
+  flex-shrink: 0;
+  display: flex;
+  position: sticky;
+  top: var(--topbar-height, 0);
+  height: calc(100vh - var(--topbar-height, 0px));
+  align-self: flex-start;
+
+  &:empty {
+    display: none;
+  }
+}
+
 .switcherContainer {
   position: fixed;
   bottom: 1.5rem;
diff --git a/sdk-app/src/design/DesignLayout.tsx b/sdk-app/src/design/DesignLayout.tsx
index eced7a433..d3510ef7e 100644
--- a/sdk-app/src/design/DesignLayout.tsx
+++ b/sdk-app/src/design/DesignLayout.tsx
@@ -21,8 +21,13 @@ export function DesignLayout() {
       config={{ baseUrl: `${window.location.origin}/api/` }}
       theme={resolvedTheme === 'dark' ? darkTheme : undefined}
     >
-      <div className={styles.bodyContent} style={maxWidth ? { maxWidth } : undefined}>
-        <Outlet context={{ entities }} />
+      <div className={styles.shell}>
+        <main className={styles.bodyArea}>
+          <div className={styles.bodyContent} style={maxWidth ? { maxWidth } : undefined}>
+            <Outlet context={{ entities }} />
+          </div>
+        </main>
+        <div id={DESIGN_RIGHT_RAIL_ID} className={styles.rightRail} />
       </div>
       <div className={styles.switcherContainer}>
         <BreakpointSwitcher value={breakpoint} onChange={setBreakpoint} />
@@ -30,3 +35,5 @@ export function DesignLayout() {
     </GustoProvider>
   )
 }
+
+export const DESIGN_RIGHT_RAIL_ID = 'design-right-rail'
diff --git a/sdk-app/src/design/prototypes/contractor-management/common/Skeleton.module.scss b/sdk-app/src/design/components/common/Skeleton.module.scss
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/common/Skeleton.module.scss
rename to sdk-app/src/design/components/common/Skeleton.module.scss
diff --git a/sdk-app/src/design/prototypes/contractor-management/common/Skeleton.tsx b/sdk-app/src/design/components/common/Skeleton.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/common/Skeleton.tsx
rename to sdk-app/src/design/components/common/Skeleton.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorAddress.tsx b/sdk-app/src/design/components/contractor/management/ContractorAddress/ContractorAddress.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorAddress.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorAddress/ContractorAddress.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorAddressForm.tsx b/sdk-app/src/design/components/contractor/management/ContractorAddressForm/ContractorAddressForm.tsx
similarity index 73%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorAddressForm.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorAddressForm/ContractorAddressForm.tsx
index 5faa01cfc..10b389173 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorAddressForm.tsx
+++ b/sdk-app/src/design/components/contractor/management/ContractorAddressForm/ContractorAddressForm.tsx
@@ -1,6 +1,8 @@
 import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
-import { AddressForm, type AddressFormValues } from '../../common/AddressForm'
+import { AddressForm, type AddressFormValues } from '../../shared/AddressForm/AddressForm'
+import { contractorName } from '../../shared/contractorName'
 import { useBase } from '@/components/Base/useBase'
+import { CONTRACTOR_TYPE } from '@/shared/constants'
 
 interface ContractorAddressFormProps {
   contractor: Contractor
@@ -16,6 +18,7 @@ export function ContractorAddressForm({
   onSave,
 }: ContractorAddressFormProps) {
   const { baseSubmitHandler } = useBase()
+  const isBusiness = contractor.type === CONTRACTOR_TYPE.BUSINESS
 
   const handleSubmit = async (data: AddressFormValues) => {
     await baseSubmitHandler(data, async payload => {
@@ -26,7 +29,7 @@ export function ContractorAddressForm({
   return (
     <AddressForm
       heading="Edit address"
-      description="Update the contractor\u2019s home address."
+      description={`Update ${contractorName(contractor)}’s ${isBusiness ? 'business' : 'home'} address.`}
       defaultValues={{
         street1: contractor.address?.street1 ?? '',
         street2: contractor.address?.street2 ?? '',
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDetails.tsx b/sdk-app/src/design/components/contractor/management/ContractorDetails/ContractorDetails.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDetails.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorDetails/ContractorDetails.tsx
diff --git a/sdk-app/src/design/components/contractor/management/ContractorDetails/ContractorDetailsStates.tsx b/sdk-app/src/design/components/contractor/management/ContractorDetails/ContractorDetailsStates.tsx
new file mode 100644
index 000000000..959db7054
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/management/ContractorDetails/ContractorDetailsStates.tsx
@@ -0,0 +1,17 @@
+import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
+import { ContractorDetails } from './ContractorDetails'
+
+export interface ContractorDetailsDemoProps {
+  contractor: Contractor
+  /** When true, render the Edit button with a no-op handler. */
+  editable?: boolean
+}
+
+/**
+ * Renders ContractorDetails for state demos. The component is purely
+ * presentational and doesn't use `useBase`, so no BaseComponent wrapper
+ * is needed.
+ */
+export function ContractorDetailsDemo({ contractor, editable }: ContractorDetailsDemoProps) {
+  return <ContractorDetails contractor={contractor} onEdit={editable ? () => {} : undefined} />
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDetailsForm.tsx b/sdk-app/src/design/components/contractor/management/ContractorDetailsForm/ContractorDetailsForm.tsx
similarity index 77%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDetailsForm.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorDetailsForm/ContractorDetailsForm.tsx
index 9dc9a3e72..01c067a3d 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDetailsForm.tsx
+++ b/sdk-app/src/design/components/contractor/management/ContractorDetailsForm/ContractorDetailsForm.tsx
@@ -1,5 +1,9 @@
 import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
-import { ProfileDetailsForm, type ProfileDetailsFormValues } from '../../common/ProfileDetailsForm'
+import {
+  ProfileDetailsForm,
+  type ProfileDetailsFormValues,
+} from '../../shared/ProfileDetailsForm/ProfileDetailsForm'
+import { contractorName } from '../../shared/contractorName'
 import { useBase } from '@/components/Base/useBase'
 import { CONTRACTOR_TYPE } from '@/shared/constants'
 
@@ -29,11 +33,7 @@ export function ContractorDetailsForm({
     <ProfileDetailsForm
       contractor={contractor}
       heading="Edit basic details"
-      description={
-        isBusiness
-          ? 'Update the contractor\u2019s business information.'
-          : 'Update the contractor\u2019s personal information.'
-      }
+      description={`Update ${contractorName(contractor)}’s ${isBusiness ? 'business' : 'personal'} information.`}
       isPending={isPending}
       showStartDate
       showEmail
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDismissalForm.tsx b/sdk-app/src/design/components/contractor/management/ContractorDismissalForm/ContractorDismissalForm.tsx
similarity index 97%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDismissalForm.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorDismissalForm/ContractorDismissalForm.tsx
index 521431b17..8ae60eedb 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDismissalForm.tsx
+++ b/sdk-app/src/design/components/contractor/management/ContractorDismissalForm/ContractorDismissalForm.tsx
@@ -2,7 +2,7 @@ import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/compone
 import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
-import { contractorName } from './contractorName'
+import { contractorName } from '../../shared/contractorName'
 import { DatePickerField, Flex } from '@/components/Common'
 import { ActionsLayout } from '@/components/Common/ActionsLayout/ActionsLayout'
 import { useBase } from '@/components/Base/useBase'
diff --git a/sdk-app/src/design/components/contractor/management/ContractorDismissalForm/ContractorDismissalFormStates.tsx b/sdk-app/src/design/components/contractor/management/ContractorDismissalForm/ContractorDismissalFormStates.tsx
new file mode 100644
index 000000000..c6e16ac84
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/management/ContractorDismissalForm/ContractorDismissalFormStates.tsx
@@ -0,0 +1,31 @@
+import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
+import { ContractorDismissalForm } from './ContractorDismissalForm'
+import { BaseComponent } from '@/components/Base'
+
+export interface ContractorDismissalFormDemoProps {
+  contractor: Contractor
+  isPending?: boolean
+}
+
+/**
+ * Renders ContractorDismissalForm for state demos. Wraps it in
+ * BaseComponent because the form's `useBase()` call needs that context.
+ * Callbacks default to no-ops — the form's submit handler awaits
+ * `onDismiss` which silently resolves, so the user can fill the form
+ * out and click Dismiss without anything escaping the demo.
+ */
+export function ContractorDismissalFormDemo({
+  contractor,
+  isPending,
+}: ContractorDismissalFormDemoProps) {
+  return (
+    <BaseComponent onEvent={() => {}}>
+      <ContractorDismissalForm
+        contractor={contractor}
+        isPending={isPending}
+        onCancel={() => {}}
+        onDismiss={async () => {}}
+      />
+    </BaseComponent>
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDocuments.tsx b/sdk-app/src/design/components/contractor/management/ContractorDocuments/ContractorDocuments.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorDocuments.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorDocuments/ContractorDocuments.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorList/index.tsx b/sdk-app/src/design/components/contractor/management/ContractorList/ContractorList.tsx
similarity index 71%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorList/index.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorList/ContractorList.tsx
index 4679a30ee..6a5acc48d 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorList/index.tsx
+++ b/sdk-app/src/design/components/contractor/management/ContractorList/ContractorList.tsx
@@ -1,13 +1,7 @@
-import { useEffect, useMemo, useState } from 'react'
-import { useNavigate, useOutletContext, useSearchParams } from 'react-router-dom'
+import { useState } from 'react'
 import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
-import { useContractorsList } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsList'
-import { useContractorsDeleteMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsDelete'
-import { useContractorsUpdateOnboardingStatusMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsUpdateOnboardingStatus'
-import { useQueryClient } from '@tanstack/react-query'
-import type { EntityIds } from '../../../../../../useEntities'
-import { contractorName } from '../../contractor-profile/components/contractorName'
-import { Skeleton } from '../../contractor-profile/components/Skeleton'
+import { contractorName } from '../../shared/contractorName'
+import { Skeleton } from '../../../common/Skeleton'
 import { SkeletonDataView } from './SkeletonDataView'
 import { EmptyData, Flex } from '@/components/Common'
 import { HamburgerMenu } from '@/components/Common/HamburgerMenu/HamburgerMenu'
@@ -15,6 +9,41 @@ import { ContractorOnboardingStatusBadge } from '@/components/Common/OnboardingS
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
 import { ContractorOnboardingStatus } from '@/shared/constants'
 
+export type ContractorListTab = 'active' | 'onboarding' | 'dismissed'
+
+export interface ContractorListProps {
+  /** Contractors visible on the currently selected tab. */
+  contractors: Contractor[]
+  /** True while the container is fetching data for the selected tab. */
+  isFetching?: boolean
+
+  /** Currently selected tab; controlled by the container. */
+  selectedTab: ContractorListTab
+  /** Fires when the user clicks a tab. */
+  onSelectTab: (tab: ContractorListTab) => void
+
+  successMessage?: string | null
+  errorMessage?: string | null
+  onDismissSuccess?: () => void
+  onDismissError?: () => void
+
+  // Navigation actions. Defaults to no-op so state demos render without
+  // wiring anything up.
+  onAddContractor?: () => void
+  onViewContractor?: (contractor: Contractor) => void
+  onDismissContractor?: (contractor: Contractor) => void
+  onRehireContractor?: (contractor: Contractor) => void
+  onEditOnboardingContractor?: (contractor: Contractor) => void
+
+  // Async confirm callbacks. The View manages the dialog open/loading
+  // state and awaits these when the user confirms; container performs
+  // the actual mutation + invalidation.
+  onConfirmCancelDismissal?: (contractor: Contractor) => Promise<void>
+  onConfirmCancelRehire?: (contractor: Contractor) => Promise<void>
+  onConfirmRemoveContractor?: (contractor: Contractor) => Promise<void>
+  onConfirmCancelSelfOnboarding?: (contractor: Contractor) => Promise<void>
+}
+
 function formatDate(dateStr: string): string {
   const date = new Date(dateStr + 'T00:00:00')
   const now = new Date()
@@ -88,7 +117,6 @@ function activeContractorActions(
       },
     },
   ]
-
   if (contractor.upcomingEmployment && contractor.rehireCancellationEligible) {
     actions.push({
       label: 'Cancel rehire',
@@ -111,7 +139,6 @@ function activeContractorActions(
       },
     })
   }
-
   return actions
 }
 
@@ -241,7 +268,6 @@ function onboardingContractorActions(
       },
     )
   }
-
   return actions
 }
 
@@ -254,7 +280,6 @@ function OnboardingActionButton({
 }) {
   const Components = useComponentContext()
   const status = contractor.onboardingStatus
-
   if (
     status === ContractorOnboardingStatus.ADMIN_ONBOARDING_INCOMPLETE ||
     status === ContractorOnboardingStatus.SELF_ONBOARDING_NOT_INVITED
@@ -270,7 +295,6 @@ function OnboardingActionButton({
       </Components.Button>
     )
   }
-
   if (
     status === ContractorOnboardingStatus.ADMIN_ONBOARDING_REVIEW ||
     status === ContractorOnboardingStatus.SELF_ONBOARDING_REVIEW
@@ -286,7 +310,6 @@ function OnboardingActionButton({
       </Components.Button>
     )
   }
-
   return null
 }
 
@@ -371,7 +394,6 @@ function dismissedContractorActions(
       },
     },
   ]
-
   if (contractor.upcomingEmployment) {
     if (contractor.rehireCancellationEligible) {
       actions.push({
@@ -396,7 +418,6 @@ function dismissedContractorActions(
       },
     })
   }
-
   return actions
 }
 
@@ -446,183 +467,94 @@ function DismissedContractorsTable({
   )
 }
 
-function ContractorListContent() {
+const noop = () => {}
+const asyncNoop = async () => {}
+
+export function ContractorList({
+  contractors,
+  isFetching = false,
+  selectedTab,
+  onSelectTab,
+  successMessage,
+  errorMessage,
+  onDismissSuccess,
+  onDismissError,
+  onAddContractor = noop,
+  onViewContractor = noop,
+  onDismissContractor = noop,
+  onRehireContractor = noop,
+  onEditOnboardingContractor = noop,
+  onConfirmCancelDismissal = asyncNoop,
+  onConfirmCancelRehire = asyncNoop,
+  onConfirmRemoveContractor = asyncNoop,
+  onConfirmCancelSelfOnboarding = asyncNoop,
+}: ContractorListProps) {
   const Components = useComponentContext()
-  const { entities } = useOutletContext<{ entities: EntityIds }>()
-  const companyId = entities.companyId
-  const [cancellingId, setCancellingId] = useState<string | null>(null)
+
+  // Cancel dismissal/rehire dialog state
   const [confirmCancelContractor, setConfirmCancelContractor] = useState<Contractor | null>(null)
   const [confirmCancelType, setConfirmCancelType] = useState<'dismissal' | 'rehire'>('dismissal')
   const [isCancelPending, setIsCancelPending] = useState(false)
-  const navigate = useNavigate()
-  const [searchParams, setSearchParams] = useSearchParams()
-
-  const queryClient = useQueryClient()
-
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  useEffect(() => {
-    const msg = searchParams.get('success')
-    if (msg) {
-      setSuccessMessage(msg)
-      setSearchParams({}, { replace: true })
-      queryClient.removeQueries({ queryKey: ['@gusto/embedded-api-v-2025-11-15', 'Contractors'] })
-    }
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-  const [selectedTab, setSelectedTab] = useState('active')
-
-  const queryParams = useMemo(() => {
-    switch (selectedTab) {
-      case 'active':
-        return { companyUuid: companyId, onboardedActive: true }
-      case 'onboarding':
-        return { companyUuid: companyId, onboardedActive: false }
-      case 'dismissed':
-        return { companyUuid: companyId, terminatedToday: true }
-      default:
-        return { companyUuid: companyId, onboardedActive: true }
-    }
-  }, [companyId, selectedTab])
-
-  const { data, isPending } = useContractorsList(queryParams)
-
-  const { mutateAsync: deleteContractor } = useContractorsDeleteMutation()
-  const { mutateAsync: updateOnboardingStatus } = useContractorsUpdateOnboardingStatusMutation()
+  const cancellingId = isCancelPending ? (confirmCancelContractor?.uuid ?? null) : null
 
+  // Onboarding remove / cancel-self-onboarding dialog state
   const [onboardingAction, setOnboardingAction] = useState<{
     contractor: Contractor
     type: 'remove' | 'cancelSelfOnboarding'
   } | null>(null)
   const [isOnboardingActionPending, setIsOnboardingActionPending] = useState(false)
 
-  const { data: dismissedData } = useContractorsList(
-    { companyUuid: companyId, terminatedToday: true },
-    { enabled: selectedTab === 'active' },
-  )
-  const pendingRehires = useMemo(
-    () =>
-      (dismissedData?.contractors ?? [])
-        .filter(c => c.upcomingEmployment?.startDate)
-        .sort((a, b) =>
-          (a.upcomingEmployment?.startDate ?? '').localeCompare(
-            b.upcomingEmployment?.startDate ?? '',
-          ),
-        ),
-    [dismissedData],
-  )
-
-  const activeContractors = useMemo(() => {
-    if (selectedTab !== 'active') return data?.contractors ?? []
-    return [...(data?.contractors ?? []), ...pendingRehires]
-  }, [data, pendingRehires, selectedTab])
+  const cancelContractorName = confirmCancelContractor
+    ? contractorName(confirmCancelContractor)
+    : ''
 
-  const contractors = selectedTab === 'active' ? activeContractors : (data?.contractors ?? [])
+  const tabs = [
+    { id: 'active', label: 'Active', content: null },
+    { id: 'onboarding', label: 'Onboarding', content: null },
+    { id: 'dismissed', label: 'Dismissed', content: null },
+  ]
 
   const handleConfirmCancel = async () => {
     const contractor = confirmCancelContractor
     if (!contractor) return
     setIsCancelPending(true)
-    setCancellingId(contractor.uuid)
-    const isRehire = confirmCancelType === 'rehire'
     try {
-      const res = await fetch(
-        `/api/v1/contractors/${contractor.uuid}/${isRehire ? 'rehire' : 'termination'}`,
-        { method: 'DELETE' },
-      )
-      if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}))
-        throw new Error(
-          errorData.message ||
-            `Failed to cancel ${isRehire ? 'rehire' : 'dismissal'} (${res.status})`,
-        )
+      if (confirmCancelType === 'rehire') {
+        await onConfirmCancelRehire(contractor)
+      } else {
+        await onConfirmCancelDismissal(contractor)
       }
       setConfirmCancelContractor(null)
-      setSuccessMessage(
-        isRehire
-          ? `Rehire cancelled for ${contractorName(contractor)}`
-          : `Dismissal cancelled for ${contractorName(contractor)}`,
-      )
-      queryClient.removeQueries({ queryKey: ['@gusto/embedded-api-v-2025-11-15', 'Contractors'] })
-    } catch (error) {
-      setConfirmCancelContractor(null)
-      setErrorMessage(
-        error instanceof Error
-          ? error.message
-          : `Failed to cancel ${isRehire ? 'rehire' : 'dismissal'}. Please try again.`,
-      )
     } finally {
       setIsCancelPending(false)
-      setCancellingId(null)
     }
   }
 
   const handleConfirmOnboardingAction = async () => {
     if (!onboardingAction) return
-    const { contractor, type } = onboardingAction
     setIsOnboardingActionPending(true)
     try {
-      const name = contractorName(contractor)
-      if (type === 'remove') {
-        await deleteContractor({ request: { contractorUuid: contractor.uuid } })
-        setSuccessMessage(`${name} has been removed`)
+      if (onboardingAction.type === 'remove') {
+        await onConfirmRemoveContractor(onboardingAction.contractor)
       } else {
-        await updateOnboardingStatus({
-          request: {
-            contractorUuid: contractor.uuid,
-            requestBody: { onboardingStatus: 'admin_onboarding_incomplete' },
-          },
-        })
-        setSuccessMessage(`Self-onboarding cancelled for ${name}`)
+        await onConfirmCancelSelfOnboarding(onboardingAction.contractor)
       }
       setOnboardingAction(null)
-      queryClient.removeQueries({ queryKey: ['@gusto/embedded-api-v-2025-11-15', 'Contractors'] })
-    } catch (error) {
-      setOnboardingAction(null)
-      setErrorMessage(
-        error instanceof Error ? error.message : 'Something went wrong. Please try again.',
-      )
     } finally {
       setIsOnboardingActionPending(false)
     }
   }
 
-  const cancelContractorName = confirmCancelContractor
-    ? contractorName(confirmCancelContractor)
-    : ''
-
-  const tabs = [
-    {
-      id: 'active',
-      label: 'Active',
-      content: null,
-    },
-    {
-      id: 'onboarding',
-      label: 'Onboarding',
-      content: null,
-    },
-    {
-      id: 'dismissed',
-      label: 'Dismissed',
-      content: null,
-    },
-  ]
-
   const renderTable = () => {
     switch (selectedTab) {
       case 'active':
         return (
           <ActiveContractorsTable
             contractors={contractors}
-            isFetching={isPending}
+            isFetching={isFetching}
             cancellingId={cancellingId}
-            onViewDetails={contractor => {
-              void navigate(contractor.uuid)
-            }}
-            onDismiss={contractor => {
-              void navigate(`${contractor.uuid}/dismiss`)
-            }}
+            onViewDetails={onViewContractor}
+            onDismiss={onDismissContractor}
             onCancelDismissal={contractor => {
               setConfirmCancelType('dismissal')
               setConfirmCancelContractor(contractor)
@@ -637,21 +569,9 @@ function ContractorListContent() {
         return (
           <OnboardingContractorsTable
             contractors={contractors}
-            isFetching={isPending}
-            onViewDetails={contractor => {
-              void navigate(contractor.uuid)
-            }}
-            onEdit={contractor => {
-              const status = contractor.onboardingStatus
-              if (
-                status === ContractorOnboardingStatus.ADMIN_ONBOARDING_REVIEW ||
-                status === ContractorOnboardingStatus.SELF_ONBOARDING_REVIEW
-              ) {
-                void navigate(contractor.uuid)
-              } else {
-                void navigate(`add/${contractor.uuid}`)
-              }
-            }}
+            isFetching={isFetching}
+            onViewDetails={onViewContractor}
+            onEdit={onEditOnboardingContractor}
             onRemove={contractor => {
               setOnboardingAction({ contractor, type: 'remove' })
             }}
@@ -664,17 +584,13 @@ function ContractorListContent() {
         return (
           <DismissedContractorsTable
             contractors={contractors.filter(c => !c.upcomingEmployment)}
-            isFetching={isPending}
-            onViewDetails={contractor => {
-              void navigate(contractor.uuid)
-            }}
+            isFetching={isFetching}
+            onViewDetails={onViewContractor}
             onCancelDismissal={contractor => {
               setConfirmCancelType('dismissal')
               setConfirmCancelContractor(contractor)
             }}
-            onRehire={contractor => {
-              void navigate(`${contractor.uuid}/rehire`)
-            }}
+            onRehire={onRehireContractor}
           />
         )
     }
@@ -683,38 +599,27 @@ function ContractorListContent() {
   return (
     <Flex flexDirection="column" gap={24}>
       {successMessage && (
-        <Components.Alert
-          label={successMessage}
-          status="success"
-          onDismiss={() => {
-            setSuccessMessage(null)
-          }}
-        />
+        <Components.Alert label={successMessage} status="success" onDismiss={onDismissSuccess} />
       )}
       {errorMessage && (
-        <Components.Alert
-          label={errorMessage}
-          status="error"
-          onDismiss={() => {
-            setErrorMessage(null)
-          }}
-        />
+        <Components.Alert label={errorMessage} status="error" onDismiss={onDismissError} />
       )}
       <Flex justifyContent="space-between" alignItems="center">
         <Components.Heading as="h1" styledAs="h2">
           Contractors
         </Components.Heading>
-        <Components.Button
-          variant="primary"
-          onClick={() => {
-            void navigate('add')
-          }}
-        >
+        <Components.Button variant="primary" onClick={onAddContractor}>
           Add contractor
         </Components.Button>
       </Flex>
       <Flex flexDirection="column" gap={0}>
-        <Components.Tabs onSelectionChange={setSelectedTab} tabs={tabs} selectedId={selectedTab} />
+        <Components.Tabs
+          onSelectionChange={tab => {
+            onSelectTab(tab as ContractorListTab)
+          }}
+          tabs={tabs}
+          selectedId={selectedTab}
+        />
         {renderTable()}
       </Flex>
       <Components.Dialog
@@ -777,7 +682,3 @@ function ContractorListContent() {
     </Flex>
   )
 }
-
-export default function ContractorList() {
-  return <ContractorListContent />
-}
diff --git a/sdk-app/src/design/components/contractor/management/ContractorList/ContractorListStates.tsx b/sdk-app/src/design/components/contractor/management/ContractorList/ContractorListStates.tsx
new file mode 100644
index 000000000..43432e153
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/management/ContractorList/ContractorListStates.tsx
@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
+import { ContractorList, type ContractorListTab } from './ContractorList'
+
+export interface ContractorTabFixtures {
+  active: Contractor[]
+  onboarding: Contractor[]
+  dismissed: Contractor[]
+}
+
+/**
+ * Renders ContractorList for a state demo: holds tab state locally and
+ * swaps between fixture sets for each tab. The View takes contractors
+ * via props — no MSW, no fetching.
+ */
+export function ContractorListDemo({ byTab }: { byTab: ContractorTabFixtures }) {
+  const [tab, setTab] = useState<ContractorListTab>('active')
+  const contractors =
+    tab === 'active' ? byTab.active : tab === 'onboarding' ? byTab.onboarding : byTab.dismissed
+  return <ContractorList contractors={contractors} selectedTab={tab} onSelectTab={setTab} />
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorList/SkeletonDataView.tsx b/sdk-app/src/design/components/contractor/management/ContractorList/SkeletonDataView.tsx
similarity index 95%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorList/SkeletonDataView.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorList/SkeletonDataView.tsx
index 5fc8c23e4..fde517751 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorList/SkeletonDataView.tsx
+++ b/sdk-app/src/design/components/contractor/management/ContractorList/SkeletonDataView.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { Skeleton } from '../../contractor-profile/components/Skeleton'
+import { Skeleton } from '../../../common/Skeleton'
 import { DataView, useDataView } from '@/components/Common'
 
 interface Column {
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPay.tsx b/sdk-app/src/design/components/contractor/management/ContractorPay/ContractorPay.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPay.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorPay/ContractorPay.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPayForm.tsx b/sdk-app/src/design/components/contractor/management/ContractorPayForm/ContractorPayForm.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPayForm.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorPayForm/ContractorPayForm.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPaymentMethod.tsx b/sdk-app/src/design/components/contractor/management/ContractorPaymentMethod/ContractorPaymentMethod.tsx
similarity index 98%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPaymentMethod.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorPaymentMethod/ContractorPaymentMethod.tsx
index bab59d530..8cfd8026e 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPaymentMethod.tsx
+++ b/sdk-app/src/design/components/contractor/management/ContractorPaymentMethod/ContractorPaymentMethod.tsx
@@ -1,5 +1,5 @@
 import type { ContractorBankAccount } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorbankaccount'
-import { Skeleton } from './Skeleton'
+import { Skeleton } from '../../../common/Skeleton'
 import { DataView, Flex, useDataView } from '@/components/Common'
 import { HamburgerMenu } from '@/components/Common/HamburgerMenu/HamburgerMenu'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPaymentMethodForm.tsx b/sdk-app/src/design/components/contractor/management/ContractorPaymentMethodForm/ContractorPaymentMethodForm.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorPaymentMethodForm.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorPaymentMethodForm/ContractorPaymentMethodForm.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorRehireForm.tsx b/sdk-app/src/design/components/contractor/management/ContractorRehireForm/ContractorRehireForm.tsx
similarity index 97%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorRehireForm.tsx
rename to sdk-app/src/design/components/contractor/management/ContractorRehireForm/ContractorRehireForm.tsx
index a97ebfa85..2f20ba2c5 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/ContractorRehireForm.tsx
+++ b/sdk-app/src/design/components/contractor/management/ContractorRehireForm/ContractorRehireForm.tsx
@@ -2,7 +2,7 @@ import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/compone
 import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
-import { contractorName } from './contractorName'
+import { contractorName } from '../../shared/contractorName'
 import { DatePickerField, Flex } from '@/components/Common'
 import { ActionsLayout } from '@/components/Common/ActionsLayout/ActionsLayout'
 import { useBase } from '@/components/Base/useBase'
diff --git a/sdk-app/src/design/components/contractor/self-onboarding/ContractorDocumentList/ContractorDocumentList.tsx b/sdk-app/src/design/components/contractor/self-onboarding/ContractorDocumentList/ContractorDocumentList.tsx
new file mode 100644
index 000000000..7841a554e
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/self-onboarding/ContractorDocumentList/ContractorDocumentList.tsx
@@ -0,0 +1,86 @@
+import type { Document } from '@gusto/embedded-api-v-2025-11-15/models/components/document'
+import { ActionsLayout, DataView, Flex, useDataView } from '@/components/Common'
+import { EmptyData } from '@/components/Common/EmptyData/EmptyData'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+
+interface ContractorDocumentListProps {
+  documents: Document[]
+  onRequestSign: (doc: Document) => void
+  onContinue: () => void
+  className?: string
+}
+
+export function ContractorDocumentList({
+  documents,
+  onRequestSign,
+  onContinue,
+  className,
+}: ContractorDocumentListProps) {
+  const Components = useComponentContext()
+
+  const hasSignedAllDocs = documents.every(doc => !doc.requiresSigning || doc.signedAt)
+
+  const dataViewProps = useDataView<Document>({
+    data: documents,
+    columns: [
+      {
+        title: 'Document',
+        render: (doc: Document) => (
+          <>
+            <Components.Text weight="medium" size="sm">
+              {doc.title ?? doc.name ?? '–'}
+            </Components.Text>
+            <Components.Text variant="supporting" size="sm">
+              {doc.description ?? '–'}
+            </Components.Text>
+          </>
+        ),
+      },
+      {
+        title: 'Status',
+        render: (doc: Document) =>
+          doc.signedAt ? (
+            <Components.Badge status="success">Signed</Components.Badge>
+          ) : (
+            <Components.Badge status="warning">Not signed</Components.Badge>
+          ),
+      },
+      {
+        title: '',
+        render: (doc: Document) =>
+          doc.signedAt ? null : (
+            <Components.Button
+              variant="secondary"
+              onClick={() => {
+                onRequestSign(doc)
+              }}
+            >
+              Sign document
+            </Components.Button>
+          ),
+      },
+    ],
+    emptyState: () => <EmptyData title="No documents to sign" />,
+  })
+
+  return (
+    <section className={className}>
+      <Flex flexDirection="column" gap={24}>
+        <header>
+          <Components.Heading as="h2">Review and sign documents</Components.Heading>
+          <Components.Text>
+            Please review and sign the following documents to complete your onboarding.
+          </Components.Text>
+        </header>
+
+        <DataView label="Contractor documents" {...dataViewProps} />
+
+        <ActionsLayout>
+          <Components.Button variant="primary" onClick={onContinue} isDisabled={!hasSignedAllDocs}>
+            Continue
+          </Components.Button>
+        </ActionsLayout>
+      </Flex>
+    </section>
+  )
+}
diff --git a/sdk-app/src/design/components/contractor/self-onboarding/ContractorDocumentSignature/ContractorDocumentSignature.tsx b/sdk-app/src/design/components/contractor/self-onboarding/ContractorDocumentSignature/ContractorDocumentSignature.tsx
new file mode 100644
index 000000000..5f804bcde
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/self-onboarding/ContractorDocumentSignature/ContractorDocumentSignature.tsx
@@ -0,0 +1,86 @@
+import { useForm, FormProvider } from 'react-hook-form'
+import { ActionsLayout, Flex } from '@/components/Common'
+import { Form } from '@/components/Common/Form'
+import { TextInputField } from '@/components/Common/Fields/TextInputField'
+import { CheckboxField } from '@/components/Common/Fields/CheckboxField'
+import { DocumentViewer } from '@/components/Common/DocumentViewer'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+
+export interface ContractorDocumentSignatureValues {
+  signature: string
+  agree: boolean
+}
+
+interface ContractorDocumentSignatureProps {
+  title: string
+  description?: string | null
+  pdfUrl: string | null
+  isPending?: boolean
+  onSubmit: (data: ContractorDocumentSignatureValues) => void | Promise<void>
+  onBack: () => void
+  className?: string
+}
+
+export function ContractorDocumentSignature({
+  title,
+  description,
+  pdfUrl,
+  isPending,
+  onSubmit,
+  onBack,
+  className,
+}: ContractorDocumentSignatureProps) {
+  const Components = useComponentContext()
+
+  const formMethods = useForm<ContractorDocumentSignatureValues>({
+    defaultValues: {
+      signature: '',
+      agree: false,
+    },
+  })
+
+  return (
+    <section className={className}>
+      <FormProvider {...formMethods}>
+        <Form onSubmit={formMethods.handleSubmit(onSubmit)}>
+          <Flex flexDirection="column" gap={24}>
+            <Flex flexDirection="column" gap={4}>
+              <Components.Heading as="h2">{title}</Components.Heading>
+              {description && <Components.Text variant="supporting">{description}</Components.Text>}
+            </Flex>
+
+            <DocumentViewer
+              url={pdfUrl}
+              title={title}
+              downloadInstructions="Download and review the document before signing."
+              viewDocumentLabel="View document"
+            />
+
+            <Flex flexDirection="column" gap={12}>
+              <TextInputField
+                name="signature"
+                label="Signature"
+                description="Type your full legal name"
+                isRequired
+              />
+              <CheckboxField
+                name="agree"
+                label="I agree to sign this document electronically"
+                isRequired
+              />
+            </Flex>
+
+            <ActionsLayout>
+              <Components.Button variant="secondary" type="button" onClick={onBack}>
+                Back
+              </Components.Button>
+              <Components.Button type="submit" isLoading={isPending}>
+                Sign document
+              </Components.Button>
+            </ActionsLayout>
+          </Flex>
+        </Form>
+      </FormProvider>
+    </section>
+  )
+}
diff --git a/sdk-app/src/design/components/contractor/self-onboarding/ContractorOnboardingComplete/ContractorOnboardingComplete.tsx b/sdk-app/src/design/components/contractor/self-onboarding/ContractorOnboardingComplete/ContractorOnboardingComplete.tsx
new file mode 100644
index 000000000..f1784c9a1
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/self-onboarding/ContractorOnboardingComplete/ContractorOnboardingComplete.tsx
@@ -0,0 +1,35 @@
+import { ActionsLayout, Flex } from '@/components/Common'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+
+interface ContractorOnboardingCompleteProps {
+  onDone: () => void
+  className?: string
+}
+
+export function ContractorOnboardingComplete({
+  onDone,
+  className,
+}: ContractorOnboardingCompleteProps) {
+  const Components = useComponentContext()
+
+  return (
+    <section className={className}>
+      <Flex flexDirection="column" gap={32}>
+        <Flex alignItems="center" flexDirection="column" gap={8}>
+          <Components.Heading as="h2" textAlign="center">
+            You&apos;re all set!
+          </Components.Heading>
+          <Components.Text textAlign="center">
+            Your onboarding information has been submitted. Your company will review your details
+            and you&apos;ll be notified if anything else is needed.
+          </Components.Text>
+        </Flex>
+        <ActionsLayout justifyContent="center">
+          <Components.Button variant="secondary" onClick={onDone}>
+            Done
+          </Components.Button>
+        </ActionsLayout>
+      </Flex>
+    </section>
+  )
+}
diff --git a/sdk-app/src/design/components/contractor/self-onboarding/ContractorWelcome/ContractorWelcome.tsx b/sdk-app/src/design/components/contractor/self-onboarding/ContractorWelcome/ContractorWelcome.tsx
new file mode 100644
index 000000000..49cc57837
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/self-onboarding/ContractorWelcome/ContractorWelcome.tsx
@@ -0,0 +1,56 @@
+import { ActionsLayout, Flex } from '@/components/Common'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+
+interface ContractorWelcomeProps {
+  contractorName: string
+  companyName: string
+  onStart: () => void
+  className?: string
+}
+
+export function ContractorWelcome({
+  contractorName,
+  companyName,
+  onStart,
+  className,
+}: ContractorWelcomeProps) {
+  const Components = useComponentContext()
+
+  return (
+    <section className={className}>
+      <Components.Box
+        footer={
+          <ActionsLayout>
+            <Components.Button variant="primary" onClick={onStart}>
+              Get started
+            </Components.Button>
+          </ActionsLayout>
+        }
+      >
+        <Flex alignItems="center" flexDirection="column" gap={32}>
+          <Flex flexDirection="column" gap={4}>
+            <Components.Heading as="h2">
+              Welcome, {contractorName}! {companyName} has invited you to complete your onboarding.
+            </Components.Heading>
+            <Components.Text variant="supporting">
+              We just need a few details from you to get set up.
+            </Components.Text>
+          </Flex>
+          <Flex flexDirection="column" gap={8}>
+            <Components.Heading as="h3">
+              Here&apos;s what you&apos;ll need to do:
+            </Components.Heading>
+            <Components.UnorderedList
+              items={[
+                'Complete your profile and tax information',
+                'Add your mailing address',
+                'Set up your payment method',
+                'Review and sign documents',
+              ]}
+            />
+          </Flex>
+        </Flex>
+      </Components.Box>
+    </section>
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/common/AddressForm.tsx b/sdk-app/src/design/components/contractor/shared/AddressForm/AddressForm.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/common/AddressForm.tsx
rename to sdk-app/src/design/components/contractor/shared/AddressForm/AddressForm.tsx
diff --git a/sdk-app/src/design/components/contractor/shared/PaymentMethodForm/PaymentMethodForm.tsx b/sdk-app/src/design/components/contractor/shared/PaymentMethodForm/PaymentMethodForm.tsx
new file mode 100644
index 000000000..b1ebb5d0f
--- /dev/null
+++ b/sdk-app/src/design/components/contractor/shared/PaymentMethodForm/PaymentMethodForm.tsx
@@ -0,0 +1,146 @@
+import { FormProvider, useForm, useWatch } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import z from 'zod'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { Form } from '@/components/Common/Form'
+import { ActionsLayout } from '@/components/Common/ActionsLayout'
+import { Flex, RadioGroupField, TextInputField } from '@/components/Common'
+import { PAYMENT_METHODS } from '@/shared/constants'
+import { accountNumberValidation, routingNumberValidation } from '@/helpers/validations'
+
+const PaymentMethodSchema = z.discriminatedUnion('type', [
+  z.object({
+    type: z.literal('Direct Deposit'),
+    name: z.string().min(1),
+    routingNumber: routingNumberValidation,
+    accountNumber: z.any(),
+    accountType: z.enum(['Checking', 'Savings']),
+  }),
+  z.object({
+    type: z.literal('Check'),
+  }),
+])
+
+export type PaymentMethodFormValues = z.input<typeof PaymentMethodSchema>
+
+export interface PaymentMethodFormDefaults {
+  type: 'Direct Deposit' | 'Check'
+  name: string
+  routingNumber: string
+  accountNumber: string
+  accountType: 'Checking' | 'Savings'
+}
+
+interface PaymentMethodFormProps {
+  heading?: string
+  description?: string
+  defaultValues: PaymentMethodFormDefaults
+  isPending?: boolean
+  onSubmit: (data: PaymentMethodFormValues) => void | Promise<void>
+}
+
+export function PaymentMethodForm({
+  heading = 'Payment method',
+  description,
+  defaultValues,
+  isPending,
+  onSubmit,
+}: PaymentMethodFormProps) {
+  const Components = useComponentContext()
+
+  const formMethods = useForm({
+    resolver: zodResolver(PaymentMethodSchema),
+    defaultValues,
+  })
+
+  const watchedType = useWatch({ control: formMethods.control, name: 'type' })
+  const showBankAccountForm = watchedType === PAYMENT_METHODS.directDeposit
+
+  const handleSubmit = async (data: PaymentMethodFormValues) => {
+    if (data.type === PAYMENT_METHODS.directDeposit) {
+      // The schema accepts any string so the masked default value passes through.
+      // Validate only when the user actually edited the field.
+      const accountNumberChanged = data.accountNumber !== defaultValues.accountNumber
+      if (accountNumberChanged) {
+        const res = accountNumberValidation.safeParse(data.accountNumber)
+        if (!res.success) {
+          formMethods.setError('accountNumber', { type: 'validate' })
+          return
+        }
+      }
+    }
+    await onSubmit(data)
+  }
+
+  return (
+    <FormProvider {...formMethods}>
+      <Form onSubmit={formMethods.handleSubmit(handleSubmit)}>
+        <Flex flexDirection="column" gap={24}>
+          <Flex flexDirection="column" gap={4}>
+            <Components.Heading as="h2">{heading}</Components.Heading>
+            {description && <Components.Text variant="supporting">{description}</Components.Text>}
+          </Flex>
+
+          <Flex flexDirection="column" gap={20}>
+            <RadioGroupField
+              name="type"
+              label="Payment method"
+              shouldVisuallyHideLabel
+              options={[
+                {
+                  value: PAYMENT_METHODS.directDeposit,
+                  label: 'Direct deposit',
+                  description: 'Get paid directly to your bank account.',
+                },
+                {
+                  value: PAYMENT_METHODS.check,
+                  label: 'Check',
+                  description: 'Receive a paper check from your employer.',
+                },
+              ]}
+            />
+
+            {showBankAccountForm && (
+              <>
+                <TextInputField
+                  name="name"
+                  isRequired
+                  label="Account nickname"
+                  errorMessage="Account nickname is required"
+                />
+                <TextInputField
+                  name="routingNumber"
+                  label="Routing number"
+                  isRequired
+                  description="9 digits, on the bottom left of a check"
+                  errorMessage="Enter a valid 9-digit routing number"
+                />
+                <TextInputField
+                  name="accountNumber"
+                  label="Account number"
+                  errorMessage="Enter a valid account number"
+                  isRequired
+                />
+                <RadioGroupField
+                  name="accountType"
+                  isRequired
+                  label="Account type"
+                  options={[
+                    { value: 'Checking', label: 'Checking' },
+                    { value: 'Savings', label: 'Savings' },
+                  ]}
+                />
+              </>
+            )}
+          </Flex>
+
+          <ActionsLayout>
+            <Components.Button type="submit" variant="primary" isDisabled={isPending}>
+              {isPending ? 'Saving...' : 'Continue'}
+            </Components.Button>
+          </ActionsLayout>
+        </Flex>
+      </Form>
+    </FormProvider>
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/common/LockedField.module.scss b/sdk-app/src/design/components/contractor/shared/ProfileDetailsForm/LockedField.module.scss
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/common/LockedField.module.scss
rename to sdk-app/src/design/components/contractor/shared/ProfileDetailsForm/LockedField.module.scss
diff --git a/sdk-app/src/design/prototypes/contractor-management/common/ProfileDetailsForm.tsx b/sdk-app/src/design/components/contractor/shared/ProfileDetailsForm/ProfileDetailsForm.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/common/ProfileDetailsForm.tsx
rename to sdk-app/src/design/components/contractor/shared/ProfileDetailsForm/ProfileDetailsForm.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/contractorName.ts b/sdk-app/src/design/components/contractor/shared/contractorName.ts
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/contractorName.ts
rename to sdk-app/src/design/components/contractor/shared/contractorName.ts
diff --git a/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.module.scss b/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.module.scss
new file mode 100644
index 000000000..9fa2e10cc
--- /dev/null
+++ b/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.module.scss
@@ -0,0 +1,12 @@
+.container {
+  container-type: inline-size;
+  width: 100%;
+}
+
+.jobFilter {
+  width: 100%;
+
+  @container (min-width: 40rem) {
+    width: toRem(280);
+  }
+}
diff --git a/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.test.tsx b/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.test.tsx
new file mode 100644
index 000000000..61280eb2e
--- /dev/null
+++ b/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.test.tsx
@@ -0,0 +1,109 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { Job } from '@gusto/embedded-api-v-2025-11-15/models/components/job'
+import type { Compensation } from '@gusto/embedded-api-v-2025-11-15/models/components/compensation'
+import { CompensationHistory } from './CompensationHistory'
+import { renderWithProviders } from '@/test-utils/renderWithProviders'
+import { mockUseContainerBreakpoints } from '@/test/setup'
+
+function buildCompensation(overrides: {
+  uuid?: string
+  jobUuid?: string
+  title?: string
+  rate?: string
+}): Compensation {
+  return {
+    uuid: overrides.uuid ?? 'compensation-uuid',
+    version: 'compensation-version',
+    paymentUnit: 'Hour',
+    flsaStatus: 'Nonexempt',
+    adjustForMinimumWage: false,
+    jobUuid: overrides.jobUuid ?? 'job-uuid',
+    title: overrides.title ?? 'My Job',
+    effectiveDate: '2024-12-24',
+    rate: overrides.rate ?? '100.00',
+  } as Compensation
+}
+
+function buildJob(overrides: {
+  uuid?: string
+  title?: string
+  currentCompensationUuid?: string
+}): Job {
+  const uuid = overrides.uuid ?? 'job-uuid'
+  const currentCompensationUuid = overrides.currentCompensationUuid ?? 'compensation-uuid'
+  const title = overrides.title ?? 'My Job'
+  return {
+    uuid,
+    version: 'job-version',
+    employeeUuid: 'employee-uuid',
+    currentCompensationUuid,
+    paymentUnit: 'Hour',
+    primary: true,
+    twoPercentShareholder: false,
+    title,
+    compensations: [buildCompensation({ uuid: currentCompensationUuid, jobUuid: uuid, title })],
+    rate: '100.00',
+    hireDate: '2024-12-24',
+  } as Job
+}
+
+const singleJob: Job[] = [buildJob({ uuid: 'job-1', title: 'My Job' })]
+
+const multiJob: Job[] = [
+  buildJob({ uuid: 'job-1', currentCompensationUuid: 'comp-1', title: 'My Job' }),
+  buildJob({
+    uuid: 'job-2',
+    currentCompensationUuid: 'comp-2',
+    title: 'An additional job',
+  }),
+]
+
+describe('components/employee/management/CompensationHistory', () => {
+  beforeEach(() => {
+    // Force the DataView's container-breakpoints hook to report a desktop
+    // width so DataTable (not DataCards) renders — lets the tests use
+    // table-role queries.
+    mockUseContainerBreakpoints.mockReturnValue(['base', 'small', 'medium', 'large'])
+  })
+
+  it('renders the job title as heading and omits the job filter for a single job', () => {
+    renderWithProviders(<CompensationHistory jobs={singleJob} />)
+
+    expect(screen.getByRole('heading', { name: 'My Job' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /All jobs/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('columnheader', { name: 'Job title' })).not.toBeInTheDocument()
+  })
+
+  it('renders the combined view with both jobs by default when there are multiple jobs', () => {
+    renderWithProviders(<CompensationHistory jobs={multiJob} />)
+
+    expect(screen.getByRole('heading', { name: 'Compensation history' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /All jobs/i })).toBeInTheDocument()
+    expect(screen.getByRole('columnheader', { name: 'Job title' })).toBeInTheDocument()
+    expect(screen.getByRole('gridcell', { name: 'My Job' })).toBeInTheDocument()
+    expect(screen.getByRole('gridcell', { name: 'An additional job' })).toBeInTheDocument()
+  })
+
+  it('filters rows to the selected job when a job is chosen from the filter', async () => {
+    const user = userEvent.setup()
+    renderWithProviders(<CompensationHistory jobs={multiJob} />)
+
+    await user.click(screen.getByRole('button', { name: /All jobs/i }))
+    await user.click(screen.getByRole('option', { name: 'An additional job' }))
+
+    expect(screen.getByRole('gridcell', { name: 'An additional job' })).toBeInTheDocument()
+    expect(screen.queryByRole('gridcell', { name: 'My Job' })).not.toBeInTheDocument()
+  })
+
+  it('renders an empty DataView with an emptyState message when there are no jobs', () => {
+    renderWithProviders(<CompensationHistory jobs={[]} />)
+
+    expect(screen.getByRole('heading', { name: 'Compensation history' })).toBeInTheDocument()
+    expect(screen.getByRole('grid')).toBeInTheDocument()
+    expect(screen.getByText('There is no compensation history.')).toBeInTheDocument()
+    // No job filter is shown when there are no jobs to filter to.
+    expect(screen.queryByRole('button', { name: /All jobs/i })).not.toBeInTheDocument()
+  })
+})
diff --git a/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.tsx b/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.tsx
new file mode 100644
index 000000000..722558bb6
--- /dev/null
+++ b/sdk-app/src/design/components/employee/management/CompensationHistory/CompensationHistory.tsx
@@ -0,0 +1,201 @@
+import { useRef, useState } from 'react'
+import type { Job } from '@gusto/embedded-api-v-2025-11-15/models/components/job'
+import type { Compensation } from '@gusto/embedded-api-v-2025-11-15/models/components/compensation'
+import style from './CompensationHistory.module.scss'
+import { ActionsLayout, DataView, Flex, useDataView } from '@/components/Common'
+import useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { formatDateLongWithYear } from '@/helpers/dateFormatting'
+import { useFormatCompensationRate } from '@/helpers/formattedStrings'
+
+const FLSA_STATUS_LABELS: Record<string, string> = {
+  'Commission Only Exempt': 'Commission Only/No Overtime',
+  'Commission Only Nonexempt': 'Commission Only/Eligible for overtime',
+  Exempt: 'Salary/No overtime',
+  Nonexempt: 'Paid by the hour',
+  Owner: "Owner's draw",
+  'Salaried Nonexempt': 'Salary/Eligible for overtime',
+}
+
+const COLUMN_LABELS = {
+  effectiveDate: 'Effective date',
+  employeeType: 'Employee type',
+  wage: 'Wage',
+  jobTitle: 'Job title',
+}
+
+export interface CompensationHistoryProps {
+  jobs: Job[]
+  onBack?: () => void
+}
+
+export function CompensationHistory({ jobs, onBack }: CompensationHistoryProps) {
+  const Components = useComponentContext()
+
+  return (
+    <Flex flexDirection="column" gap={32}>
+      {jobs.length === 1 && jobs[0] ? (
+        <JobCompensationHistory job={jobs[0]} />
+      ) : (
+        <CombinedCompensationHistory jobs={jobs} />
+      )}
+      {onBack && (
+        <ActionsLayout>
+          <Components.Button variant="secondary" onClick={onBack}>
+            Back
+          </Components.Button>
+        </ActionsLayout>
+      )}
+    </Flex>
+  )
+}
+
+function getJobTitle(job: Job): string {
+  const currentComp = job.compensations?.find(c => c.uuid === job.currentCompensationUuid)
+  return currentComp?.title ?? job.title ?? ''
+}
+
+function formatFlsaStatus(status: string | undefined): string {
+  if (!status) return ''
+  return FLSA_STATUS_LABELS[status] ?? status
+}
+
+function JobCompensationHistory({ job }: { job: Job }) {
+  const Components = useComponentContext()
+  const formatCompensationRate = useFormatCompensationRate()
+
+  const jobTitle = getJobTitle(job)
+
+  const sortedCompensations = [...(job.compensations ?? [])].sort((a, b) =>
+    (b.effectiveDate ?? '').localeCompare(a.effectiveDate ?? ''),
+  )
+
+  const dataViewProps = useDataView<Compensation>({
+    data: sortedCompensations,
+    columns: [
+      {
+        key: 'effectiveDate',
+        title: COLUMN_LABELS.effectiveDate,
+        render: compensation => formatDateLongWithYear(compensation.effectiveDate),
+      },
+      {
+        key: 'flsaStatus',
+        title: COLUMN_LABELS.employeeType,
+        render: compensation => formatFlsaStatus(compensation.flsaStatus),
+      },
+      {
+        key: 'rate',
+        title: COLUMN_LABELS.wage,
+        render: compensation => {
+          const rate = Number(compensation.rate)
+          if (!compensation.paymentUnit || Number.isNaN(rate)) return ''
+          return formatCompensationRate(rate, compensation.paymentUnit)
+        },
+      },
+    ],
+    emptyState: () => (
+      <Flex flexDirection="column" alignItems="center" gap={8}>
+        <Components.Text>There is no compensation history.</Components.Text>
+      </Flex>
+    ),
+  })
+
+  return (
+    <Flex flexDirection="column" gap={16}>
+      <Components.Heading as="h2">{jobTitle}</Components.Heading>
+      <DataView label={`Compensation history for ${jobTitle}`} {...dataViewProps} />
+    </Flex>
+  )
+}
+
+type CombinedRow = {
+  compensation: Compensation
+  job: Job
+}
+
+function CombinedCompensationHistory({ jobs }: { jobs: Job[] }) {
+  const Components = useComponentContext()
+  const formatCompensationRate = useFormatCompensationRate()
+  const [selectedJobUuid, setSelectedJobUuid] = useState<string>('all')
+  const containerRef = useRef<HTMLDivElement>(null)
+  const breakpoints = useContainerBreakpoints({ ref: containerRef })
+  const isDesktop = breakpoints.includes('small')
+
+  const visibleJobs =
+    selectedJobUuid === 'all' ? jobs : jobs.filter(job => job.uuid === selectedJobUuid)
+
+  const rows: CombinedRow[] = visibleJobs
+    .flatMap(job => (job.compensations ?? []).map(compensation => ({ compensation, job })))
+    .sort((a, b) =>
+      (b.compensation.effectiveDate ?? '').localeCompare(a.compensation.effectiveDate ?? ''),
+    )
+
+  const options = [
+    { value: 'all', label: 'All jobs' },
+    ...jobs.map(job => ({ value: job.uuid, label: getJobTitle(job) })),
+  ]
+
+  const dataViewProps = useDataView<CombinedRow>({
+    data: rows,
+    columns: [
+      {
+        key: 'effectiveDate',
+        title: COLUMN_LABELS.effectiveDate,
+        render: row => formatDateLongWithYear(row.compensation.effectiveDate),
+      },
+      {
+        key: 'title',
+        title: COLUMN_LABELS.jobTitle,
+        render: row => row.compensation.title ?? row.job.title ?? '',
+      },
+      {
+        key: 'flsaStatus',
+        title: COLUMN_LABELS.employeeType,
+        render: row => formatFlsaStatus(row.compensation.flsaStatus),
+      },
+      {
+        key: 'rate',
+        title: COLUMN_LABELS.wage,
+        render: row => {
+          const rate = Number(row.compensation.rate)
+          if (!row.compensation.paymentUnit || Number.isNaN(rate)) return ''
+          return formatCompensationRate(rate, row.compensation.paymentUnit)
+        },
+      },
+    ],
+    emptyState: () => (
+      <Flex flexDirection="column" alignItems="center" gap={8}>
+        <Components.Text>There is no compensation history.</Components.Text>
+      </Flex>
+    ),
+  })
+
+  return (
+    <div ref={containerRef} className={style.container}>
+      <Flex flexDirection="column" gap={16}>
+        <Flex
+          flexDirection={isDesktop ? 'row' : 'column'}
+          justifyContent={isDesktop ? 'space-between' : 'normal'}
+          alignItems={isDesktop ? 'center' : 'stretch'}
+          gap={isDesktop ? 0 : 16}
+        >
+          <Components.Heading as="h2">Compensation history</Components.Heading>
+          {jobs.length > 0 && (
+            <div className={style.jobFilter}>
+              <Components.Select
+                label="Filter by job"
+                shouldVisuallyHideLabel
+                value={selectedJobUuid}
+                onChange={value => {
+                  setSelectedJobUuid(value)
+                }}
+                options={options}
+              />
+            </div>
+          )}
+        </Flex>
+        <DataView label="Compensation history across all jobs" {...dataViewProps} />
+      </Flex>
+    </div>
+  )
+}
diff --git a/sdk-app/src/design/prototypes/ComponentStatesPage.module.scss b/sdk-app/src/design/prototypes/ComponentStatesPage.module.scss
new file mode 100644
index 000000000..ab084e444
--- /dev/null
+++ b/sdk-app/src/design/prototypes/ComponentStatesPage.module.scss
@@ -0,0 +1,4 @@
+.empty {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
diff --git a/sdk-app/src/design/prototypes/ComponentStatesPage.tsx b/sdk-app/src/design/prototypes/ComponentStatesPage.tsx
new file mode 100644
index 000000000..906fecc75
--- /dev/null
+++ b/sdk-app/src/design/prototypes/ComponentStatesPage.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Navigate, useParams } from 'react-router-dom'
+import { DESIGN_RIGHT_RAIL_ID } from '../DesignLayout'
+import { ComponentStatesSidebar } from './ComponentStatesSidebar'
+import type { PrototypeComponent } from './prototypeTypes'
+import styles from './ComponentStatesPage.module.scss'
+
+export interface ComponentStatesPageProps {
+  /** Absolute base path to the component-states route, used to build sidebar links. */
+  basePath: string
+  components: PrototypeComponent[]
+}
+
+function useRightRailEl() {
+  const [el, setEl] = useState<HTMLElement | null>(null)
+  useEffect(() => {
+    setEl(document.getElementById(DESIGN_RIGHT_RAIL_ID))
+  }, [])
+  return el
+}
+
+export function ComponentStatesPage({ basePath, components }: ComponentStatesPageProps) {
+  const { componentSlug, configSlug } = useParams<{
+    componentSlug?: string
+    configSlug?: string
+  }>()
+  const railEl = useRightRailEl()
+
+  const firstComponent = components[0]
+  const firstConfig = firstComponent?.configurations[0]
+
+  if (!componentSlug || !configSlug) {
+    if (firstComponent && firstConfig) {
+      return <Navigate to={`${basePath}/${firstComponent.slug}/${firstConfig.slug}`} replace />
+    }
+    return <div className={styles.empty}>No configurations defined for this prototype.</div>
+  }
+
+  const component = components.find(c => c.slug === componentSlug)
+  const configuration = component?.configurations.find(c => c.slug === configSlug)
+
+  const sidebar = <ComponentStatesSidebar basePath={basePath} components={components} />
+
+  return (
+    <>
+      {component && configuration ? (
+        <div key={`${component.slug}/${configuration.slug}`}>{configuration.render()}</div>
+      ) : (
+        <div className={styles.empty}>Configuration not found.</div>
+      )}
+      {railEl && createPortal(sidebar, railEl)}
+    </>
+  )
+}
diff --git a/sdk-app/src/design/prototypes/ComponentStatesSidebar.module.scss b/sdk-app/src/design/prototypes/ComponentStatesSidebar.module.scss
new file mode 100644
index 000000000..34ac24805
--- /dev/null
+++ b/sdk-app/src/design/prototypes/ComponentStatesSidebar.module.scss
@@ -0,0 +1,56 @@
+.root {
+  width: 14rem;
+  flex-shrink: 0;
+  background: var(--color-bg-sidebar);
+  border-left: 0.0625rem solid var(--color-border);
+  align-self: stretch;
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  overflow-y: auto;
+}
+
+.componentSection {
+  display: flex;
+  flex-direction: column;
+}
+
+.componentHeading {
+  margin: 0 0 0.375rem;
+  padding: 0 1rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.item a {
+  display: block;
+  padding: 0.375rem 1rem 0.375rem 1.25rem;
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 0.8125rem;
+  border-left: 0.1875rem solid transparent;
+  transition:
+    background 0.1s,
+    border-color 0.1s;
+
+  &:hover {
+    background: var(--color-hover-bg);
+  }
+
+  &:global(.active) {
+    background: var(--color-active-bg);
+    border-left-color: var(--color-active);
+    color: var(--color-active);
+    font-weight: 500;
+  }
+}
diff --git a/sdk-app/src/design/prototypes/ComponentStatesSidebar.tsx b/sdk-app/src/design/prototypes/ComponentStatesSidebar.tsx
new file mode 100644
index 000000000..e402a3108
--- /dev/null
+++ b/sdk-app/src/design/prototypes/ComponentStatesSidebar.tsx
@@ -0,0 +1,28 @@
+import { NavLink } from 'react-router-dom'
+import type { PrototypeComponent } from './prototypeTypes'
+import styles from './ComponentStatesSidebar.module.scss'
+
+export interface ComponentStatesSidebarProps {
+  /** Absolute base path, e.g. "/design/employee-compensation-history/component-states" */
+  basePath: string
+  components: PrototypeComponent[]
+}
+
+export function ComponentStatesSidebar({ basePath, components }: ComponentStatesSidebarProps) {
+  return (
+    <aside className={styles.root} aria-label="Component states">
+      {components.map(component => (
+        <section key={component.slug} className={styles.componentSection}>
+          <h2 className={styles.componentHeading}>{component.name}</h2>
+          <ul className={styles.list}>
+            {component.configurations.map(config => (
+              <li key={config.slug} className={styles.item}>
+                <NavLink to={`${basePath}/${component.slug}/${config.slug}`}>{config.name}</NavLink>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </aside>
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/AddContractorWizard.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/AddContractorWizard.tsx
similarity index 98%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/AddContractorWizard.tsx
rename to sdk-app/src/design/prototypes/contractor-management/AddContractor/AddContractorWizard.tsx
index 2fe4e4fa0..b02a07042 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/AddContractorWizard.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/AddContractor/AddContractorWizard.tsx
@@ -1,7 +1,7 @@
 import { Suspense, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
-import { Skeleton } from '../../contractor-profile/components/Skeleton'
+import { Skeleton } from '../../../components/common/Skeleton'
 import { ContractorProfile } from './ContractorProfile'
 import { ContractorAddress } from './ContractorAddress'
 import { ContractorPaymentMethod } from './ContractorPaymentMethod'
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorAddress.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorAddress.tsx
similarity index 85%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorAddress.tsx
rename to sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorAddress.tsx
index 2c2ebe6ef..d42ebcf83 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorAddress.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorAddress.tsx
@@ -1,7 +1,11 @@
 import { useContractorsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGet'
 import { useContractorsGetAddressSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGetAddress'
 import { useContractorsUpdateAddressMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsUpdateAddress'
-import { AddressForm, type AddressFormValues } from '../../common/AddressForm'
+import {
+  AddressForm,
+  type AddressFormValues,
+} from '../../../components/contractor/shared/AddressForm/AddressForm'
+import { contractorName } from '../../../components/contractor/shared/contractorName'
 import { BaseComponent, useBase } from '@/components/Base'
 import { componentEvents } from '@/shared/constants'
 
@@ -34,7 +38,7 @@ function Root({ contractorId }: { contractorId: string }) {
       const { contractorAddress } = await updateAddress({
         request: {
           contractorUuid: contractorId,
-          requestBody: {
+          contractorAddressUpdateBody: {
             version: address?.version as string,
             street1: payload.street1,
             street2: payload.street2,
@@ -54,9 +58,9 @@ function Root({ contractorId }: { contractorId: string }) {
     <AddressForm
       heading={contractor?.type === 'Business' ? 'Business address' : 'Home address'}
       description={
-        contractor?.type === 'Business'
-          ? "Enter the contractor's business address."
-          : "Enter the contractor's home address."
+        contractor
+          ? `Enter ${contractorName(contractor)}’s ${contractor.type === 'Business' ? 'business' : 'home'} address.`
+          : ''
       }
       defaultValues={{
         street1: address?.street1 || '',
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorNewHireReport.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorNewHireReport.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorNewHireReport.tsx
rename to sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorNewHireReport.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorOnboardingOverview.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorOnboardingOverview.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorOnboardingOverview.tsx
rename to sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorOnboardingOverview.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorPaymentMethod.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorPaymentMethod.tsx
new file mode 100644
index 000000000..22af893a9
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorPaymentMethod.tsx
@@ -0,0 +1,120 @@
+import { useMemo, useState } from 'react'
+import {
+  useContractorPaymentMethodGetSuspense,
+  buildContractorPaymentMethodGetQuery,
+} from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGet'
+import { useContractorPaymentMethodGetBankAccountsSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGetBankAccounts'
+import { useContractorPaymentMethodsCreateBankAccountMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodsCreateBankAccount'
+import { useContractorPaymentMethodUpdateMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodUpdate'
+import { useGustoEmbeddedContext } from '@gusto/embedded-api-v-2025-11-15/react-query/_context'
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  PaymentMethodForm,
+  type PaymentMethodFormValues,
+} from '../../../components/contractor/shared/PaymentMethodForm/PaymentMethodForm'
+import { BaseComponent, useBase } from '@/components/Base'
+import { componentEvents, PAYMENT_METHODS } from '@/shared/constants'
+
+interface ContractorPaymentMethodProps {
+  contractorId: string
+  onEvent: (eventType: string, data?: unknown) => void
+}
+
+export function ContractorPaymentMethod(props: ContractorPaymentMethodProps) {
+  return (
+    <BaseComponent onEvent={props.onEvent}>
+      <Root contractorId={props.contractorId} />
+    </BaseComponent>
+  )
+}
+
+function Root({ contractorId }: { contractorId: string }) {
+  const { onEvent, baseSubmitHandler } = useBase()
+  const queryClient = useQueryClient()
+  const gustoClient = useGustoEmbeddedContext()
+  const [isRefetching, setIsRefetching] = useState(false)
+
+  const {
+    data: { contractorPaymentMethod: paymentMethod },
+  } = useContractorPaymentMethodGetSuspense({ contractorUuid: contractorId })
+
+  const {
+    data: { contractorBankAccountList },
+  } = useContractorPaymentMethodGetBankAccountsSuspense({ contractorUuid: contractorId })
+  const bankAccount = contractorBankAccountList?.[0]
+
+  const { mutateAsync: createBankAccount, isPending: bankAccountPending } =
+    useContractorPaymentMethodsCreateBankAccountMutation()
+  const { mutateAsync: updatePaymentMethod, isPending: paymentMethodPending } =
+    useContractorPaymentMethodUpdateMutation()
+
+  const defaultValues = useMemo(
+    () => ({
+      type: paymentMethod!.type || PAYMENT_METHODS.check,
+      name: bankAccount?.name || '',
+      routingNumber: bankAccount?.routingNumber || '',
+      accountNumber: bankAccount?.hiddenAccountNumber || '',
+      accountType: bankAccount?.accountType || 'Checking',
+    }),
+    [paymentMethod, bankAccount],
+  )
+
+  const handleSubmit = async (data: PaymentMethodFormValues) => {
+    await baseSubmitHandler(data, async payload => {
+      let updatedPaymentMethodVersion: string | undefined
+
+      if (payload.type === PAYMENT_METHODS.directDeposit) {
+        const { name, routingNumber, accountNumber, accountType } = payload
+        const hasChanged =
+          !bankAccount ||
+          name !== bankAccount.name ||
+          routingNumber !== bankAccount.routingNumber ||
+          accountType !== bankAccount.accountType ||
+          accountNumber !== bankAccount.hiddenAccountNumber
+
+        if (hasChanged) {
+          const bankAccountResponse = await createBankAccount({
+            request: {
+              contractorUuid: contractorId,
+              contractorBankAccountCreateRequestBody: {
+                name,
+                routingNumber,
+                accountNumber,
+                accountType,
+              },
+            },
+          })
+          onEvent(componentEvents.CONTRACTOR_BANK_ACCOUNT_CREATED, bankAccountResponse)
+
+          setIsRefetching(true)
+          const refetched = await queryClient.fetchQuery(
+            buildContractorPaymentMethodGetQuery(gustoClient, { contractorUuid: contractorId }),
+          )
+          setIsRefetching(false)
+          updatedPaymentMethodVersion = refetched.contractorPaymentMethod!.version as string
+        }
+      }
+
+      const paymentMethodResponse = await updatePaymentMethod({
+        request: {
+          contractorUuid: contractorId,
+          requestBody: {
+            type: payload.type,
+            version: updatedPaymentMethodVersion ?? (paymentMethod!.version as string),
+          },
+        },
+      })
+      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_UPDATED, paymentMethodResponse)
+      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE)
+    })
+  }
+
+  return (
+    <PaymentMethodForm
+      heading="Payment method"
+      defaultValues={defaultValues}
+      isPending={bankAccountPending || paymentMethodPending || isRefetching}
+      onSubmit={handleSubmit}
+    />
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorProfile.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorProfile.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorProfile.tsx
rename to sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorProfile.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorSubmit.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorSubmit.tsx
similarity index 97%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorSubmit.tsx
rename to sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorSubmit.tsx
index 7f61b077f..b5cca69ad 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorSubmit.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/AddContractor/ContractorSubmit.tsx
@@ -43,7 +43,9 @@ function Root({
       const response = await mutateAsync({
         request: {
           contractorUuid: contractorId,
-          requestBody: { onboardingStatus: ContractorOnboardingStatus.ONBOARDING_COMPLETED },
+          contractorOnboardingStatusUpdateRequestBody: {
+            onboardingStatus: ContractorOnboardingStatus.ONBOARDING_COMPLETED,
+          },
         },
       })
       onEvent(
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/index.tsx b/sdk-app/src/design/prototypes/contractor-management/AddContractor/index.tsx
similarity index 94%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/index.tsx
rename to sdk-app/src/design/prototypes/contractor-management/AddContractor/index.tsx
index e2a05f74d..9145ad059 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/index.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/AddContractor/index.tsx
@@ -1,8 +1,8 @@
 import { Suspense, useState } from 'react'
 import { useNavigate, useOutletContext, useParams } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
-import { Skeleton } from '../../contractor-profile/components/Skeleton'
-import type { EntityIds } from '../../../../../../useEntities'
+import { Skeleton } from '../../../components/common/Skeleton'
+import type { EntityIds } from '../../../../useEntities'
 import { AddContractorWizard } from './AddContractorWizard'
 import type { WizardStep } from './AddContractorWizard'
 import { ContractorOnboardingOverview } from './ContractorOnboardingOverview'
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorDismiss/index.tsx b/sdk-app/src/design/prototypes/contractor-management/ContractorDismiss.tsx
similarity index 84%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorDismiss/index.tsx
rename to sdk-app/src/design/prototypes/contractor-management/ContractorDismiss.tsx
index 5078294c1..9b266c3e3 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorDismiss/index.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/ContractorDismiss.tsx
@@ -2,9 +2,9 @@ import { Suspense, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
 import { useContractorsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGet'
-import { ContractorDismissalForm } from '../../contractor-profile/components/ContractorDismissalForm'
-import { contractorName } from '../../contractor-profile/components/contractorName'
-import { Skeleton } from '../../contractor-profile/components/Skeleton'
+import { ContractorDismissalForm } from '../../components/contractor/management/ContractorDismissalForm/ContractorDismissalForm'
+import { contractorName } from '../../components/contractor/shared/contractorName'
+import { Skeleton } from '../../components/common/Skeleton'
 import { Flex } from '@/components/Common'
 import { BaseComponent } from '@/components/Base'
 
@@ -39,8 +39,8 @@ function ContractorDismissContent() {
       })
 
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}))
-        throw new Error(errorData.message || `Failed to dismiss contractor (${res.status})`)
+        const errorData = (await res.json().catch(() => ({}))) as { message?: string }
+        throw new Error(errorData.message ?? `Failed to dismiss contractor (${res.status})`)
       }
 
       const name = contractorName(contractor)
diff --git a/sdk-app/src/design/prototypes/contractor-management/ContractorList.tsx b/sdk-app/src/design/prototypes/contractor-management/ContractorList.tsx
new file mode 100644
index 000000000..1d237f791
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-management/ContractorList.tsx
@@ -0,0 +1,181 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useNavigate, useOutletContext, useSearchParams } from 'react-router-dom'
+import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
+import { useContractorsList } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsList'
+import { useContractorsDeleteMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsDelete'
+import { useContractorsUpdateOnboardingStatusMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsUpdateOnboardingStatus'
+import { useQueryClient } from '@tanstack/react-query'
+import type { EntityIds } from '../../../useEntities'
+import { contractorName } from '../../components/contractor/shared/contractorName'
+import {
+  ContractorList as ContractorListView,
+  type ContractorListTab,
+} from '../../components/contractor/management/ContractorList/ContractorList'
+import { ContractorOnboardingStatus } from '@/shared/constants'
+
+export function ContractorList() {
+  const { entities } = useOutletContext<{ entities: EntityIds }>()
+  const companyId = entities.companyId
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const queryClient = useQueryClient()
+
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [selectedTab, setSelectedTab] = useState<ContractorListTab>('active')
+
+  useEffect(() => {
+    const msg = searchParams.get('success')
+    if (msg) {
+      setSuccessMessage(msg)
+      setSearchParams({}, { replace: true })
+      queryClient.removeQueries({ queryKey: ['@gusto/embedded-api-v-2025-11-15', 'Contractors'] })
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const queryParams = useMemo(() => {
+    switch (selectedTab) {
+      case 'active':
+        return { companyUuid: companyId, onboardedActive: true }
+      case 'onboarding':
+        return { companyUuid: companyId, onboardedActive: false }
+      case 'dismissed':
+        return { companyUuid: companyId, terminatedToday: true }
+      default:
+        return { companyUuid: companyId, onboardedActive: true }
+    }
+  }, [companyId, selectedTab])
+
+  const { data, isPending } = useContractorsList(queryParams)
+  const { mutateAsync: deleteContractor } = useContractorsDeleteMutation()
+  const { mutateAsync: updateOnboardingStatus } = useContractorsUpdateOnboardingStatusMutation()
+
+  // Active tab also merges in upcoming-rehire contractors from the
+  // dismissed-tab query so they show up alongside currently-active ones.
+  const { data: dismissedData } = useContractorsList(
+    { companyUuid: companyId, terminatedToday: true },
+    { enabled: selectedTab === 'active' },
+  )
+  const pendingRehires = useMemo(
+    () =>
+      (dismissedData?.contractors ?? [])
+        .filter(c => c.upcomingEmployment?.startDate)
+        .sort((a, b) =>
+          (a.upcomingEmployment?.startDate ?? '').localeCompare(
+            b.upcomingEmployment?.startDate ?? '',
+          ),
+        ),
+    [dismissedData],
+  )
+
+  const contractors = useMemo(() => {
+    if (selectedTab !== 'active') return data?.contractors ?? []
+    return [...(data?.contractors ?? []), ...pendingRehires]
+  }, [data, pendingRehires, selectedTab])
+
+  const cancelTermination = async (contractor: Contractor, type: 'dismissal' | 'rehire') => {
+    try {
+      const res = await fetch(
+        `/api/v1/contractors/${contractor.uuid}/${type === 'rehire' ? 'rehire' : 'termination'}`,
+        { method: 'DELETE' },
+      )
+      if (!res.ok) {
+        const errorData = (await res.json().catch(() => ({}))) as { message?: string }
+        throw new Error(
+          errorData.message ??
+            `Failed to cancel ${type === 'rehire' ? 'rehire' : 'dismissal'} (${res.status})`,
+        )
+      }
+      setSuccessMessage(
+        type === 'rehire'
+          ? `Rehire cancelled for ${contractorName(contractor)}`
+          : `Dismissal cancelled for ${contractorName(contractor)}`,
+      )
+      queryClient.removeQueries({ queryKey: ['@gusto/embedded-api-v-2025-11-15', 'Contractors'] })
+    } catch (error) {
+      setErrorMessage(
+        error instanceof Error
+          ? error.message
+          : `Failed to cancel ${type === 'rehire' ? 'rehire' : 'dismissal'}. Please try again.`,
+      )
+      throw error
+    }
+  }
+
+  return (
+    <ContractorListView
+      contractors={contractors}
+      isFetching={isPending}
+      selectedTab={selectedTab}
+      onSelectTab={setSelectedTab}
+      successMessage={successMessage}
+      errorMessage={errorMessage}
+      onDismissSuccess={() => {
+        setSuccessMessage(null)
+      }}
+      onDismissError={() => {
+        setErrorMessage(null)
+      }}
+      onAddContractor={() => {
+        void navigate('add')
+      }}
+      onViewContractor={contractor => {
+        void navigate(contractor.uuid)
+      }}
+      onDismissContractor={contractor => {
+        void navigate(`${contractor.uuid}/dismiss`)
+      }}
+      onRehireContractor={contractor => {
+        void navigate(`${contractor.uuid}/rehire`)
+      }}
+      onEditOnboardingContractor={contractor => {
+        const status = contractor.onboardingStatus
+        if (
+          status === ContractorOnboardingStatus.ADMIN_ONBOARDING_REVIEW ||
+          status === ContractorOnboardingStatus.SELF_ONBOARDING_REVIEW
+        ) {
+          void navigate(contractor.uuid)
+        } else {
+          void navigate(`add/${contractor.uuid}`)
+        }
+      }}
+      onConfirmCancelDismissal={contractor => cancelTermination(contractor, 'dismissal')}
+      onConfirmCancelRehire={contractor => cancelTermination(contractor, 'rehire')}
+      onConfirmRemoveContractor={async contractor => {
+        try {
+          await deleteContractor({ request: { contractorUuid: contractor.uuid } })
+          setSuccessMessage(`${contractorName(contractor)} has been removed`)
+          queryClient.removeQueries({
+            queryKey: ['@gusto/embedded-api-v-2025-11-15', 'Contractors'],
+          })
+        } catch (error) {
+          setErrorMessage(
+            error instanceof Error ? error.message : 'Something went wrong. Please try again.',
+          )
+          throw error
+        }
+      }}
+      onConfirmCancelSelfOnboarding={async contractor => {
+        try {
+          await updateOnboardingStatus({
+            request: {
+              contractorUuid: contractor.uuid,
+              contractorOnboardingStatusUpdateRequestBody: {
+                onboardingStatus: 'admin_onboarding_incomplete',
+              },
+            },
+          })
+          setSuccessMessage(`Self-onboarding cancelled for ${contractorName(contractor)}`)
+          queryClient.removeQueries({
+            queryKey: ['@gusto/embedded-api-v-2025-11-15', 'Contractors'],
+          })
+        } catch (error) {
+          setErrorMessage(
+            error instanceof Error ? error.message : 'Something went wrong. Please try again.',
+          )
+          throw error
+        }
+      }}
+    />
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorManagementFlow/index.tsx b/sdk-app/src/design/prototypes/contractor-management/ContractorManagementFlow.tsx
similarity index 78%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorManagementFlow/index.tsx
rename to sdk-app/src/design/prototypes/contractor-management/ContractorManagementFlow.tsx
index b941071e8..d99a3faa5 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorManagementFlow/index.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/ContractorManagementFlow.tsx
@@ -1,5 +1,5 @@
 import { Outlet, useOutletContext } from 'react-router-dom'
-import type { EntityIds } from '../../../../../useEntities'
+import type { EntityIds } from '../../../useEntities'
 
 export function ContractorManagementFlow() {
   const { entities } = useOutletContext<{ entities: EntityIds }>()
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/ContractorProfileComponents.tsx b/sdk-app/src/design/prototypes/contractor-management/ContractorProfile/ContractorProfileComponents.tsx
similarity index 94%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/ContractorProfileComponents.tsx
rename to sdk-app/src/design/prototypes/contractor-management/ContractorProfile/ContractorProfileComponents.tsx
index 56f070bad..c4a9ba24d 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/ContractorProfileComponents.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/ContractorProfile/ContractorProfileComponents.tsx
@@ -16,17 +16,17 @@ import { useContractorsUpdateMutation } from '@gusto/embedded-api-v-2025-11-15/r
 import { useContractorsUpdateOnboardingStatusMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsUpdateOnboardingStatus'
 import { useGustoEmbeddedContext } from '@gusto/embedded-api-v-2025-11-15/react-query/_context'
 import { useQueryClient } from '@tanstack/react-query'
-import { contractorName } from '../components/contractorName'
-import { ContractorAddress } from '../components/ContractorAddress'
-import { ContractorAddressForm } from '../components/ContractorAddressForm'
-import { ContractorDetails } from '../components/ContractorDetails'
-import { ContractorPaymentMethod } from '../components/ContractorPaymentMethod'
-import { ContractorPaymentMethodForm } from '../components/ContractorPaymentMethodForm'
-import { ContractorDocuments } from '../components/ContractorDocuments'
-import { ContractorPay } from '../components/ContractorPay'
-import { ContractorPayForm } from '../components/ContractorPayForm'
-import { ContractorDetailsForm } from '../components/ContractorDetailsForm'
-import { Skeleton } from '../components/Skeleton'
+import { contractorName } from '../../../components/contractor/shared/contractorName'
+import { ContractorAddress } from '../../../components/contractor/management/ContractorAddress/ContractorAddress'
+import { ContractorAddressForm } from '../../../components/contractor/management/ContractorAddressForm/ContractorAddressForm'
+import { ContractorDetails } from '../../../components/contractor/management/ContractorDetails/ContractorDetails'
+import { ContractorPaymentMethod } from '../../../components/contractor/management/ContractorPaymentMethod/ContractorPaymentMethod'
+import { ContractorPaymentMethodForm } from '../../../components/contractor/management/ContractorPaymentMethodForm/ContractorPaymentMethodForm'
+import { ContractorDocuments } from '../../../components/contractor/management/ContractorDocuments/ContractorDocuments'
+import { ContractorPay } from '../../../components/contractor/management/ContractorPay/ContractorPay'
+import { ContractorPayForm } from '../../../components/contractor/management/ContractorPayForm/ContractorPayForm'
+import { ContractorDetailsForm } from '../../../components/contractor/management/ContractorDetailsForm/ContractorDetailsForm'
+import { Skeleton } from '../../../components/common/Skeleton'
 import { Flex } from '@/components/Common'
 import { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'
 import { BaseComponent } from '@/components/Base'
@@ -225,7 +225,7 @@ function ProfileViewContent({ contractor }: { contractor: Contractor }) {
       await updateOnboardingStatus({
         request: {
           contractorUuid: contractor.uuid,
-          requestBody: { onboardingStatus: 'onboarding_completed' },
+          contractorOnboardingStatusUpdateRequestBody: { onboardingStatus: 'onboarding_completed' },
         },
       })
 
@@ -484,7 +484,7 @@ function EditAddressContent() {
     await updateAddress({
       request: {
         contractorUuid: contractor.uuid,
-        requestBody: {
+        contractorAddressUpdateBody: {
           version: address?.version ?? '',
           street1: data.street1,
           street2: data.street2,
@@ -540,7 +540,7 @@ function AddPaymentMethodContent() {
     await createBankAccount({
       request: {
         contractorUuid: contractor.uuid,
-        requestBody: {
+        contractorBankAccountCreateRequestBody: {
           name: data.name,
           routingNumber: data.routingNumber,
           accountNumber: data.accountNumber,
@@ -615,7 +615,7 @@ function EditPaymentMethodContent() {
     await createBankAccount({
       request: {
         contractorUuid: contractor.uuid,
-        requestBody: {
+        contractorBankAccountCreateRequestBody: {
           name: data.name,
           routingNumber: data.routingNumber,
           accountNumber: data.accountNumber,
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/contractorProfileStateMachine.ts b/sdk-app/src/design/prototypes/contractor-management/ContractorProfile/contractorProfileStateMachine.ts
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/contractorProfileStateMachine.ts
rename to sdk-app/src/design/prototypes/contractor-management/ContractorProfile/contractorProfileStateMachine.ts
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/index.tsx b/sdk-app/src/design/prototypes/contractor-management/ContractorProfile/index.tsx
similarity index 96%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/index.tsx
rename to sdk-app/src/design/prototypes/contractor-management/ContractorProfile/index.tsx
index d505952df..7e98ca9cf 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/ContractorProfile/index.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/ContractorProfile/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { useOutletContext, useParams } from 'react-router-dom'
 import { createMachine } from 'robot3'
-import type { EntityIds } from '../../../../../useEntities'
+import type { EntityIds } from '../../../../useEntities'
 import { contractorProfileStateMachine } from './contractorProfileStateMachine'
 import type { ContractorProfileContextInterface } from './ContractorProfileComponents'
 import { ProfileViewContextual } from './ContractorProfileComponents'
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorRehire/index.tsx b/sdk-app/src/design/prototypes/contractor-management/ContractorRehire.tsx
similarity index 83%
rename from sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorRehire/index.tsx
rename to sdk-app/src/design/prototypes/contractor-management/ContractorRehire.tsx
index 6adc8556b..de3105c3d 100644
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/ContractorRehire/index.tsx
+++ b/sdk-app/src/design/prototypes/contractor-management/ContractorRehire.tsx
@@ -2,9 +2,9 @@ import { Suspense, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
 import { useContractorsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGet'
-import { contractorName } from '../../contractor-profile/components/contractorName'
-import { ContractorRehireForm } from '../../contractor-profile/components/ContractorRehireForm'
-import { Skeleton } from '../../contractor-profile/components/Skeleton'
+import { contractorName } from '../../components/contractor/shared/contractorName'
+import { ContractorRehireForm } from '../../components/contractor/management/ContractorRehireForm/ContractorRehireForm'
+import { Skeleton } from '../../components/common/Skeleton'
 import { Flex } from '@/components/Common'
 import { BaseComponent } from '@/components/Base'
 
@@ -39,8 +39,8 @@ function ContractorRehireContent() {
       })
 
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}))
-        throw new Error(errorData.message || `Failed to rehire contractor (${res.status})`)
+        const errorData = (await res.json().catch(() => ({}))) as { message?: string }
+        throw new Error(errorData.message ?? `Failed to rehire contractor (${res.status})`)
       }
 
       const name = contractorName(contractor)
diff --git a/sdk-app/src/design/prototypes/contractor-management/common/PaymentMethodForm.tsx b/sdk-app/src/design/prototypes/contractor-management/common/PaymentMethodForm.tsx
deleted file mode 100644
index 9aacdbc35..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/common/PaymentMethodForm.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { useMemo, useState } from 'react'
-import { FormProvider, useForm, useWatch } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import z from 'zod'
-import {
-  useContractorPaymentMethodGetSuspense,
-  buildContractorPaymentMethodGetQuery,
-} from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGet'
-import { useContractorPaymentMethodGetBankAccountsSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGetBankAccounts'
-import { useContractorPaymentMethodsCreateBankAccountMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodsCreateBankAccount'
-import { useContractorPaymentMethodUpdateMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodUpdate'
-import { useGustoEmbeddedContext } from '@gusto/embedded-api-v-2025-11-15/react-query/_context'
-import { useQueryClient } from '@tanstack/react-query'
-import { useBase } from '@/components/Base'
-import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
-import { Form } from '@/components/Common/Form'
-import { ActionsLayout } from '@/components/Common/ActionsLayout'
-import { Flex, RadioGroupField, TextInputField } from '@/components/Common'
-import { componentEvents, PAYMENT_METHODS } from '@/shared/constants'
-import { accountNumberValidation, routingNumberValidation } from '@/helpers/validations'
-
-const PaymentMethodSchema = z.discriminatedUnion('type', [
-  z.object({
-    type: z.literal('Direct Deposit'),
-    name: z.string().min(1),
-    routingNumber: routingNumberValidation,
-    accountNumber: z.any(),
-    accountType: z.enum(['Checking', 'Savings']),
-  }),
-  z.object({
-    type: z.literal('Check'),
-  }),
-])
-
-type PaymentMethodInputs = z.input<typeof PaymentMethodSchema>
-
-interface PaymentMethodFormProps {
-  contractorId: string
-  heading?: string
-  description?: string
-  doneEvent?: string
-  donePayload?: Record<string, unknown>
-}
-
-export function PaymentMethodForm({
-  contractorId,
-  heading = 'Payment method',
-  description,
-  doneEvent = componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE,
-  donePayload,
-}: PaymentMethodFormProps) {
-  const { onEvent, baseSubmitHandler } = useBase()
-  const Components = useComponentContext()
-  const queryClient = useQueryClient()
-  const gustoClient = useGustoEmbeddedContext()
-  const [isPaymentMethodPending, setIsPaymentMethodPending] = useState(false)
-
-  const contractorPaymentMethod = useContractorPaymentMethodGetSuspense({
-    contractorUuid: contractorId,
-  })
-
-  const getPaymentMethodQuery = buildContractorPaymentMethodGetQuery(gustoClient, {
-    contractorUuid: contractorId,
-  })
-
-  const paymentMethod = contractorPaymentMethod.data.contractorPaymentMethod!
-
-  const {
-    data: { contractorBankAccountList },
-  } = useContractorPaymentMethodGetBankAccountsSuspense({
-    contractorUuid: contractorId,
-  })
-  const bankAccount = contractorBankAccountList?.[0] || undefined
-
-  const { mutateAsync: updatePaymentMethod, isPending: paymentMethodPending } =
-    useContractorPaymentMethodUpdateMutation()
-  const { mutateAsync: createBankAccount, isPending: bankAccountPending } =
-    useContractorPaymentMethodsCreateBankAccountMutation()
-
-  const defaultValues = useMemo(
-    () => ({
-      type: paymentMethod.type || PAYMENT_METHODS.check,
-      name: bankAccount?.name || '',
-      routingNumber: bankAccount?.routingNumber || '',
-      accountNumber: bankAccount?.hiddenAccountNumber || '',
-      accountType: bankAccount?.accountType || 'Checking',
-    }),
-    [paymentMethod, bankAccount],
-  )
-
-  const formMethods = useForm({
-    resolver: zodResolver(PaymentMethodSchema),
-    defaultValues,
-  })
-
-  const watchedType = useWatch({ control: formMethods.control, name: 'type' })
-
-  const onSubmit = async (data: PaymentMethodInputs) => {
-    await baseSubmitHandler(data, async payload => {
-      let updatedPaymentMethodVersion: string | undefined
-
-      if (payload.type === PAYMENT_METHODS.directDeposit) {
-        const { name, accountNumber, routingNumber, accountType } = payload
-        const hasChanged =
-          !bankAccount ||
-          name !== bankAccount.name ||
-          routingNumber !== bankAccount.routingNumber ||
-          accountType !== bankAccount.accountType ||
-          accountNumber !== bankAccount.hiddenAccountNumber
-
-        if (hasChanged) {
-          const res = accountNumberValidation.safeParse(payload.accountNumber)
-          if (!res.success) {
-            formMethods.setError('accountNumber', { type: 'validate' })
-            return
-          }
-
-          const bankAccountResponse = await createBankAccount({
-            request: {
-              contractorUuid: contractorId,
-              requestBody: { name, routingNumber, accountNumber, accountType },
-            },
-          })
-
-          onEvent(componentEvents.CONTRACTOR_BANK_ACCOUNT_CREATED, bankAccountResponse)
-        }
-
-        setIsPaymentMethodPending(true)
-        const updatedPaymentMethodResponse = await queryClient.fetchQuery(getPaymentMethodQuery)
-        const updatedPaymentMethod = updatedPaymentMethodResponse.contractorPaymentMethod!
-        setIsPaymentMethodPending(false)
-
-        updatedPaymentMethodVersion = updatedPaymentMethod.version as string
-      }
-
-      const paymentMethodResponse = await updatePaymentMethod({
-        request: {
-          contractorUuid: contractorId,
-          requestBody: {
-            type: payload.type,
-            version: updatedPaymentMethodVersion || (paymentMethod.version as string),
-          },
-        },
-      })
-      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_UPDATED, paymentMethodResponse)
-      onEvent(doneEvent, donePayload)
-    })
-  }
-
-  const showBankAccountForm = watchedType === PAYMENT_METHODS.directDeposit
-  const isDisabled = paymentMethodPending || bankAccountPending || isPaymentMethodPending
-
-  return (
-    <FormProvider {...formMethods}>
-      <Form onSubmit={formMethods.handleSubmit(onSubmit)}>
-        <Flex flexDirection="column" gap={24}>
-          <Flex flexDirection="column" gap={4}>
-            <Components.Heading as="h2">{heading}</Components.Heading>
-            {description && <Components.Text variant="supporting">{description}</Components.Text>}
-          </Flex>
-
-          <Flex flexDirection="column" gap={20}>
-            <RadioGroupField
-              name="type"
-              label="Payment method"
-              shouldVisuallyHideLabel
-              options={[
-                {
-                  value: PAYMENT_METHODS.directDeposit,
-                  label: 'Direct deposit',
-                  description: 'Get paid directly to your bank account.',
-                },
-                {
-                  value: PAYMENT_METHODS.check,
-                  label: 'Check',
-                  description: 'Receive a paper check from your employer.',
-                },
-              ]}
-            />
-
-            {showBankAccountForm && (
-              <>
-                <TextInputField
-                  name="name"
-                  isRequired
-                  label="Account nickname"
-                  errorMessage="Account nickname is required"
-                />
-                <TextInputField
-                  name="routingNumber"
-                  label="Routing number"
-                  isRequired
-                  description="9 digits, on the bottom left of a check"
-                  errorMessage="Enter a valid 9-digit routing number"
-                />
-                <TextInputField
-                  name="accountNumber"
-                  label="Account number"
-                  errorMessage="Enter a valid account number"
-                  isRequired
-                />
-                <RadioGroupField
-                  name="accountType"
-                  isRequired
-                  label="Account type"
-                  options={[
-                    { value: 'Checking', label: 'Checking' },
-                    { value: 'Savings', label: 'Savings' },
-                  ]}
-                />
-              </>
-            )}
-          </Flex>
-
-          <ActionsLayout>
-            <Components.Button type="submit" variant="primary" isDisabled={isDisabled}>
-              {isDisabled ? 'Saving...' : 'Continue'}
-            </Components.Button>
-          </ActionsLayout>
-        </Flex>
-      </Form>
-    </FormProvider>
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorPaymentMethod.tsx b/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorPaymentMethod.tsx
deleted file mode 100644
index a0f517032..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-list/AddContractor/ContractorPaymentMethod.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { PaymentMethodForm } from '../../common/PaymentMethodForm'
-import { BaseComponent } from '@/components/Base'
-
-interface ContractorPaymentMethodProps {
-  contractorId: string
-  onEvent: (eventType: string, data?: unknown) => void
-}
-
-export function ContractorPaymentMethod(props: ContractorPaymentMethodProps) {
-  return (
-    <BaseComponent onEvent={props.onEvent}>
-      <PaymentMethodForm contractorId={props.contractorId} heading="Payment method" />
-    </BaseComponent>
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/Skeleton.module.scss b/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/Skeleton.module.scss
deleted file mode 100644
index 3fc069444..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/Skeleton.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--g-colorBodyAccent) 25%,
-    var(--g-colorBody) 50%,
-    var(--g-colorBodyAccent) 75%
-  );
-  background-size: 200% 100%;
-  animation: pulse 1.5s infinite linear;
-  border-radius: toRem(4);
-}
-
-@keyframes pulse {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/Skeleton.tsx b/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/Skeleton.tsx
deleted file mode 100644
index 7484dd838..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/contractor-profile/components/Skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { CSSProperties } from 'react'
-import cn from 'classnames'
-import styles from './Skeleton.module.scss'
-
-interface SkeletonProps {
-  width?: CSSProperties['width']
-  height?: CSSProperties['height']
-  className?: string
-}
-
-export function Skeleton({ width, height, className }: SkeletonProps) {
-  return (
-    <div className={cn(styles.skeleton, className)} style={{ width, height }} aria-hidden="true" />
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/index.tsx b/sdk-app/src/design/prototypes/contractor-management/index.tsx
new file mode 100644
index 000000000..f6e120b50
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-management/index.tsx
@@ -0,0 +1,8 @@
+import { ComponentStatesPage } from '../ComponentStatesPage'
+import { components } from './states'
+
+const BASE_PATH = '/design/contractor-management'
+
+export function ContractorManagementStates() {
+  return <ComponentStatesPage basePath={`${BASE_PATH}/component-states`} components={components} />
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorDocumentSigner.tsx b/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorDocumentSigner.tsx
deleted file mode 100644
index 53bea2dda..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorDocumentSigner.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Suspense, useState } from 'react'
-import { useContractorDocumentsGetAllSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsGetAll'
-import { invalidateContractorDocumentsGetAll } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsGetAll'
-import { useQueryClient } from '@tanstack/react-query'
-import type { Document } from '@gusto/embedded-api-v-2025-11-15/models/components/document'
-import { ContractorSignatureForm } from './ContractorSignatureForm'
-import { contractorSelfOnboardingEvents } from './events'
-import {
-  BaseComponent,
-  useBase,
-  type BaseComponentInterface,
-  type CommonComponentInterface,
-} from '@/components/Base'
-import { DataView, useDataView, Flex, ActionsLayout } from '@/components/Common'
-import { EmptyData } from '@/components/Common/EmptyData/EmptyData'
-import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
-
-interface ContractorDocumentSignerProps extends CommonComponentInterface {
-  contractorId: string
-}
-
-export function ContractorDocumentSigner(
-  props: ContractorDocumentSignerProps & BaseComponentInterface,
-) {
-  return (
-    <BaseComponent {...props}>
-      <Root {...props} />
-    </BaseComponent>
-  )
-}
-
-type DocumentSignerView = { type: 'list' } | { type: 'sign'; documentUuid: string }
-
-const Root = ({ contractorId, className }: ContractorDocumentSignerProps) => {
-  const { onEvent: _onEvent } = useBase()
-  const onEvent = _onEvent as (type: string, data?: unknown) => void
-  const Components = useComponentContext()
-  const queryClient = useQueryClient()
-  const [view, setView] = useState<DocumentSignerView>({ type: 'list' })
-
-  const {
-    data: { documents },
-  } = useContractorDocumentsGetAllSuspense({ contractorUuid: contractorId })
-
-  const allDocs = documents ?? []
-  const hasSignedAllDocs = allDocs.every(doc => !doc.requiresSigning || doc.signedAt)
-
-  const handleRequestSign = (doc: Document) => {
-    onEvent(contractorSelfOnboardingEvents.CONTRACTOR_VIEW_DOCUMENT_TO_SIGN, {
-      uuid: doc.uuid,
-      title: doc.title,
-    })
-    setView({ type: 'sign', documentUuid: doc.uuid! })
-  }
-
-  const handleSignComplete = () => {
-    void invalidateContractorDocumentsGetAll(queryClient, [contractorId])
-    setView({ type: 'list' })
-  }
-
-  const handleBack = () => {
-    setView({ type: 'list' })
-  }
-
-  const handleContinue = () => {
-    onEvent(contractorSelfOnboardingEvents.CONTRACTOR_DOCUMENTS_DONE)
-  }
-
-  const dataViewProps = useDataView<Document>({
-    data: allDocs,
-    columns: [
-      {
-        title: 'Document',
-        render: (doc: Document) => (
-          <>
-            <Components.Text weight="medium" size="sm">
-              {doc.title ?? doc.name ?? '–'}
-            </Components.Text>
-            <Components.Text variant="supporting" size="sm">
-              {doc.description ?? '–'}
-            </Components.Text>
-          </>
-        ),
-      },
-      {
-        title: 'Status',
-        render: (doc: Document) =>
-          doc.signedAt ? (
-            <Components.Badge status="success">Signed</Components.Badge>
-          ) : (
-            <Components.Badge status="warning">Not signed</Components.Badge>
-          ),
-      },
-      {
-        title: '',
-        render: (doc: Document) =>
-          doc.signedAt ? null : (
-            <Components.Button
-              variant="secondary"
-              onClick={() => {
-                handleRequestSign(doc)
-              }}
-            >
-              Sign document
-            </Components.Button>
-          ),
-      },
-    ],
-    emptyState: () => <EmptyData title="No documents to sign" />,
-  })
-
-  if (view.type === 'sign') {
-    return (
-      <Suspense fallback={<div>Loading document...</div>}>
-        <ContractorSignatureForm
-          contractorId={contractorId}
-          documentUuid={view.documentUuid}
-          onSignComplete={handleSignComplete}
-          onBack={handleBack}
-        />
-      </Suspense>
-    )
-  }
-
-  return (
-    <section className={className}>
-      <Flex flexDirection="column" gap={24}>
-        <header>
-          <Components.Heading as="h2">Review and sign documents</Components.Heading>
-          <Components.Text>
-            Please review and sign the following documents to complete your onboarding.
-          </Components.Text>
-        </header>
-
-        <DataView label="Contractor documents" {...dataViewProps} />
-
-        <ActionsLayout>
-          <Components.Button
-            variant="primary"
-            onClick={handleContinue}
-            isDisabled={!hasSignedAllDocs}
-          >
-            Continue
-          </Components.Button>
-        </ActionsLayout>
-      </Flex>
-    </section>
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorLanding.tsx b/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorLanding.tsx
deleted file mode 100644
index bcb851369..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorLanding.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useMemo } from 'react'
-import { useContractorsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGet'
-import { useCompaniesGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/companiesGet'
-import DOMPurify from 'dompurify'
-import { contractorSelfOnboardingEvents } from './events'
-import {
-  BaseComponent,
-  useBase,
-  type BaseComponentInterface,
-  type CommonComponentInterface,
-} from '@/components/Base'
-import { Flex, ActionsLayout } from '@/components/Common'
-import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
-
-interface ContractorLandingProps extends CommonComponentInterface {
-  contractorId: string
-  companyId: string
-}
-
-export function ContractorLanding(props: ContractorLandingProps & BaseComponentInterface) {
-  return (
-    <BaseComponent {...props}>
-      <Root {...props} />
-    </BaseComponent>
-  )
-}
-
-const Root = ({ contractorId, companyId, className }: ContractorLandingProps) => {
-  const { onEvent: _onEvent } = useBase()
-  const onEvent = _onEvent as (type: string, data?: unknown) => void
-  const Components = useComponentContext()
-
-  const {
-    data: { contractor },
-  } = useContractorsGetSuspense({ contractorUuid: contractorId })
-
-  const {
-    data: { company },
-  } = useCompaniesGetSuspense({ companyId })
-
-  const displayName = useMemo(
-    () => DOMPurify.sanitize(contractor?.firstName ?? contractor?.businessName ?? 'there'),
-    [contractor],
-  )
-  const companyName = useMemo(() => DOMPurify.sanitize(company?.name ?? 'Your company'), [company])
-
-  return (
-    <section className={className}>
-      <Components.Box
-        footer={
-          <ActionsLayout>
-            <Components.Button
-              variant="primary"
-              onClick={() => {
-                onEvent(contractorSelfOnboardingEvents.CONTRACTOR_SELF_ONBOARDING_START)
-              }}
-            >
-              Get started
-            </Components.Button>
-          </ActionsLayout>
-        }
-      >
-        <Flex alignItems="center" flexDirection="column" gap={32}>
-          <Flex flexDirection="column" gap={4}>
-            <Components.Heading as="h2">
-              Welcome, {displayName}! {companyName} has invited you to complete your onboarding.
-            </Components.Heading>
-            <Components.Text variant="supporting">
-              We just need a few details from you to get set up.
-            </Components.Text>
-          </Flex>
-          <Flex flexDirection="column" gap={8}>
-            <Components.Heading as="h3">
-              Here&apos;s what you&apos;ll need to do:
-            </Components.Heading>
-            <Components.UnorderedList
-              items={[
-                'Complete your profile and tax information',
-                'Add your mailing address',
-                'Set up your payment method',
-                'Review and sign documents',
-              ]}
-            />
-          </Flex>
-        </Flex>
-      </Components.Box>
-    </section>
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorOnboardingSummary.tsx b/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorOnboardingSummary.tsx
deleted file mode 100644
index ceb995c0a..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorOnboardingSummary.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { contractorSelfOnboardingEvents } from './events'
-import {
-  BaseComponent,
-  useBase,
-  type BaseComponentInterface,
-  type CommonComponentInterface,
-} from '@/components/Base'
-import { Flex, ActionsLayout } from '@/components/Common'
-import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
-
-interface ContractorOnboardingSummaryProps extends CommonComponentInterface {
-  contractorId: string
-}
-
-export function ContractorOnboardingSummary(
-  props: ContractorOnboardingSummaryProps & BaseComponentInterface,
-) {
-  return (
-    <BaseComponent {...props}>
-      <Root {...props} />
-    </BaseComponent>
-  )
-}
-
-const Root = ({ className }: ContractorOnboardingSummaryProps) => {
-  const { onEvent: _onEvent } = useBase()
-  const onEvent = _onEvent as (type: string, data?: unknown) => void
-  const Components = useComponentContext()
-
-  return (
-    <section className={className}>
-      <Flex flexDirection="column" gap={32}>
-        <Flex alignItems="center" flexDirection="column" gap={8}>
-          <Components.Heading as="h2" textAlign="center">
-            You&apos;re all set!
-          </Components.Heading>
-          <Components.Text textAlign="center">
-            Your onboarding information has been submitted. Your company will review your details
-            and you&apos;ll be notified if anything else is needed.
-          </Components.Text>
-        </Flex>
-        <ActionsLayout justifyContent="center">
-          <Components.Button
-            variant="secondary"
-            onClick={() => {
-              onEvent(contractorSelfOnboardingEvents.CONTRACTOR_SELF_ONBOARDING_DONE)
-            }}
-          >
-            Done
-          </Components.Button>
-        </ActionsLayout>
-      </Flex>
-    </section>
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfPaymentMethodForm.tsx b/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfPaymentMethodForm.tsx
deleted file mode 100644
index dbee406f5..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfPaymentMethodForm.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { PaymentMethodForm } from '../common/PaymentMethodForm'
-import { BaseComponent } from '@/components/Base'
-import { componentEvents } from '@/shared/constants'
-
-interface ContractorSelfPaymentMethodFormProps {
-  contractorId: string
-  onEvent: (...args: unknown[]) => void
-}
-
-export function ContractorSelfPaymentMethodForm(props: ContractorSelfPaymentMethodFormProps) {
-  return (
-    <BaseComponent onEvent={props.onEvent}>
-      <PaymentMethodForm
-        contractorId={props.contractorId}
-        heading="Set up your payment method"
-        description="Choose how you'd like to get paid."
-        doneEvent={componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE}
-        donePayload={{ contractorId: props.contractorId, selfOnboarding: true }}
-      />
-    </BaseComponent>
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSignatureForm.tsx b/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSignatureForm.tsx
deleted file mode 100644
index 26861a7bf..000000000
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSignatureForm.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { useForm, FormProvider } from 'react-hook-form'
-import { useContractorDocumentsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsGet'
-import { useContractorDocumentsGetPdfSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsGetPdf'
-import { useContractorDocumentsSignMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsSign'
-import { contractorSelfOnboardingEvents } from './events'
-import { useBase } from '@/components/Base'
-import { Flex, ActionsLayout } from '@/components/Common'
-import { Form } from '@/components/Common/Form'
-import { TextInputField } from '@/components/Common/Fields/TextInputField'
-import { CheckboxField } from '@/components/Common/Fields/CheckboxField'
-import { DocumentViewer } from '@/components/Common/DocumentViewer'
-import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
-
-interface ContractorSignatureFormProps {
-  contractorId: string
-  documentUuid: string
-  onSignComplete: () => void
-  onBack: () => void
-}
-
-interface SignatureFormData {
-  signature: string
-  agree: boolean
-}
-
-export function ContractorSignatureForm({
-  documentUuid,
-  onSignComplete,
-  onBack,
-}: ContractorSignatureFormProps) {
-  const { onEvent: _onEvent } = useBase()
-  const onEvent = _onEvent as (type: string, data?: unknown) => void
-  const Components = useComponentContext()
-
-  const {
-    data: { document },
-  } = useContractorDocumentsGetSuspense({ documentUuid })
-
-  const {
-    data: { documentPdf },
-  } = useContractorDocumentsGetPdfSuspense({ documentUuid })
-
-  const { mutateAsync: signDocument, isPending } = useContractorDocumentsSignMutation()
-
-  const pdfUrl = documentPdf?.documentUrl ?? null
-
-  const formMethods = useForm<SignatureFormData>({
-    defaultValues: {
-      signature: '',
-      agree: false,
-    },
-  })
-
-  const { handleSubmit } = formMethods
-
-  const onSubmit = async (data: SignatureFormData) => {
-    const fields = (document?.fields ?? []).map(field => ({
-      key: field.key ?? '',
-      value: field.key?.includes('signature') ? data.signature : (field.value ?? ''),
-    }))
-
-    const result = await signDocument({
-      request: {
-        documentUuid,
-        requestBody: {
-          fields,
-          agree: data.agree,
-        },
-      },
-    })
-
-    onEvent(contractorSelfOnboardingEvents.CONTRACTOR_SIGN_DOCUMENT, result.documentSigned)
-    onSignComplete()
-  }
-
-  return (
-    <section>
-      <FormProvider {...formMethods}>
-        <Form onSubmit={handleSubmit(onSubmit)}>
-          <Flex flexDirection="column" gap={24}>
-            <Flex flexDirection="column" gap={4}>
-              <Components.Heading as="h2">{document?.title ?? 'Sign document'}</Components.Heading>
-              {document?.description && (
-                <Components.Text variant="supporting">{document.description}</Components.Text>
-              )}
-            </Flex>
-
-            <DocumentViewer
-              url={pdfUrl}
-              title={document?.title}
-              downloadInstructions="Download and review the document before signing."
-              viewDocumentLabel="View document"
-            />
-
-            <Flex flexDirection="column" gap={12}>
-              <TextInputField
-                name="signature"
-                label="Signature"
-                description="Type your full legal name"
-                isRequired
-              />
-              <CheckboxField
-                name="agree"
-                label="I agree to sign this document electronically"
-                isRequired
-              />
-            </Flex>
-
-            <ActionsLayout>
-              <Components.Button variant="secondary" type="button" onClick={onBack}>
-                Back
-              </Components.Button>
-              <Components.Button type="submit" isLoading={isPending}>
-                Sign document
-              </Components.Button>
-            </ActionsLayout>
-          </Flex>
-        </Form>
-      </FormProvider>
-    </section>
-  )
-}
diff --git a/sdk-app/src/design/prototypes/contractor-management/states.tsx b/sdk-app/src/design/prototypes/contractor-management/states.tsx
new file mode 100644
index 000000000..52bc8c5bc
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-management/states.tsx
@@ -0,0 +1,676 @@
+import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
+import type { PrototypeComponent } from '../prototypeTypes'
+import { ContractorDetailsDemo } from '../../components/contractor/management/ContractorDetails/ContractorDetailsStates'
+import { ContractorDismissalFormDemo } from '../../components/contractor/management/ContractorDismissalForm/ContractorDismissalFormStates'
+import {
+  ContractorListDemo,
+  type ContractorTabFixtures,
+} from '../../components/contractor/management/ContractorList/ContractorListStates'
+import { ProfileDetailsForm } from '../../components/contractor/shared/ProfileDetailsForm/ProfileDetailsForm'
+import { AddressForm } from '../../components/contractor/shared/AddressForm/AddressForm'
+import { PaymentMethodForm } from '../../components/contractor/shared/PaymentMethodForm/PaymentMethodForm'
+import { CONTRACTOR_TYPE } from '@/shared/constants'
+
+/**
+ * Mock contractor builder.
+ *
+ * Defaults are tuned for a "happy active contractor": fully onboarded,
+ * currently active, no dismissal, no upcoming employment, hourly,
+ * started a while ago. Override per-fixture to express the variants the
+ * View cares about — see the per-tab fixture groups below for what
+ * shape each tab expects.
+ */
+function build(overrides: Partial<Contractor>): Contractor {
+  return {
+    uuid: `contractor-${Math.random().toString(36).slice(2, 8)}`,
+    companyUuid: 'mock-company-uuid',
+    wageType: 'Hourly',
+    startDate: '2024-01-01',
+    isActive: true,
+    version: 'version-1',
+    type: 'Individual',
+    firstName: 'Contractor',
+    lastName: 'Name',
+    middleInitial: null,
+    businessName: null,
+    ein: null,
+    hasEin: false,
+    hasSsn: true,
+    email: 'contractor@example.com',
+    fileNewHireReport: true,
+    workState: 'CA',
+    onboarded: true,
+    onboardingStatus: 'onboarding_completed',
+    address: null,
+    hourlyRate: '50.00',
+    paymentMethod: 'Direct Deposit',
+    upcomingEmployment: null,
+    dismissalDate: null,
+    ...overrides,
+  } as Contractor
+}
+
+const daysFromNow = (offset: number) => {
+  const d = new Date()
+  d.setDate(d.getDate() + offset)
+  return d.toISOString().slice(0, 10)
+}
+
+// -- Active tab fixtures ------------------------------------------------
+// Regular active contractors: onboarded, currently active, started in
+// the past, no upcomingEmployment, no dismissalDate. The View shows no
+// status badge for these.
+const regularActives: Contractor[] = [
+  build({
+    uuid: 'contractor-active-1',
+    firstName: 'Avery',
+    lastName: 'Garcia',
+    email: 'avery.garcia@example.com',
+    hourlyRate: '65.00',
+    startDate: '2024-03-15',
+  }),
+  build({
+    uuid: 'contractor-active-2',
+    type: 'Business',
+    businessName: 'Pacific Design Co.',
+    firstName: 'Mason',
+    lastName: 'Park',
+    email: 'mason.park@pacificdesign.com',
+    wageType: 'Fixed',
+    hourlyRate: '0.00',
+    paymentMethod: 'Check',
+    startDate: '2023-11-01',
+  }),
+  build({
+    uuid: 'contractor-active-3',
+    firstName: 'Riya',
+    lastName: 'Patel',
+    email: 'riya.patel@example.com',
+    hourlyRate: '85.00',
+    startDate: '2024-06-22',
+  }),
+]
+
+// Pending rehire: previously dismissed, scheduled to come back. The
+// container merges these into the active list from the dismissed query.
+// They show with the blue "Starts {date}" info badge and a "Cancel
+// rehire" menu item.
+const pendingRehires: Contractor[] = [
+  build({
+    uuid: 'contractor-rehire-1',
+    firstName: 'Noor',
+    lastName: 'Bauer',
+    email: 'noor.bauer@example.com',
+    hourlyRate: '90.00',
+    isActive: false,
+    dismissalDate: daysFromNow(-60),
+    upcomingEmployment: { startDate: daysFromNow(14) },
+    rehireCancellationEligible: true,
+  }),
+]
+
+// Active contractor with a scheduled dismissal — shows the yellow
+// "Last day {date}" warning badge and a "Cancel dismissal" menu item.
+const activeWithUpcomingDismissal: Contractor = build({
+  uuid: 'contractor-leaving',
+  firstName: 'Theo',
+  lastName: 'Romano',
+  email: 'theo.romano@example.com',
+  hourlyRate: '95.00',
+  startDate: '2023-08-01',
+  dismissalDate: daysFromNow(10),
+  dismissalCancellationEligible: true,
+})
+
+// -- Onboarding tab fixtures --------------------------------------------
+// Each entry exercises a different onboarding state. The fully-onboarded
+// ones with `upcomingEmployment` set ALSO show the "Starts {date}" info
+// badge next to their Onboarded status.
+const onboardingContractors: Contractor[] = [
+  build({
+    uuid: 'contractor-onboarding-admin',
+    firstName: 'Quinn',
+    lastName: 'Chen',
+    email: 'quinn.chen@example.com',
+    hourlyRate: '70.00',
+    onboarded: false,
+    onboardingStatus: 'admin_onboarding_incomplete',
+  }),
+  build({
+    uuid: 'contractor-onboarding-invited',
+    firstName: 'Sasha',
+    lastName: 'Singh',
+    email: 'sasha.singh@example.com',
+    hourlyRate: '55.00',
+    onboarded: false,
+    onboardingStatus: 'self_onboarding_invited',
+  }),
+  build({
+    uuid: 'contractor-onboarding-review',
+    firstName: 'Diego',
+    lastName: 'Lopez',
+    email: 'diego.lopez@example.com',
+    hourlyRate: '60.00',
+    onboarded: false,
+    onboardingStatus: 'self_onboarding_review',
+  }),
+  build({
+    uuid: 'contractor-onboarding-future-1',
+    firstName: 'Jordan',
+    lastName: 'Walker',
+    email: 'jordan.walker@example.com',
+    hourlyRate: '60.00',
+    onboarded: true,
+    onboardingStatus: 'onboarding_completed',
+    startDate: daysFromNow(21),
+    upcomingEmployment: { startDate: daysFromNow(21) },
+  }),
+  build({
+    uuid: 'contractor-onboarding-future-2',
+    type: 'Business',
+    businessName: 'Bright Studios',
+    firstName: 'Kai',
+    lastName: 'Brooks',
+    email: 'kai.brooks@brightstudios.com',
+    wageType: 'Fixed',
+    hourlyRate: '0.00',
+    paymentMethod: 'Direct Deposit',
+    onboarded: true,
+    onboardingStatus: 'onboarding_completed',
+    startDate: daysFromNow(45),
+    upcomingEmployment: { startDate: daysFromNow(45) },
+  }),
+]
+
+// -- Dismissed tab fixtures ---------------------------------------------
+// Truly dismissed contractors: past dismissalDate, NO upcomingEmployment
+// (the View filters those out of the dismissed table because they live
+// on the active tab as pending rehires instead).
+const dismissedContractors: Contractor[] = [
+  build({
+    uuid: 'contractor-dismissed-1',
+    firstName: 'Imani',
+    lastName: 'Okonkwo',
+    email: 'imani.okonkwo@example.com',
+    hourlyRate: '75.00',
+    isActive: false,
+    dismissalDate: daysFromNow(-7),
+    dismissalCancellationEligible: true,
+  }),
+  build({
+    uuid: 'contractor-dismissed-2',
+    firstName: 'Maya',
+    lastName: 'Nguyen',
+    email: 'maya.nguyen@example.com',
+    hourlyRate: '80.00',
+    isActive: false,
+    dismissalDate: daysFromNow(-120),
+    dismissalCancellationEligible: false,
+  }),
+]
+
+// -- Many-active fixture (longer-list demo) -----------------------------
+const FIRST_NAMES = [
+  'Avery',
+  'Mason',
+  'Riya',
+  'Jordan',
+  'Kai',
+  'Sasha',
+  'Quinn',
+  'Noor',
+  'Theo',
+  'Imani',
+  'Diego',
+  'Maya',
+]
+const LAST_NAMES = [
+  'Garcia',
+  'Park',
+  'Patel',
+  'Nguyen',
+  'Walker',
+  'Brooks',
+  'Singh',
+  'Chen',
+  'Romano',
+  'Okonkwo',
+  'Bauer',
+  'Lopez',
+]
+
+const manyActives: Contractor[] = FIRST_NAMES.map((first, i) =>
+  build({
+    uuid: `contractor-many-${i + 1}`,
+    firstName: first,
+    lastName: LAST_NAMES[i] ?? 'Doe',
+    email: `${first.toLowerCase()}.${(LAST_NAMES[i] ?? 'doe').toLowerCase()}@example.com`,
+    hourlyRate: (40 + i * 5).toFixed(2),
+    startDate: `2024-${String((i % 12) + 1).padStart(2, '0')}-01`,
+  }),
+)
+
+// -----------------------------------------------------------------------
+
+function renderListDemo(byTab: ContractorTabFixtures) {
+  function ContractorListConfigDemo() {
+    return <ContractorListDemo byTab={byTab} />
+  }
+  return ContractorListConfigDemo
+}
+
+function renderDismissalFormDemo(args: { contractor: Contractor; isPending?: boolean }) {
+  function ContractorDismissalFormConfigDemo() {
+    return <ContractorDismissalFormDemo contractor={args.contractor} isPending={args.isPending} />
+  }
+  return ContractorDismissalFormConfigDemo
+}
+
+function renderDetailsDemo(args: { contractor: Contractor; editable?: boolean }) {
+  function ContractorDetailsConfigDemo() {
+    return <ContractorDetailsDemo contractor={args.contractor} editable={args.editable} />
+  }
+  return ContractorDetailsConfigDemo
+}
+
+function renderProfileDetailsForm(args: {
+  contractor: Contractor
+  heading: string
+  description: string
+  showStartDate?: boolean
+  showEmail?: boolean
+}) {
+  function ProfileDetailsConfigDemo() {
+    return (
+      <ProfileDetailsForm {...args} onCancel={() => {}} onSubmit={async () => Promise.resolve()} />
+    )
+  }
+  return ProfileDetailsConfigDemo
+}
+
+function renderAddressForm(args: {
+  heading: string
+  description: string
+  defaultValues?: {
+    street1?: string
+    street2?: string
+    city?: string
+    state?: string
+    zip?: string
+  }
+}) {
+  function AddressFormConfigDemo() {
+    return <AddressForm {...args} onCancel={() => {}} onSubmit={async () => Promise.resolve()} />
+  }
+  return AddressFormConfigDemo
+}
+
+function renderPaymentMethodForm(args: {
+  heading: string
+  description: string
+  defaultValues: {
+    type: 'Direct Deposit' | 'Check'
+    name: string
+    routingNumber: string
+    accountNumber: string
+    accountType: 'Checking' | 'Savings'
+  }
+}) {
+  function PaymentMethodConfigDemo() {
+    return <PaymentMethodForm {...args} onSubmit={async () => Promise.resolve()} />
+  }
+  return PaymentMethodConfigDemo
+}
+
+export const components: PrototypeComponent[] = [
+  {
+    slug: 'list',
+    name: 'List',
+    configurations: [
+      {
+        slug: 'empty',
+        name: 'Empty',
+        description: 'No contractors in any tab.',
+        render: renderListDemo({ active: [], onboarding: [], dismissed: [] }),
+      },
+      {
+        slug: 'active',
+        name: 'Active list',
+        description: 'Three regular active contractors. No status badges.',
+        render: renderListDemo({
+          active: regularActives,
+          onboarding: [],
+          dismissed: [],
+        }),
+      },
+      {
+        slug: 'pending-rehires',
+        name: 'Pending rehires',
+        description:
+          'Active tab includes a previously-dismissed contractor scheduled to be rehired — shows the "Starts {date}" info badge.',
+        render: renderListDemo({
+          active: [...regularActives, ...pendingRehires],
+          onboarding: [],
+          dismissed: [],
+        }),
+      },
+      {
+        slug: 'upcoming-dismissal',
+        name: 'Upcoming dismissal',
+        description:
+          'Active tab includes a contractor with a scheduled dismissal — shows the "Last day {date}" warning badge.',
+        render: renderListDemo({
+          active: [...regularActives, activeWithUpcomingDismissal],
+          onboarding: [],
+          dismissed: [],
+        }),
+      },
+      {
+        slug: 'onboarding',
+        name: 'Onboarding states',
+        description:
+          'Onboarding tab with several states: admin-incomplete, self-invited, self-review, and two onboarded-with-future-start.',
+        render: renderListDemo({
+          active: [],
+          onboarding: onboardingContractors,
+          dismissed: [],
+        }),
+      },
+      {
+        slug: 'dismissed',
+        name: 'Dismissed',
+        description:
+          'Dismissed tab with two terminated contractors — one with a recent (cancellable) dismissal, one with an older one.',
+        render: renderListDemo({
+          active: [],
+          onboarding: [],
+          dismissed: dismissedContractors,
+        }),
+      },
+      {
+        slug: 'mixed',
+        name: 'Mixed',
+        description:
+          'All three tabs populated with semantically correct contractor states — the full surface in one config.',
+        render: renderListDemo({
+          active: [...regularActives, activeWithUpcomingDismissal, ...pendingRehires],
+          onboarding: onboardingContractors,
+          dismissed: dismissedContractors,
+        }),
+      },
+      {
+        slug: 'many',
+        name: 'Many contractors',
+        description: 'Twelve active contractors — exercises a longer list.',
+        render: renderListDemo({ active: manyActives, onboarding: [], dismissed: [] }),
+      },
+    ],
+  },
+  {
+    slug: 'dismissal-form',
+    name: 'Dismissal Form',
+    configurations: [
+      {
+        slug: 'default',
+        name: 'Individual contractor',
+        description: 'Standard dismissal form for an hourly individual contractor.',
+        render: renderDismissalFormDemo({
+          contractor: build({
+            uuid: 'contractor-dismiss-1',
+            firstName: 'Avery',
+            lastName: 'Garcia',
+            email: 'avery.garcia@example.com',
+            hourlyRate: '65.00',
+            startDate: '2024-03-15',
+          }),
+        }),
+      },
+      {
+        slug: 'business',
+        name: 'Business contractor',
+        description:
+          'Dismissal form for a Business-type contractor — heading uses the business name.',
+        render: renderDismissalFormDemo({
+          contractor: build({
+            uuid: 'contractor-dismiss-business',
+            type: 'Business',
+            businessName: 'Pacific Design Co.',
+            firstName: 'Mason',
+            lastName: 'Park',
+            email: 'mason.park@pacificdesign.com',
+            wageType: 'Fixed',
+            hourlyRate: '0.00',
+            paymentMethod: 'Check',
+            startDate: '2023-11-01',
+          }),
+        }),
+      },
+      {
+        slug: 'recent-start',
+        name: 'Recent start date',
+        description:
+          'Contractor started a few days ago — the date picker enforces a minDate of (start + 1 day) so earlier dates are disabled.',
+        render: renderDismissalFormDemo({
+          contractor: build({
+            uuid: 'contractor-dismiss-new',
+            firstName: 'Riya',
+            lastName: 'Patel',
+            email: 'riya.patel@example.com',
+            hourlyRate: '85.00',
+            startDate: daysFromNow(-3),
+          }),
+        }),
+      },
+      {
+        slug: 'pending',
+        name: 'Submitting',
+        description: 'The submit button shows its loading state while the dismissal is in flight.',
+        render: renderDismissalFormDemo({
+          isPending: true,
+          contractor: build({
+            uuid: 'contractor-dismiss-pending',
+            firstName: 'Imani',
+            lastName: 'Okonkwo',
+            email: 'imani.okonkwo@example.com',
+            hourlyRate: '75.00',
+            startDate: '2024-01-10',
+          }),
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'basic-details',
+    name: 'Basic Details',
+    configurations: [
+      {
+        slug: 'individual',
+        name: 'Individual contractor',
+        description: 'Fully filled-in details for an individual contractor.',
+        render: renderDetailsDemo({
+          editable: true,
+          contractor: build({
+            uuid: 'contractor-details-individual',
+            type: 'Individual',
+            firstName: 'Avery',
+            middleInitial: 'J',
+            lastName: 'Garcia',
+            email: 'avery.garcia@example.com',
+            hasSsn: true,
+            startDate: '2024-03-15',
+          }),
+        }),
+      },
+      {
+        slug: 'business',
+        name: 'Business contractor',
+        description: 'Business contractor — shows business name and EIN.',
+        render: renderDetailsDemo({
+          editable: true,
+          contractor: build({
+            uuid: 'contractor-details-business',
+            type: 'Business',
+            businessName: 'Pacific Design Co.',
+            firstName: 'Mason',
+            lastName: 'Park',
+            email: 'mason.park@pacificdesign.com',
+            hasEin: true,
+            startDate: '2023-11-01',
+          }),
+        }),
+      },
+      {
+        slug: 'missing-data',
+        name: 'Missing data',
+        description: 'Individual without SSN or email — shows the dash fallback.',
+        render: renderDetailsDemo({
+          editable: true,
+          contractor: build({
+            uuid: 'contractor-details-sparse',
+            type: 'Individual',
+            firstName: 'Riya',
+            lastName: 'Patel',
+            email: '',
+            hasSsn: false,
+            startDate: '2024-06-22',
+          }),
+        }),
+      },
+      {
+        slug: 'read-only',
+        name: 'Read-only',
+        description: 'No `onEdit` prop, so the Edit button is hidden.',
+        render: renderDetailsDemo({
+          contractor: build({
+            uuid: 'contractor-details-readonly',
+            type: 'Individual',
+            firstName: 'Quinn',
+            lastName: 'Chen',
+            email: 'quinn.chen@example.com',
+            hasSsn: true,
+            startDate: '2024-01-10',
+          }),
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'profile-details-form',
+    name: 'Profile Details Form',
+    configurations: [
+      {
+        slug: 'individual',
+        name: 'Individual contractor',
+        description:
+          'Edit basic details for an individual contractor with SSN already on file. Renders the LockedField with a Change button.',
+        render: renderProfileDetailsForm({
+          contractor: build({
+            uuid: 'contractor-profile-individual',
+            type: CONTRACTOR_TYPE.INDIVIDUAL,
+            firstName: 'Avery',
+            middleInitial: 'J',
+            lastName: 'Garcia',
+            email: 'avery.garcia@example.com',
+            hasSsn: true,
+            startDate: '2024-03-15',
+          }),
+          heading: 'Edit basic details',
+          description: 'Update Avery Garcia’s personal information.',
+          showStartDate: true,
+          showEmail: true,
+        }),
+      },
+      {
+        slug: 'business',
+        name: 'Business contractor',
+        description: 'Edit basic details for a Business-type contractor with EIN already on file.',
+        render: renderProfileDetailsForm({
+          contractor: build({
+            uuid: 'contractor-profile-business',
+            type: CONTRACTOR_TYPE.BUSINESS,
+            businessName: 'Pacific Design Co.',
+            firstName: 'Mason',
+            lastName: 'Park',
+            email: 'mason.park@pacificdesign.com',
+            hasEin: true,
+            startDate: '2023-11-01',
+          }),
+          heading: 'Edit basic details',
+          description: 'Update Pacific Design Co.’s business information.',
+          showStartDate: true,
+          showEmail: true,
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'address-form',
+    name: 'Address Form',
+    configurations: [
+      {
+        slug: 'existing',
+        name: 'Existing address',
+        description: 'Edit the contractor’s home address — fields prefilled from the record.',
+        render: renderAddressForm({
+          heading: 'Edit address',
+          description: 'Update Avery Garcia’s home address.',
+          defaultValues: {
+            street1: '123 Mission St',
+            street2: 'Apt 4B',
+            city: 'San Francisco',
+            state: 'CA',
+            zip: '94103',
+          },
+        }),
+      },
+      {
+        slug: 'empty',
+        name: 'No address on file',
+        description: 'No address on the contractor record — fields render empty.',
+        render: renderAddressForm({
+          heading: 'Edit address',
+          description: 'Update Avery Garcia’s home address.',
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'payment-method-form',
+    name: 'Payment Method Form',
+    configurations: [
+      {
+        slug: 'check',
+        name: 'Check',
+        description: 'Contractor receives a paper check — bank account fields hidden.',
+        render: renderPaymentMethodForm({
+          heading: 'Payment method',
+          description: 'Edit how Avery Garcia gets paid.',
+          defaultValues: {
+            type: 'Check',
+            name: '',
+            routingNumber: '',
+            accountNumber: '',
+            accountType: 'Checking',
+          },
+        }),
+      },
+      {
+        slug: 'direct-deposit-existing',
+        name: 'Direct deposit (existing bank account)',
+        description:
+          'Direct deposit with a bank account already on file. Account number renders as the masked default.',
+        render: renderPaymentMethodForm({
+          heading: 'Payment method',
+          description: 'Edit how Avery Garcia gets paid.',
+          defaultValues: {
+            type: 'Direct Deposit',
+            name: 'Primary checking',
+            routingNumber: '110000000',
+            accountNumber: 'XXXXXX1234',
+            accountType: 'Checking',
+          },
+        }),
+      },
+    ],
+  },
+]
diff --git a/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorDocumentSigner.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorDocumentSigner.tsx
new file mode 100644
index 000000000..5b03e065c
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorDocumentSigner.tsx
@@ -0,0 +1,88 @@
+import { Suspense, useState } from 'react'
+import {
+  useContractorDocumentsGetAllSuspense,
+  invalidateContractorDocumentsGetAll,
+} from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsGetAll'
+import { useQueryClient } from '@tanstack/react-query'
+import type { Document } from '@gusto/embedded-api-v-2025-11-15/models/components/document'
+import { ContractorDocumentList } from '../../components/contractor/self-onboarding/ContractorDocumentList/ContractorDocumentList'
+import { ContractorSignatureForm } from './ContractorSignatureForm'
+import { contractorSelfOnboardingEvents } from './events'
+import {
+  BaseComponent,
+  useBase,
+  type BaseComponentInterface,
+  type CommonComponentInterface,
+} from '@/components/Base'
+
+interface ContractorDocumentSignerProps extends CommonComponentInterface {
+  contractorId: string
+}
+
+export function ContractorDocumentSigner(
+  props: ContractorDocumentSignerProps & BaseComponentInterface,
+) {
+  return (
+    <BaseComponent {...props}>
+      <Root {...props} />
+    </BaseComponent>
+  )
+}
+
+type DocumentSignerView = { type: 'list' } | { type: 'sign'; documentUuid: string }
+
+const Root = ({ contractorId, className }: ContractorDocumentSignerProps) => {
+  const { onEvent: _onEvent } = useBase()
+  const onEvent = _onEvent as (type: string, data?: unknown) => void
+  const queryClient = useQueryClient()
+  const [view, setView] = useState<DocumentSignerView>({ type: 'list' })
+
+  const {
+    data: { documents },
+  } = useContractorDocumentsGetAllSuspense({ contractorUuid: contractorId })
+
+  const allDocs = documents ?? []
+
+  const handleRequestSign = (doc: Document) => {
+    onEvent(contractorSelfOnboardingEvents.CONTRACTOR_VIEW_DOCUMENT_TO_SIGN, {
+      uuid: doc.uuid,
+      title: doc.title,
+    })
+    setView({ type: 'sign', documentUuid: doc.uuid! })
+  }
+
+  const handleSignComplete = () => {
+    void invalidateContractorDocumentsGetAll(queryClient, [contractorId])
+    setView({ type: 'list' })
+  }
+
+  const handleBack = () => {
+    setView({ type: 'list' })
+  }
+
+  const handleContinue = () => {
+    onEvent(contractorSelfOnboardingEvents.CONTRACTOR_DOCUMENTS_DONE)
+  }
+
+  if (view.type === 'sign') {
+    return (
+      <Suspense fallback={<div>Loading document...</div>}>
+        <ContractorSignatureForm
+          contractorId={contractorId}
+          documentUuid={view.documentUuid}
+          onSignComplete={handleSignComplete}
+          onBack={handleBack}
+        />
+      </Suspense>
+    )
+  }
+
+  return (
+    <ContractorDocumentList
+      className={className}
+      documents={allDocs}
+      onRequestSign={handleRequestSign}
+      onContinue={handleContinue}
+    />
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorLanding.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorLanding.tsx
new file mode 100644
index 000000000..3514a79d1
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorLanding.tsx
@@ -0,0 +1,55 @@
+import { useMemo } from 'react'
+import { useContractorsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGet'
+import { useCompaniesGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/companiesGet'
+import DOMPurify from 'dompurify'
+import { ContractorWelcome } from '../../components/contractor/self-onboarding/ContractorWelcome/ContractorWelcome'
+import { contractorSelfOnboardingEvents } from './events'
+import {
+  BaseComponent,
+  useBase,
+  type BaseComponentInterface,
+  type CommonComponentInterface,
+} from '@/components/Base'
+
+interface ContractorLandingProps extends CommonComponentInterface {
+  contractorId: string
+  companyId: string
+}
+
+export function ContractorLanding(props: ContractorLandingProps & BaseComponentInterface) {
+  return (
+    <BaseComponent {...props}>
+      <Root {...props} />
+    </BaseComponent>
+  )
+}
+
+const Root = ({ contractorId, companyId, className }: ContractorLandingProps) => {
+  const { onEvent: _onEvent } = useBase()
+  const onEvent = _onEvent as (type: string, data?: unknown) => void
+
+  const {
+    data: { contractor },
+  } = useContractorsGetSuspense({ contractorUuid: contractorId })
+
+  const {
+    data: { company },
+  } = useCompaniesGetSuspense({ companyId })
+
+  const contractorName = useMemo(
+    () => DOMPurify.sanitize(contractor?.firstName ?? contractor?.businessName ?? 'there'),
+    [contractor],
+  )
+  const companyName = useMemo(() => DOMPurify.sanitize(company?.name ?? 'Your company'), [company])
+
+  return (
+    <ContractorWelcome
+      className={className}
+      contractorName={contractorName}
+      companyName={companyName}
+      onStart={() => {
+        onEvent(contractorSelfOnboardingEvents.CONTRACTOR_SELF_ONBOARDING_START)
+      }}
+    />
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorOnboardingSummary.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorOnboardingSummary.tsx
new file mode 100644
index 000000000..07208aa58
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorOnboardingSummary.tsx
@@ -0,0 +1,36 @@
+import { ContractorOnboardingComplete } from '../../components/contractor/self-onboarding/ContractorOnboardingComplete/ContractorOnboardingComplete'
+import { contractorSelfOnboardingEvents } from './events'
+import {
+  BaseComponent,
+  useBase,
+  type BaseComponentInterface,
+  type CommonComponentInterface,
+} from '@/components/Base'
+
+interface ContractorOnboardingSummaryProps extends CommonComponentInterface {
+  contractorId: string
+}
+
+export function ContractorOnboardingSummary(
+  props: ContractorOnboardingSummaryProps & BaseComponentInterface,
+) {
+  return (
+    <BaseComponent {...props}>
+      <Root {...props} />
+    </BaseComponent>
+  )
+}
+
+function Root({ className }: ContractorOnboardingSummaryProps) {
+  const { onEvent: _onEvent } = useBase()
+  const onEvent = _onEvent as (type: string, data?: unknown) => void
+
+  return (
+    <ContractorOnboardingComplete
+      className={className}
+      onDone={() => {
+        onEvent(contractorSelfOnboardingEvents.CONTRACTOR_SELF_ONBOARDING_DONE)
+      }}
+    />
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfAddressForm.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfAddressForm.tsx
similarity index 93%
rename from sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfAddressForm.tsx
rename to sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfAddressForm.tsx
index ed5f5b851..8ba7fe88e 100644
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfAddressForm.tsx
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfAddressForm.tsx
@@ -1,7 +1,10 @@
 import { useContractorsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGet'
 import { useContractorsGetAddressSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsGetAddress'
 import { useContractorsUpdateAddressMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsUpdateAddress'
-import { AddressForm, type AddressFormValues } from '../common/AddressForm'
+import {
+  AddressForm,
+  type AddressFormValues,
+} from '../../components/contractor/shared/AddressForm/AddressForm'
 import { BaseComponent, useBase } from '@/components/Base'
 import { componentEvents } from '@/shared/constants'
 
@@ -38,7 +41,7 @@ function Root({ contractorId }: { contractorId: string }) {
       await updateAddress({
         request: {
           contractorUuid: contractorId,
-          requestBody: {
+          contractorAddressUpdateBody: {
             version: address?.version ?? '',
             street1: payload.street1,
             street2: payload.street2,
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfOnboardingWizard.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfOnboardingWizard.tsx
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfOnboardingWizard.tsx
rename to sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfOnboardingWizard.tsx
diff --git a/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfPaymentMethodForm.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfPaymentMethodForm.tsx
new file mode 100644
index 000000000..7f7e6524a
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfPaymentMethodForm.tsx
@@ -0,0 +1,124 @@
+import { useMemo, useState } from 'react'
+import {
+  useContractorPaymentMethodGetSuspense,
+  buildContractorPaymentMethodGetQuery,
+} from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGet'
+import { useContractorPaymentMethodGetBankAccountsSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGetBankAccounts'
+import { useContractorPaymentMethodsCreateBankAccountMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodsCreateBankAccount'
+import { useContractorPaymentMethodUpdateMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodUpdate'
+import { useGustoEmbeddedContext } from '@gusto/embedded-api-v-2025-11-15/react-query/_context'
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  PaymentMethodForm,
+  type PaymentMethodFormValues,
+} from '../../components/contractor/shared/PaymentMethodForm/PaymentMethodForm'
+import { BaseComponent, useBase } from '@/components/Base'
+import { componentEvents, PAYMENT_METHODS } from '@/shared/constants'
+
+interface ContractorSelfPaymentMethodFormProps {
+  contractorId: string
+  onEvent: (...args: unknown[]) => void
+}
+
+export function ContractorSelfPaymentMethodForm(props: ContractorSelfPaymentMethodFormProps) {
+  return (
+    <BaseComponent onEvent={props.onEvent}>
+      <Root contractorId={props.contractorId} />
+    </BaseComponent>
+  )
+}
+
+function Root({ contractorId }: { contractorId: string }) {
+  const { onEvent, baseSubmitHandler } = useBase()
+  const queryClient = useQueryClient()
+  const gustoClient = useGustoEmbeddedContext()
+  const [isRefetching, setIsRefetching] = useState(false)
+
+  const {
+    data: { contractorPaymentMethod: paymentMethod },
+  } = useContractorPaymentMethodGetSuspense({ contractorUuid: contractorId })
+
+  const {
+    data: { contractorBankAccountList },
+  } = useContractorPaymentMethodGetBankAccountsSuspense({ contractorUuid: contractorId })
+  const bankAccount = contractorBankAccountList?.[0]
+
+  const { mutateAsync: createBankAccount, isPending: bankAccountPending } =
+    useContractorPaymentMethodsCreateBankAccountMutation()
+  const { mutateAsync: updatePaymentMethod, isPending: paymentMethodPending } =
+    useContractorPaymentMethodUpdateMutation()
+
+  const defaultValues = useMemo(
+    () => ({
+      type: paymentMethod!.type || PAYMENT_METHODS.check,
+      name: bankAccount?.name || '',
+      routingNumber: bankAccount?.routingNumber || '',
+      accountNumber: bankAccount?.hiddenAccountNumber || '',
+      accountType: bankAccount?.accountType || 'Checking',
+    }),
+    [paymentMethod, bankAccount],
+  )
+
+  const handleSubmit = async (data: PaymentMethodFormValues) => {
+    await baseSubmitHandler(data, async payload => {
+      let updatedPaymentMethodVersion: string | undefined
+
+      if (payload.type === PAYMENT_METHODS.directDeposit) {
+        const { name, routingNumber, accountNumber, accountType } = payload
+        const hasChanged =
+          !bankAccount ||
+          name !== bankAccount.name ||
+          routingNumber !== bankAccount.routingNumber ||
+          accountType !== bankAccount.accountType ||
+          accountNumber !== bankAccount.hiddenAccountNumber
+
+        if (hasChanged) {
+          const bankAccountResponse = await createBankAccount({
+            request: {
+              contractorUuid: contractorId,
+              contractorBankAccountCreateRequestBody: {
+                name,
+                routingNumber,
+                accountNumber,
+                accountType,
+              },
+            },
+          })
+          onEvent(componentEvents.CONTRACTOR_BANK_ACCOUNT_CREATED, bankAccountResponse)
+
+          setIsRefetching(true)
+          const refetched = await queryClient.fetchQuery(
+            buildContractorPaymentMethodGetQuery(gustoClient, { contractorUuid: contractorId }),
+          )
+          setIsRefetching(false)
+          updatedPaymentMethodVersion = refetched.contractorPaymentMethod!.version as string
+        }
+      }
+
+      const paymentMethodResponse = await updatePaymentMethod({
+        request: {
+          contractorUuid: contractorId,
+          requestBody: {
+            type: payload.type,
+            version: updatedPaymentMethodVersion ?? (paymentMethod!.version as string),
+          },
+        },
+      })
+      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_UPDATED, paymentMethodResponse)
+      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE, {
+        contractorId,
+        selfOnboarding: true,
+      })
+    })
+  }
+
+  return (
+    <PaymentMethodForm
+      heading="Set up your payment method"
+      description="Choose how you'd like to get paid."
+      defaultValues={defaultValues}
+      isPending={bankAccountPending || paymentMethodPending || isRefetching}
+      onSubmit={handleSubmit}
+    />
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfProfile.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfProfile.tsx
similarity index 94%
rename from sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfProfile.tsx
rename to sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfProfile.tsx
index b4ebe6b2e..d58c74e97 100644
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/ContractorSelfProfile.tsx
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSelfProfile.tsx
@@ -2,7 +2,10 @@ import { useContractorsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/reac
 import { useContractorsUpdateMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsUpdate'
 import { ContractorType as ApiContractorType } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
 import type { ContractorUpdateRequestBody } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorupdaterequestbody'
-import { ProfileDetailsForm, type ProfileDetailsFormValues } from '../common/ProfileDetailsForm'
+import {
+  ProfileDetailsForm,
+  type ProfileDetailsFormValues,
+} from '../../components/contractor/shared/ProfileDetailsForm/ProfileDetailsForm'
 import { BaseComponent, useBase } from '@/components/Base'
 import { removeNonDigits } from '@/helpers/formattedStrings'
 import { componentEvents } from '@/shared/constants'
diff --git a/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSignatureForm.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSignatureForm.tsx
new file mode 100644
index 000000000..d668f62b7
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/ContractorSignatureForm.tsx
@@ -0,0 +1,68 @@
+import { useContractorDocumentsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsGet'
+import { useContractorDocumentsGetPdfSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsGetPdf'
+import { useContractorDocumentsSignMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorDocumentsSign'
+import {
+  ContractorDocumentSignature,
+  type ContractorDocumentSignatureValues,
+} from '../../components/contractor/self-onboarding/ContractorDocumentSignature/ContractorDocumentSignature'
+import { contractorSelfOnboardingEvents } from './events'
+import { useBase } from '@/components/Base'
+
+interface ContractorSignatureFormProps {
+  contractorId: string
+  documentUuid: string
+  onSignComplete: () => void
+  onBack: () => void
+}
+
+export function ContractorSignatureForm({
+  documentUuid,
+  onSignComplete,
+  onBack,
+}: ContractorSignatureFormProps) {
+  const { onEvent: _onEvent } = useBase()
+  const onEvent = _onEvent as (type: string, data?: unknown) => void
+
+  const {
+    data: { document },
+  } = useContractorDocumentsGetSuspense({ documentUuid })
+
+  const {
+    data: { documentPdf },
+  } = useContractorDocumentsGetPdfSuspense({ documentUuid })
+
+  const { mutateAsync: signDocument, isPending } = useContractorDocumentsSignMutation()
+
+  const pdfUrl = documentPdf?.documentUrl ?? null
+
+  const onSubmit = async (data: ContractorDocumentSignatureValues) => {
+    const fields = (document?.fields ?? []).map(field => ({
+      key: field.key ?? '',
+      value: field.key?.includes('signature') ? data.signature : (field.value ?? ''),
+    }))
+
+    const result = await signDocument({
+      request: {
+        documentUuid,
+        requestBody: {
+          fields,
+          agree: data.agree,
+        },
+      },
+    })
+
+    onEvent(contractorSelfOnboardingEvents.CONTRACTOR_SIGN_DOCUMENT, result.documentSigned)
+    onSignComplete()
+  }
+
+  return (
+    <ContractorDocumentSignature
+      title={document?.title ?? 'Sign document'}
+      description={document?.description}
+      pdfUrl={pdfUrl}
+      isPending={isPending}
+      onSubmit={onSubmit}
+      onBack={onBack}
+    />
+  )
+}
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/events.ts b/sdk-app/src/design/prototypes/contractor-self-onboarding/events.ts
similarity index 100%
rename from sdk-app/src/design/prototypes/contractor-management/self-onboarding/events.ts
rename to sdk-app/src/design/prototypes/contractor-self-onboarding/events.ts
diff --git a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/index.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/index.tsx
similarity index 79%
rename from sdk-app/src/design/prototypes/contractor-management/self-onboarding/index.tsx
rename to sdk-app/src/design/prototypes/contractor-self-onboarding/index.tsx
index c744c04d3..669d072bf 100644
--- a/sdk-app/src/design/prototypes/contractor-management/self-onboarding/index.tsx
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/index.tsx
@@ -1,11 +1,15 @@
 import { Suspense } from 'react'
 import { useOutletContext } from 'react-router-dom'
-import type { EntityIds } from '../../../../useEntities'
+import type { EntityIds } from '../../../useEntities'
+import { ComponentStatesPage } from '../ComponentStatesPage'
 import { ContractorSelfOnboardingWizard } from './ContractorSelfOnboardingWizard'
+import { components } from './states'
 import { Flex } from '@/components/Common'
 import { BaseComponent } from '@/components/Base'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
 
+const BASE_PATH = '/design/contractor-self-onboarding'
+
 function ContractorSelfOnboardingContent() {
   const { entities } = useOutletContext<{ entities: EntityIds }>()
   const Components = useComponentContext()
@@ -42,3 +46,7 @@ export function ContractorSelfOnboarding() {
     </BaseComponent>
   )
 }
+
+export function ContractorSelfOnboardingStates() {
+  return <ComponentStatesPage basePath={`${BASE_PATH}/component-states`} components={components} />
+}
diff --git a/sdk-app/src/design/prototypes/contractor-self-onboarding/states.tsx b/sdk-app/src/design/prototypes/contractor-self-onboarding/states.tsx
new file mode 100644
index 000000000..a56cccf0d
--- /dev/null
+++ b/sdk-app/src/design/prototypes/contractor-self-onboarding/states.tsx
@@ -0,0 +1,421 @@
+import type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'
+import type { Document } from '@gusto/embedded-api-v-2025-11-15/models/components/document'
+import type { PrototypeComponent } from '../prototypeTypes'
+import { ContractorWelcome } from '../../components/contractor/self-onboarding/ContractorWelcome/ContractorWelcome'
+import { ContractorDocumentList } from '../../components/contractor/self-onboarding/ContractorDocumentList/ContractorDocumentList'
+import { ContractorDocumentSignature } from '../../components/contractor/self-onboarding/ContractorDocumentSignature/ContractorDocumentSignature'
+import { ContractorOnboardingComplete } from '../../components/contractor/self-onboarding/ContractorOnboardingComplete/ContractorOnboardingComplete'
+import { ProfileDetailsForm } from '../../components/contractor/shared/ProfileDetailsForm/ProfileDetailsForm'
+import { AddressForm } from '../../components/contractor/shared/AddressForm/AddressForm'
+import { PaymentMethodForm } from '../../components/contractor/shared/PaymentMethodForm/PaymentMethodForm'
+import { CONTRACTOR_TYPE } from '@/shared/constants'
+
+const noop = () => {}
+
+function buildContractor(overrides: Partial<Contractor>): Contractor {
+  return {
+    uuid: 'contractor-uuid',
+    companyUuid: 'company-uuid',
+    version: 'contractor-version',
+    type: CONTRACTOR_TYPE.INDIVIDUAL,
+    wageType: 'Hourly',
+    isActive: true,
+    firstName: 'Sasha',
+    middleInitial: null,
+    lastName: 'Singh',
+    businessName: null,
+    email: 'sasha.singh@example.com',
+    ein: null,
+    hasEin: false,
+    hasSsn: false,
+    startDate: '2024-01-01',
+    fileNewHireReport: true,
+    workState: 'CA',
+    onboarded: false,
+    onboardingStatus: 'self_onboarding_invited',
+    address: null,
+    hourlyRate: '50.00',
+    paymentMethod: 'Direct Deposit',
+    upcomingEmployment: null,
+    dismissalDate: null,
+    ...overrides,
+  } as Contractor
+}
+
+function buildDocument(overrides: Partial<Document>): Document {
+  return {
+    uuid: 'doc-default',
+    name: 'Document',
+    title: 'Document',
+    description: 'A document to sign',
+    requiresSigning: true,
+    signedAt: null,
+    fields: [],
+    ...overrides,
+  } as Document
+}
+
+// -- Welcome ----------------------------------------------------------
+
+function renderWelcome(props: { contractorName: string; companyName: string }) {
+  function WelcomeDemo() {
+    return <ContractorWelcome {...props} onStart={noop} />
+  }
+  return WelcomeDemo
+}
+
+// -- DocumentList -----------------------------------------------------
+
+function renderDocumentList(documents: Document[]) {
+  function DocumentListDemo() {
+    return <ContractorDocumentList documents={documents} onRequestSign={noop} onContinue={noop} />
+  }
+  return DocumentListDemo
+}
+
+// -- DocumentSignature ------------------------------------------------
+
+function renderDocumentSignature(props: {
+  title: string
+  description?: string
+  pdfUrl: string | null
+  isPending?: boolean
+}) {
+  function DocumentSignatureDemo() {
+    return (
+      <ContractorDocumentSignature
+        {...props}
+        onSubmit={async () => Promise.resolve()}
+        onBack={noop}
+      />
+    )
+  }
+  return DocumentSignatureDemo
+}
+
+// -- OnboardingComplete -----------------------------------------------
+
+function renderOnboardingComplete() {
+  function OnboardingCompleteDemo() {
+    return <ContractorOnboardingComplete onDone={noop} />
+  }
+  return OnboardingCompleteDemo
+}
+
+// -- ProfileDetailsForm (shared) --------------------------------------
+
+function renderProfileDetailsForm(args: {
+  contractor: Contractor
+  heading: string
+  description: string
+  showStartDate?: boolean
+  showEmail?: boolean
+}) {
+  function ProfileDetailsDemo() {
+    return <ProfileDetailsForm {...args} onSubmit={async () => Promise.resolve()} />
+  }
+  return ProfileDetailsDemo
+}
+
+// -- AddressForm (shared) ---------------------------------------------
+
+function renderAddressForm(args: {
+  heading: string
+  description: string
+  defaultValues?: {
+    street1?: string
+    street2?: string
+    city?: string
+    state?: string
+    zip?: string
+  }
+}) {
+  function AddressFormDemo() {
+    return <AddressForm {...args} onSubmit={async () => Promise.resolve()} />
+  }
+  return AddressFormDemo
+}
+
+// -- PaymentMethodForm (shared) ---------------------------------------
+
+function renderPaymentMethodForm(args: {
+  heading: string
+  description: string
+  defaultValues: {
+    type: 'Direct Deposit' | 'Check'
+    name: string
+    routingNumber: string
+    accountNumber: string
+    accountType: 'Checking' | 'Savings'
+  }
+}) {
+  function PaymentMethodDemo() {
+    return <PaymentMethodForm {...args} onSubmit={async () => Promise.resolve()} />
+  }
+  return PaymentMethodDemo
+}
+
+// ---------------------------------------------------------------------
+
+export const components: PrototypeComponent[] = [
+  {
+    slug: 'welcome',
+    name: 'Welcome',
+    configurations: [
+      {
+        slug: 'individual',
+        name: 'Individual contractor',
+        description: 'Greeting personalized with the contractor’s first name.',
+        render: renderWelcome({ contractorName: 'Sasha', companyName: 'Acme Inc' }),
+      },
+      {
+        slug: 'business',
+        name: 'Business contractor',
+        description: 'Greeting personalized with the business name.',
+        render: renderWelcome({ contractorName: 'Pacific Design Co.', companyName: 'Acme Inc' }),
+      },
+      {
+        slug: 'no-name',
+        name: 'No contractor name on file',
+        description: 'Fallback when the contractor record has neither firstName nor businessName.',
+        render: renderWelcome({ contractorName: 'there', companyName: 'Acme Inc' }),
+      },
+    ],
+  },
+  {
+    slug: 'profile-details',
+    name: 'Profile Details',
+    configurations: [
+      {
+        slug: 'individual-fresh',
+        name: 'Individual, no SSN on file',
+        description:
+          'Fresh self-onboarding individual. SSN field is editable; Save button reads "Continue" because there is no cancel handler.',
+        render: renderProfileDetailsForm({
+          contractor: buildContractor({}),
+          heading: 'Complete your profile',
+          description: 'Please verify your name and provide your Social Security Number.',
+        }),
+      },
+      {
+        slug: 'business-fresh',
+        name: 'Business, no EIN on file',
+        description: 'Business contractor. Shows business name field and editable EIN.',
+        render: renderProfileDetailsForm({
+          contractor: buildContractor({
+            type: CONTRACTOR_TYPE.BUSINESS,
+            businessName: 'Pacific Design Co.',
+            firstName: null,
+            lastName: null,
+            email: 'mason.park@pacificdesign.com',
+            hasEin: false,
+          }),
+          heading: 'Complete your profile',
+          description: 'Please verify your business name and provide your EIN.',
+        }),
+      },
+      {
+        slug: 'individual-returning',
+        name: 'Individual, SSN already on file',
+        description:
+          'Returning contractor whose SSN was previously submitted. Renders the LockedField with a "Change" button.',
+        render: renderProfileDetailsForm({
+          contractor: buildContractor({ hasSsn: true }),
+          heading: 'Complete your profile',
+          description: 'Please verify your name and provide your Social Security Number.',
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'address-form',
+    name: 'Address Form',
+    configurations: [
+      {
+        slug: 'empty',
+        name: 'Empty',
+        description: 'No address on file yet — contractor fills it in from scratch.',
+        render: renderAddressForm({
+          heading: 'Your home address',
+          description: 'Please provide your current mailing address.',
+        }),
+      },
+      {
+        slug: 'prefilled',
+        name: 'Pre-filled',
+        description: 'Contractor returns to the step — address pre-populates from the prior visit.',
+        render: renderAddressForm({
+          heading: 'Your home address',
+          description: 'Please provide your current mailing address.',
+          defaultValues: {
+            street1: '123 Mission St',
+            street2: 'Apt 4B',
+            city: 'San Francisco',
+            state: 'CA',
+            zip: '94103',
+          },
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'payment-method-form',
+    name: 'Payment Method Form',
+    configurations: [
+      {
+        slug: 'check-default',
+        name: 'Check',
+        description: 'Default state — Check selected, bank account fields hidden.',
+        render: renderPaymentMethodForm({
+          heading: 'Set up your payment method',
+          description: 'Choose how you’d like to get paid.',
+          defaultValues: {
+            type: 'Check',
+            name: '',
+            routingNumber: '',
+            accountNumber: '',
+            accountType: 'Checking',
+          },
+        }),
+      },
+      {
+        slug: 'direct-deposit-empty',
+        name: 'Direct deposit, empty fields',
+        description: 'Direct deposit selected with no bank account on file — all fields empty.',
+        render: renderPaymentMethodForm({
+          heading: 'Set up your payment method',
+          description: 'Choose how you’d like to get paid.',
+          defaultValues: {
+            type: 'Direct Deposit',
+            name: '',
+            routingNumber: '',
+            accountNumber: '',
+            accountType: 'Checking',
+          },
+        }),
+      },
+      {
+        slug: 'direct-deposit-existing',
+        name: 'Direct deposit, existing bank account',
+        description:
+          'Returning contractor with a bank account already on file — account number renders as masked default.',
+        render: renderPaymentMethodForm({
+          heading: 'Set up your payment method',
+          description: 'Choose how you’d like to get paid.',
+          defaultValues: {
+            type: 'Direct Deposit',
+            name: 'Primary checking',
+            routingNumber: '110000000',
+            accountNumber: 'XXXXXX1234',
+            accountType: 'Checking',
+          },
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'document-list',
+    name: 'Document List',
+    configurations: [
+      {
+        slug: 'all-unsigned',
+        name: 'All unsigned',
+        description:
+          'Three documents waiting for signature. Continue button disabled until signed.',
+        render: renderDocumentList([
+          buildDocument({ uuid: 'doc-w9', title: 'W-9', description: 'Tax form' }),
+          buildDocument({ uuid: 'doc-nda', title: 'NDA', description: 'Non-disclosure agreement' }),
+          buildDocument({
+            uuid: 'doc-handbook',
+            title: 'Employee Handbook',
+            description: 'Company policies',
+          }),
+        ]),
+      },
+      {
+        slug: 'mixed',
+        name: 'Mixed signed and unsigned',
+        description: 'One signed, two unsigned. Continue still disabled.',
+        render: renderDocumentList([
+          buildDocument({
+            uuid: 'doc-w9',
+            title: 'W-9',
+            description: 'Tax form',
+            signedAt: new Date('2025-05-15').toISOString(),
+          }),
+          buildDocument({ uuid: 'doc-nda', title: 'NDA', description: 'Non-disclosure agreement' }),
+          buildDocument({
+            uuid: 'doc-handbook',
+            title: 'Employee Handbook',
+            description: 'Company policies',
+          }),
+        ]),
+      },
+      {
+        slug: 'all-signed',
+        name: 'All signed',
+        description: 'Every required document signed — Continue button enabled.',
+        render: renderDocumentList([
+          buildDocument({
+            uuid: 'doc-w9',
+            title: 'W-9',
+            description: 'Tax form',
+            signedAt: new Date('2025-05-15').toISOString(),
+          }),
+          buildDocument({
+            uuid: 'doc-nda',
+            title: 'NDA',
+            description: 'Non-disclosure agreement',
+            signedAt: new Date('2025-05-15').toISOString(),
+          }),
+        ]),
+      },
+      {
+        slug: 'empty',
+        name: 'Empty',
+        description: 'No documents to sign — empty-state message renders.',
+        render: renderDocumentList([]),
+      },
+    ],
+  },
+  {
+    slug: 'document-signature',
+    name: 'Document Signature',
+    configurations: [
+      {
+        slug: 'default',
+        name: 'Default',
+        description:
+          'A typical document signing screen — title, description, View document link to the W-9 PDF, signature input, and agree checkbox.',
+        render: renderDocumentSignature({
+          title: 'Form W-9',
+          description: 'Please review and sign your W-9 to proceed.',
+          pdfUrl: '/sample-documents/w9.pdf',
+        }),
+      },
+      {
+        slug: 'pending',
+        name: 'Submitting',
+        description: 'Sign-document mutation is in flight — button shows the loading state.',
+        render: renderDocumentSignature({
+          title: 'Form W-9',
+          description: 'Please review and sign your W-9 to proceed.',
+          pdfUrl: '/sample-documents/w9.pdf',
+          isPending: true,
+        }),
+      },
+    ],
+  },
+  {
+    slug: 'onboarding-complete',
+    name: 'Onboarding Complete',
+    configurations: [
+      {
+        slug: 'default',
+        name: 'Default',
+        description: 'Final confirmation screen with a Done button.',
+        render: renderOnboardingComplete(),
+      },
+    ],
+  },
+]
diff --git a/sdk-app/src/design/prototypes/employee-management/CompensationHistory/CompensationHistory.tsx b/sdk-app/src/design/prototypes/employee-management/CompensationHistory/CompensationHistory.tsx
new file mode 100644
index 000000000..8ab7f05eb
--- /dev/null
+++ b/sdk-app/src/design/prototypes/employee-management/CompensationHistory/CompensationHistory.tsx
@@ -0,0 +1,42 @@
+import { useJobsAndCompensationsGetJobs } from '@gusto/embedded-api-v-2025-11-15/react-query/jobsAndCompensationsGetJobs'
+import { GetV1EmployeesEmployeeIdJobsQueryParamInclude } from '@gusto/embedded-api-v-2025-11-15/models/operations/getv1employeesemployeeidjobs'
+import { CompensationHistory as CompensationHistoryView } from '../../../components/employee/management/CompensationHistory/CompensationHistory'
+import { BaseBoundaries, BaseLayout } from '@/components/Base'
+import { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'
+
+export interface CompensationHistoryProps {
+  employeeId: string
+  onBack?: () => void
+}
+
+export function CompensationHistory(props: CompensationHistoryProps) {
+  return (
+    <BaseBoundaries componentName="CompensationHistory">
+      <Root {...props} />
+    </BaseBoundaries>
+  )
+}
+
+function Root({ employeeId, onBack }: CompensationHistoryProps) {
+  const jobsQuery = useJobsAndCompensationsGetJobs(
+    {
+      employeeId,
+      include: GetV1EmployeesEmployeeIdJobsQueryParamInclude.AllCompensations,
+    },
+    { enabled: !!employeeId },
+  )
+
+  const errorHandling = composeErrorHandler([jobsQuery])
+
+  if (jobsQuery.isLoading || !jobsQuery.data) {
+    return <BaseLayout isLoading error={errorHandling.errors} />
+  }
+
+  const jobs = jobsQuery.data.jobs ?? []
+
+  return (
+    <BaseLayout error={errorHandling.errors}>
+      <CompensationHistoryView jobs={jobs} onBack={onBack} />
+    </BaseLayout>
+  )
+}
diff --git a/sdk-app/src/design/prototypes/employee-management/CompensationHistory/index.tsx b/sdk-app/src/design/prototypes/employee-management/CompensationHistory/index.tsx
new file mode 100644
index 000000000..d88a5806b
--- /dev/null
+++ b/sdk-app/src/design/prototypes/employee-management/CompensationHistory/index.tsx
@@ -0,0 +1,27 @@
+import { useOutletContext } from 'react-router-dom'
+import type { EntityIds } from '../../../../useEntities'
+import { ComponentStatesPage } from '../../ComponentStatesPage'
+import { CompensationHistory } from './CompensationHistory'
+import { components } from './states'
+
+const BASE_PATH = '/design/employee-compensation-history'
+
+export function CompensationHistoryPrototype() {
+  const outletContext = useOutletContext<{ entities: EntityIds } | null>()
+  const employeeId = outletContext?.entities.employeeId ?? ''
+
+  if (!employeeId) {
+    return (
+      <p>
+        No employee ID is configured. Set <code>VITE_EMPLOYEE_ID</code> or pick an employee from the
+        entity panel to view this prototype.
+      </p>
+    )
+  }
+
+  return <CompensationHistory employeeId={employeeId} />
+}
+
+export function CompensationHistoryStates() {
+  return <ComponentStatesPage basePath={`${BASE_PATH}/component-states`} components={components} />
+}
diff --git a/sdk-app/src/design/prototypes/employee-management/CompensationHistory/states.tsx b/sdk-app/src/design/prototypes/employee-management/CompensationHistory/states.tsx
new file mode 100644
index 000000000..b66bc51ec
--- /dev/null
+++ b/sdk-app/src/design/prototypes/employee-management/CompensationHistory/states.tsx
@@ -0,0 +1,173 @@
+import type { Job } from '@gusto/embedded-api-v-2025-11-15/models/components/job'
+import type { Compensation } from '@gusto/embedded-api-v-2025-11-15/models/components/compensation'
+import type { PrototypeComponent } from '../../prototypeTypes'
+import { CompensationHistory } from '../../../components/employee/management/CompensationHistory/CompensationHistory'
+
+interface BuildCompensationOverrides {
+  uuid?: string
+  jobUuid?: string
+  title?: string
+  rate?: string
+  paymentUnit?: string
+  flsaStatus?: string
+  effectiveDate?: string
+}
+
+function buildCompensation(overrides: BuildCompensationOverrides): Compensation {
+  return {
+    uuid: overrides.uuid ?? 'compensation-uuid',
+    version: 'compensation-version',
+    paymentUnit: overrides.paymentUnit ?? 'Hour',
+    flsaStatus: overrides.flsaStatus ?? 'Nonexempt',
+    adjustForMinimumWage: false,
+    jobUuid: overrides.jobUuid ?? 'job-uuid',
+    title: overrides.title ?? 'My Job',
+    effectiveDate: overrides.effectiveDate ?? '2024-12-24',
+    rate: overrides.rate ?? '100.00',
+  } as Compensation
+}
+
+interface BuildJobOverrides {
+  uuid?: string
+  currentCompensationUuid?: string
+  title?: string
+  rate?: string
+  paymentUnit?: string
+  flsaStatus?: string
+  compensations?: Compensation[]
+}
+
+function buildJob(overrides: BuildJobOverrides): Job {
+  const uuid = overrides.uuid ?? 'job-uuid'
+  const currentCompensationUuid = overrides.currentCompensationUuid ?? 'compensation-uuid'
+  const title = overrides.title ?? 'My Job'
+  const compensations = overrides.compensations ?? [
+    buildCompensation({
+      uuid: currentCompensationUuid,
+      jobUuid: uuid,
+      title,
+      flsaStatus: overrides.flsaStatus ?? 'Nonexempt',
+      paymentUnit: overrides.paymentUnit ?? 'Hour',
+      rate: overrides.rate ?? '100.00',
+    }),
+  ]
+
+  return {
+    uuid,
+    version: 'job-version',
+    employeeUuid: 'employee-uuid',
+    currentCompensationUuid,
+    paymentUnit: overrides.paymentUnit ?? 'Hour',
+    primary: true,
+    twoPercentShareholder: false,
+    title,
+    compensations,
+    rate: overrides.rate ?? '100.00',
+    hireDate: '2024-12-24',
+  } as Job
+}
+
+const singleJob: Job[] = [
+  buildJob({
+    uuid: 'job-1',
+    currentCompensationUuid: 'comp-1',
+    title: 'Software engineer',
+    rate: '85',
+    paymentUnit: 'Hour',
+    flsaStatus: 'Nonexempt',
+  }),
+]
+
+const multipleJobs: Job[] = [
+  buildJob({
+    uuid: 'job-1',
+    currentCompensationUuid: 'comp-1',
+    title: 'Software engineer',
+    rate: '85',
+    paymentUnit: 'Hour',
+    flsaStatus: 'Nonexempt',
+  }),
+  buildJob({
+    uuid: 'job-2',
+    currentCompensationUuid: 'comp-2',
+    title: 'Team lead',
+    rate: '120000',
+    paymentUnit: 'Year',
+    flsaStatus: 'Exempt',
+  }),
+]
+
+const mixedWages: Job[] = [
+  buildJob({
+    uuid: 'job-1',
+    currentCompensationUuid: 'comp-1',
+    title: 'Server',
+    rate: '44',
+    paymentUnit: 'Hour',
+    flsaStatus: 'Nonexempt',
+  }),
+  buildJob({
+    uuid: 'job-2',
+    currentCompensationUuid: 'comp-2',
+    title: 'Bookkeeper',
+    rate: '44000',
+    paymentUnit: 'Year',
+    flsaStatus: 'Nonexempt',
+  }),
+  buildJob({
+    uuid: 'job-3',
+    currentCompensationUuid: 'comp-3',
+    title: 'Dishwasher',
+    rate: '21',
+    paymentUnit: 'Hour',
+    flsaStatus: 'Nonexempt',
+  }),
+  buildJob({
+    uuid: 'job-4',
+    currentCompensationUuid: 'comp-4',
+    title: 'Bartender',
+    rate: '36',
+    paymentUnit: 'Hour',
+    flsaStatus: 'Nonexempt',
+  }),
+]
+
+function renderJobs(jobs: Job[]) {
+  function CompensationHistoryDemo() {
+    return <CompensationHistory jobs={jobs} />
+  }
+  return CompensationHistoryDemo
+}
+
+export const components: PrototypeComponent[] = [
+  {
+    slug: 'compensation-history',
+    name: 'Compensation History',
+    configurations: [
+      {
+        slug: 'single-job',
+        name: 'Single job',
+        description: 'One active job, one current compensation row.',
+        render: renderJobs(singleJob),
+      },
+      {
+        slug: 'multiple-jobs',
+        name: 'Multiple jobs',
+        description: 'Two jobs — combined view with a job filter.',
+        render: renderJobs(multipleJobs),
+      },
+      {
+        slug: 'mixed-wages',
+        name: 'Mixed wages',
+        description: 'Four jobs, all paid by the hour, with varied wage frequencies.',
+        render: renderJobs(mixedWages),
+      },
+      {
+        slug: 'empty',
+        name: 'Empty',
+        description: 'No jobs.',
+        render: renderJobs([]),
+      },
+    ],
+  },
+]
diff --git a/sdk-app/src/design/prototypes/prototypeTypes.ts b/sdk-app/src/design/prototypes/prototypeTypes.ts
new file mode 100644
index 000000000..e77f35491
--- /dev/null
+++ b/sdk-app/src/design/prototypes/prototypeTypes.ts
@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+
+export interface PrototypeConfiguration {
+  /** URL segment, e.g. "single-job" */
+  slug: string
+  /** Sidebar label, e.g. "Single job" */
+  name: string
+  /** Optional helper text */
+  description?: string
+  /** Renders the component under test with mock props */
+  render: () => ReactNode
+}
+
+export interface PrototypeComponent {
+  /** URL segment, e.g. "list" */
+  slug: string
+  /** Sidebar heading, e.g. "List" */
+  name: string
+  /** Optional helper text */
+  description?: string
+  configurations: PrototypeConfiguration[]
+}
diff --git a/sdk-app/src/design/registry.ts b/sdk-app/src/design/registry.ts
index d16e26abb..125872116 100644
--- a/sdk-app/src/design/registry.ts
+++ b/sdk-app/src/design/registry.ts
@@ -6,6 +6,7 @@ export interface PrototypeEntry {
   name: string
   path: string
   description: string
+  children?: PrototypeEntry[]
 }
 
 export type CategorizedRegistry = Record<Category, PrototypeEntry[]>
@@ -26,13 +27,56 @@ export const categorizedRegistry: CategorizedRegistry = {
       path: '/design/contractor-management',
       description:
         'A prototype flow for managing contractors — view the list and drill into individual profiles.',
+      children: [
+        {
+          name: 'Prototype',
+          path: '/design/contractor-management',
+          description: 'Live prototype against the real API.',
+        },
+        {
+          name: 'Component states',
+          path: '/design/contractor-management/component-states',
+          description: 'Browse individual components and configurations with mock data.',
+        },
+      ],
     },
     {
       name: 'Contractor Self-Onboarding',
       path: '/design/contractor-self-onboarding',
       description: 'The contractor-facing onboarding experience after receiving an invite link.',
+      children: [
+        {
+          name: 'Prototype',
+          path: '/design/contractor-self-onboarding',
+          description: 'Live prototype against the real API.',
+        },
+        {
+          name: 'Component states',
+          path: '/design/contractor-self-onboarding/component-states',
+          description: 'Browse individual components and configurations with mock data.',
+        },
+      ],
+    },
+  ],
+  Employees: [
+    {
+      name: 'Compensation History',
+      path: '/design/employee-compensation-history',
+      description:
+        'A read-only view of an employee’s compensation history across all of their jobs, with a job filter for multi-job employees.',
+      children: [
+        {
+          name: 'Prototype',
+          path: '/design/employee-compensation-history/prototype',
+          description: 'Live prototype against the real API.',
+        },
+        {
+          name: 'Component states',
+          path: '/design/employee-compensation-history/component-states',
+          description: 'Browse individual components and configurations with mock data.',
+        },
+      ],
     },
   ],
-  Employees: [],
   Payroll: [],
 }
diff --git a/sdk-app/src/main.tsx b/sdk-app/src/main.tsx
index a16cdc2b4..7c2dfa945 100644
--- a/sdk-app/src/main.tsx
+++ b/sdk-app/src/main.tsx
@@ -1,19 +1,27 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 import { App } from './App'
 import { Home } from './Home'
 import { RoutedComponentRenderer } from './RoutedComponentRenderer'
 import { DesignLayout } from './design/DesignLayout'
 import { DesignHome } from './design/DesignHome'
 import { ComponentShowcase } from './design/prototypes/component-showcase'
-import { ContractorManagementFlow } from './design/prototypes/contractor-management/contractor-profile/ContractorManagementFlow'
-import ContractorList from './design/prototypes/contractor-management/contractor-list/ContractorList'
-import { ContractorProfile } from './design/prototypes/contractor-management/contractor-profile/ContractorProfile'
-import { ContractorDismiss } from './design/prototypes/contractor-management/contractor-list/ContractorDismiss'
-import { ContractorRehire } from './design/prototypes/contractor-management/contractor-list/ContractorRehire'
-import { AddContractor } from './design/prototypes/contractor-management/contractor-list/AddContractor'
-import { ContractorSelfOnboarding } from './design/prototypes/contractor-management/self-onboarding'
+import { ContractorManagementFlow } from './design/prototypes/contractor-management/ContractorManagementFlow'
+import { ContractorList } from './design/prototypes/contractor-management/ContractorList'
+import { ContractorProfile } from './design/prototypes/contractor-management/ContractorProfile'
+import { ContractorDismiss } from './design/prototypes/contractor-management/ContractorDismiss'
+import { ContractorRehire } from './design/prototypes/contractor-management/ContractorRehire'
+import { AddContractor } from './design/prototypes/contractor-management/AddContractor'
+import {
+  ContractorSelfOnboarding,
+  ContractorSelfOnboardingStates,
+} from './design/prototypes/contractor-self-onboarding'
+import { ContractorManagementStates } from './design/prototypes/contractor-management'
+import {
+  CompensationHistoryPrototype,
+  CompensationHistoryStates,
+} from './design/prototypes/employee-management/CompensationHistory'
 import './app.scss'
 import '@/styles/sdk.scss'
 
@@ -37,12 +45,54 @@ const router = createBrowserRouter([
               { index: true, element: <ContractorList /> },
               { path: 'add', element: <AddContractor /> },
               { path: 'add/:contractorId', element: <AddContractor /> },
+              {
+                path: 'component-states',
+                children: [
+                  { index: true, element: <ContractorManagementStates /> },
+                  {
+                    path: ':componentSlug/:configSlug',
+                    element: <ContractorManagementStates />,
+                  },
+                ],
+              },
               { path: ':contractorId', element: <ContractorProfile /> },
               { path: ':contractorId/dismiss', element: <ContractorDismiss /> },
               { path: ':contractorId/rehire', element: <ContractorRehire /> },
             ],
           },
-          { path: 'contractor-self-onboarding', element: <ContractorSelfOnboarding /> },
+          {
+            path: 'contractor-self-onboarding',
+            children: [
+              { index: true, element: <ContractorSelfOnboarding /> },
+              {
+                path: 'component-states',
+                children: [
+                  { index: true, element: <ContractorSelfOnboardingStates /> },
+                  {
+                    path: ':componentSlug/:configSlug',
+                    element: <ContractorSelfOnboardingStates />,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: 'employee-compensation-history',
+            children: [
+              { index: true, element: <Navigate to="prototype" replace /> },
+              { path: 'prototype', element: <CompensationHistoryPrototype /> },
+              {
+                path: 'component-states',
+                children: [
+                  { index: true, element: <CompensationHistoryStates /> },
+                  {
+                    path: ':componentSlug/:configSlug',
+                    element: <CompensationHistoryStates />,
+                  },
+                ],
+              },
+            ],
+          },
         ],
       },
     ],