diff --git a/examples/storybook/.storybook/main.ts b/examples/storybook/.storybook/main.ts
index 4a35a68..ca94d9a 100644
--- a/examples/storybook/.storybook/main.ts
+++ b/examples/storybook/.storybook/main.ts
@@ -2,11 +2,14 @@
  * Storybook main configuration.
  *
  * - Framework: @storybook/react-vite
- * - Addons: essentials (controls, docs, actions, viewport) + interactions (play functions)
+ * - Addons: essentials (controls, docs, actions) + interactions (play functions)
  * - viteFinal: mirrors the react-native-web + Tamagui settings from examples/react-web
  */
+import { fileURLToPath } from 'node:url'
 import type { StorybookConfig } from '@storybook/react-vite'
 
+const reactNativeSvgShim = fileURLToPath(new URL('../src/shims/reactNativeSvg.tsx', import.meta.url))
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
@@ -18,7 +21,7 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   viteFinal: async (config) => {
-    // Mirror the Vite settings from examples/react-web so Tamagui + react-native-web resolve
+    // Mirror the Vite settings from examples/react-web so Tamagui + react-native-web resolve.
     config.define = {
       ...config.define,
       global: 'globalThis',
@@ -30,6 +33,7 @@ const config: StorybookConfig = {
       alias: {
         ...(config.resolve?.alias as Record<string, string> | undefined),
         'react-native': 'react-native-web',
+        'react-native-svg': reactNativeSvgShim,
       },
     }
     config.optimizeDeps = {
diff --git a/examples/storybook/package.json b/examples/storybook/package.json
index 25373c9..dc1e8b8 100644
--- a/examples/storybook/package.json
+++ b/examples/storybook/package.json
@@ -13,6 +13,7 @@
     "@goodwidget/ui": "workspace:*",
     "@goodwidget/claim-widget-theme-demo": "workspace:*",
     "@goodwidget/citizen-claim-widget": "workspace:*",
+    "@goodwidget/governance-widget": "workspace:*",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-native-web": "^0.19.13",
diff --git a/examples/storybook/src/shims/reactNativeSvg.tsx b/examples/storybook/src/shims/reactNativeSvg.tsx
new file mode 100644
index 0000000..09c0d37
--- /dev/null
+++ b/examples/storybook/src/shims/reactNativeSvg.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+
+type SvgElementProps = React.SVGProps<SVGSVGElement> & {
+  accessibilityRole?: string
+}
+
+type SvgGroupProps = React.SVGProps<SVGGElement> & {
+  rotation?: string | number
+  origin?: string
+}
+
+type SvgCircleProps = React.SVGProps<SVGCircleElement> & {
+  onPress?: () => void
+}
+
+/** Storybook web shim for the react-native-svg primitives used by the donut chart. */
+export default function Svg({ accessibilityRole: _accessibilityRole, ...props }: SvgElementProps) {
+  return <svg {...props} />
+}
+
+/** Mirrors react-native-svg's G transform props with standard SVG attributes. */
+export function G({ rotation, origin, transform, ...props }: SvgGroupProps) {
+  const rotationTransform = rotation ? `rotate(${rotation} ${origin ?? ''})`.trim() : undefined
+  const combinedTransform = [transform, rotationTransform].filter(Boolean).join(' ')
+
+  return <g {...props} transform={combinedTransform || undefined} />
+}
+
+/** Maps react-native-svg onPress to the browser SVG onClick event for stories. */
+export function Circle({ onPress, ...props }: SvgCircleProps) {
+  return <circle {...props} onClick={onPress} />
+}
diff --git a/examples/storybook/src/stories/governance-widget/GovernanceDashboard.stories.tsx b/examples/storybook/src/stories/governance-widget/GovernanceDashboard.stories.tsx
new file mode 100644
index 0000000..894697a
--- /dev/null
+++ b/examples/storybook/src/stories/governance-widget/GovernanceDashboard.stories.tsx
@@ -0,0 +1,304 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Text, XStack, YStack } from '@goodwidget/ui'
+import {
+  AlignmentVotingProposalCard,
+  BalanceCard,
+  FundingDistributionChart,
+  ImpactCard,
+  OptimisticVotingProposalCard,
+} from '@goodwidget/governance-widget'
+import type {
+  FundingProjectAllocation,
+  RankedVotingOption,
+  VoteSegment,
+  VoterPreview,
+} from '@goodwidget/governance-widget'
+
+const meta: Meta = {
+  title: 'Widgets/GovernanceDashboard',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    goodWidgetProvider: { useShell: false, defaultTheme: 'light' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const alignmentOptions: RankedVotingOption[] = [
+  { id: 'food-chain', label: 'Local Food Chain', percentage: 42 },
+  { id: 'web3-literacy', label: 'Web3 Literacy', percentage: 31 },
+  { id: 'civic-onboarding', label: 'Civic Onboarding', percentage: 27 },
+  { id: 'regenerative-markets', label: 'Regenerative Markets', percentage: 18 },
+]
+
+const voteSegments: VoteSegment[] = [
+  { id: 'for', label: 'For', percentage: 65, tone: 'for' },
+  { id: 'against', label: 'Against', percentage: 10, tone: 'against' },
+  { id: 'abstain', label: 'Abstain', percentage: 3, tone: 'abstain' },
+]
+
+const lowQuorumSegments: VoteSegment[] = [
+  { id: 'for', label: 'For', percentage: 24, tone: 'for' },
+  { id: 'against', label: 'Against', percentage: 18, tone: 'against' },
+  { id: 'abstain', label: 'Abstain', percentage: 8, tone: 'abstain' },
+]
+
+const voters: VoterPreview[] = [
+  { id: 'maya', label: 'Maya' },
+  { id: 'kenji', label: 'Kenji' },
+  { id: 'sol', label: 'Sol' },
+  { id: 'ama', label: 'Ama' },
+]
+
+const fundingProjects: FundingProjectAllocation[] = [
+  {
+    id: 'food',
+    name: 'Local Food Chain',
+    amount: { value: 12400, token: 'G$', isStreaming: true },
+    percentage: 42,
+  },
+  {
+    id: 'literacy',
+    name: 'Web3 Literacy for Community Builders',
+    amount: { value: 9100, token: 'G$' },
+    percentage: 31,
+  },
+  {
+    id: 'civic',
+    name: 'Civic Onboarding',
+    amount: { value: 7900, token: 'G$' },
+    percentage: 27,
+  },
+]
+
+function GovernanceStoryFrame({
+  children,
+  width = 520,
+}: {
+  children: React.ReactNode
+  width?: number
+}) {
+  const [lastAction, setLastAction] = useState('No interaction yet')
+
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    return React.cloneElement(child, {
+      onPress: (id: string) => setLastAction(`Opened ${id}`),
+      onCtaPress: () => setLastAction('CTA pressed'),
+      onProjectPress: (id: string) => setLastAction(`Opened project ${id}`),
+    } as Record<string, unknown>)
+  })
+
+  return (
+    <YStack width={width} maxWidth="100%" gap="$3" padding="$3">
+      {enhancedChildren}
+      <Text variant="caption" tone="secondary" data-testid="GovernanceWidget-last-action">
+        {lastAction}
+      </Text>
+    </YStack>
+  )
+}
+
+export const ImpactLight: Story = {
+  render: () => (
+    <GovernanceStoryFrame>
+      <ImpactCard
+        testID="ImpactCard-light"
+        title="Community impact this month"
+        metrics={[
+          {
+            label: 'Distributed',
+            amount: { value: 348000, token: 'G$' },
+            description: 'Across verified community projects',
+          },
+          {
+            label: 'Streaming now',
+            amount: {
+              value: 12800,
+              token: 'G$',
+              isStreaming: true,
+              streamLabel: 'G$ / month live',
+            },
+            description: 'Active flow to approved recipients',
+          },
+        ]}
+        description="Track how governance funding turns into measurable economic activity for GoodDollar members."
+        ctaLabel="View impact report"
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const ImpactDarkLongDisabledMobile: Story = {
+  parameters: {
+    goodWidgetProvider: { useShell: false, defaultTheme: 'dark' },
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => (
+    <GovernanceStoryFrame width={328}>
+      <ImpactCard
+        testID="ImpactCard-dark-mobile-disabled"
+        title="Long-running regional resilience campaign with intentionally verbose title"
+        metrics={[
+          { label: 'Committed', amount: { value: 914000, token: 'G$' } },
+          {
+            label: 'Live stream',
+            amount: {
+              value: 42500,
+              token: 'G$',
+              isStreaming: true,
+              streamLabel: 'Streaming every month',
+            },
+          },
+        ]}
+        description="This longer description validates wrapping and mobile stacking without relying on runtime data or contract reads."
+        ctaLabel="Coming soon"
+        ctaDisabled
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const BalanceVariantsLight: Story = {
+  render: () => (
+    <XStack flexWrap="wrap" gap="$3" padding="$3" width={560}>
+      <BalanceCard
+        testID="BalanceCard-token-growth"
+        icon="wallet"
+        title="Voting balance"
+        amount={{ value: 12345.67, token: 'G$' }}
+        metadata={{ label: '+12.4% this cycle', tone: 'positive', icon: 'chevron-up' }}
+      />
+      <BalanceCard
+        testID="BalanceCard-raw-window"
+        icon="check"
+        title="Eligible proposals with a long title"
+        amount={17}
+        amountType="raw"
+        metadata={{ label: 'Last 30 days', tone: 'muted', icon: 'info' }}
+      />
+    </XStack>
+  ),
+}
+
+export const BalanceDarkCompact: Story = {
+  parameters: { goodWidgetProvider: { useShell: false, defaultTheme: 'dark' } },
+  render: () => (
+    <GovernanceStoryFrame width={252}>
+      <BalanceCard
+        testID="BalanceCard-dark-compact"
+        compact
+        icon="wallet"
+        title="Compact delegated voting power with truncation"
+        amount={{ value: 7821, token: 'G$' }}
+        metadata={{ label: 'Snapshot in 3 days', tone: 'muted', icon: 'info' }}
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const AlignmentDefaultLight: Story = {
+  render: () => (
+    <GovernanceStoryFrame>
+      <AlignmentVotingProposalCard
+        testID="AlignmentVotingProposalCard-default"
+        id="alignment-q3"
+        categoryLabel="Alignment Vote"
+        title="Q3 House Of Alignment Funding Allocation"
+        summaryLabel="Current top 3 voted"
+        options={alignmentOptions}
+        maxVisibleOptions={3}
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const AlignmentDarkLongOptions: Story = {
+  parameters: { goodWidgetProvider: { useShell: false, defaultTheme: 'dark' } },
+  render: () => (
+    <GovernanceStoryFrame>
+      <AlignmentVotingProposalCard
+        testID="AlignmentVotingProposalCard-dark-long"
+        id="alignment-long"
+        categoryLabel="Budget Allocation"
+        title="Very long alignment voting proposal title that validates multi-line wrapping and still keeps the ranked options readable"
+        summaryLabel="Leading weighted vote units"
+        options={alignmentOptions}
+        maxVisibleOptions={2}
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const OptimisticHighQuorumLight: Story = {
+  render: () => (
+    <GovernanceStoryFrame>
+      <OptimisticVotingProposalCard
+        testID="OptimisticVotingProposalCard-high-quorum"
+        id="gip-43"
+        categoryLabel="Proposal GIP-43"
+        title="Approve House of Alignment funding allocation"
+        quorumLabel="Current Vote Quorum"
+        quorumReachedPercent={78}
+        voteSegments={voteSegments}
+        voters={voters}
+        remainingVoterCountLabel="+1.2k"
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const OptimisticDarkLowQuorumMixed: Story = {
+  parameters: { goodWidgetProvider: { useShell: false, defaultTheme: 'dark' } },
+  render: () => (
+    <GovernanceStoryFrame>
+      <OptimisticVotingProposalCard
+        testID="OptimisticVotingProposalCard-low-quorum"
+        id="gip-44"
+        categoryLabel="Optimistic Vote"
+        title="Challenge window for updated seasonal member metadata and recipient weights"
+        quorumLabel="Minimum participation"
+        quorumReachedPercent={39}
+        voteSegments={lowQuorumSegments}
+        voters={voters.slice(0, 3)}
+        remainingVoterCountLabel="+84"
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const FundingDistributionLight: Story = {
+  render: () => (
+    <GovernanceStoryFrame width={660}>
+      <FundingDistributionChart
+        testID="FundingDistributionChart-populated"
+        totalAmount={{ value: 29400, token: 'G$', isStreaming: true, streamLabel: 'Live total' }}
+        isStreaming
+        projects={fundingProjects}
+      />
+    </GovernanceStoryFrame>
+  ),
+}
+
+export const FundingDistributionDarkEmptyMobile: Story = {
+  parameters: {
+    goodWidgetProvider: { useShell: false, defaultTheme: 'dark' },
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => (
+    <GovernanceStoryFrame width={328}>
+      <FundingDistributionChart
+        testID="FundingDistributionChart-empty-dark-mobile"
+        totalAmount={{ value: 0, token: 'G$', isStreaming: true, streamLabel: 'No active stream' }}
+        isStreaming
+        projects={[]}
+      />
+    </GovernanceStoryFrame>
+  ),
+}
diff --git a/examples/storybook/src/stories/governance-widget/GovernanceOnboarding.stories.tsx b/examples/storybook/src/stories/governance-widget/GovernanceOnboarding.stories.tsx
new file mode 100644
index 0000000..45b870a
--- /dev/null
+++ b/examples/storybook/src/stories/governance-widget/GovernanceOnboarding.stories.tsx
@@ -0,0 +1,345 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Card, Text, YStack } from '@goodwidget/ui'
+import {
+  GovernanceOnboardingWidget,
+  type GovernanceOnboardingWidgetProps,
+} from '@goodwidget/governance-widget'
+import {
+  getInjectedEip1193Provider,
+  isInjectedProviderUsable,
+} from '../../fixtures/injectedEip1193'
+import { createCustodialEip1193Provider } from '../../fixtures/custodialEip1193'
+
+const meta: Meta<typeof GovernanceOnboardingWidget> = {
+  title: 'Widgets/GovernanceOnboarding',
+  component: GovernanceOnboardingWidget,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    goodWidgetProvider: { useShell: false, defaultTheme: 'light' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const failedTransactionSteps = [
+  {
+    id: 'prepare',
+    title: 'Prepare wallet balance',
+    status: 'completed',
+  },
+  {
+    id: 'approve',
+    title: 'Approve governance stake',
+    status: 'completed',
+  },
+  {
+    id: 'stake',
+    title: 'Lock the membership stake',
+    description: 'The previous transaction failed and needs a retry from the wallet.',
+    status: 'failed',
+  },
+  {
+    id: 'finalize',
+    title: 'Finalize governance access',
+    status: 'pending',
+  },
+] as const
+
+function GovernanceStoryFrame({
+  walletLabel,
+  children,
+  dataTestId,
+  width = 440,
+}: {
+  walletLabel: string
+  children: React.ReactNode
+  dataTestId: string
+  width?: number
+}) {
+  return (
+    <YStack width={width} maxWidth="100%" gap="$3" data-testid={dataTestId}>
+      <Card outlined>
+        <Text variant="caption" tone="secondary">
+          {walletLabel}
+        </Text>
+      </Card>
+      {children}
+    </YStack>
+  )
+}
+
+function InjectedGovernanceStory({
+  walletLabel,
+  storyProps,
+  dataTestId,
+}: {
+  walletLabel: string
+  storyProps: GovernanceOnboardingWidgetProps
+  dataTestId: string
+}) {
+  const injectedProvider = getInjectedEip1193Provider()
+  const usableProvider = isInjectedProviderUsable(injectedProvider)
+
+  if (!usableProvider) {
+    return (
+      <YStack width={440} gap="$3" data-testid="GovernanceOnboardingWidget-no-wallet">
+        <Card>
+          <Text bold>No injected wallet found</Text>
+          <Text tone="secondary">
+            Install or enable an injected EIP-1193 wallet in this browser, then refresh Storybook.
+          </Text>
+        </Card>
+      </YStack>
+    )
+  }
+
+  return (
+    <GovernanceStoryFrame walletLabel={walletLabel} dataTestId={dataTestId}>
+      <GovernanceOnboardingWidget {...storyProps} />
+    </GovernanceStoryFrame>
+  )
+}
+
+function CustodialGovernanceStory({
+  walletLabel,
+  storyProps,
+  dataTestId,
+  width,
+}: {
+  walletLabel: string
+  storyProps: GovernanceOnboardingWidgetProps
+  dataTestId: string
+  width?: number
+}) {
+  try {
+    createCustodialEip1193Provider()
+
+    return (
+      <GovernanceStoryFrame walletLabel={walletLabel} dataTestId={dataTestId} width={width}>
+        <GovernanceOnboardingWidget {...storyProps} />
+      </GovernanceStoryFrame>
+    )
+  } catch (error: unknown) {
+    return (
+      <YStack width={width ?? 440} gap="$3" data-testid="GovernanceOnboardingWidget-custodial-config-error">
+        <Card>
+          <Text bold>Custodial fixture not configured</Text>
+          <Text tone="secondary">
+            {error instanceof Error ? error.message : 'Set a local private key in custodialEip1193.ts'}
+          </Text>
+        </Card>
+      </YStack>
+    )
+  }
+}
+
+export const InjectedWelcomeUnverified: Story = {
+  render: () => (
+    <InjectedGovernanceStory
+      walletLabel="Injected wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-injected-unverified"
+      storyProps={{
+        currentStepId: 'welcome',
+        identityStatus: 'unverified',
+        dataTestId: 'GovernanceOnboardingWidget-welcome-unverified',
+      }}
+    />
+  ),
+}
+
+export const CustodialInteractiveFlow: Story = {
+  render: () => (
+    <CustodialGovernanceStory
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-custodial-interactive"
+      storyProps={{
+        identityStatus: 'verified',
+        initialStepId: 'welcome',
+        walletAddress: '0x4E5B2D7a45C2e31a8F0d09b4bE1fA11aD3aC9F08',
+        dataTestId: 'GovernanceOnboardingWidget-interactive-flow',
+      }}
+    />
+  ),
+}
+
+export const CustodialWelcomeUnverified: Story = {
+  render: () => (
+    <CustodialGovernanceStory
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-custodial-unverified"
+      storyProps={{
+        currentStepId: 'welcome',
+        identityStatus: 'unverified',
+        walletAddress: '0x4E5B2D7a45C2e31a8F0d09b4bE1fA11aD3aC9F08',
+        dataTestId: 'GovernanceOnboardingWidget-welcome-unverified-custodial',
+      }}
+    />
+  ),
+}
+
+export const CustodialHouseSelection: Story = {
+  render: () => (
+    <CustodialGovernanceStory
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-custodial-house"
+      storyProps={{
+        currentStepId: 'house',
+        identityStatus: 'verified',
+        dataTestId: 'GovernanceOnboardingWidget-house-selection',
+      }}
+    />
+  ),
+}
+
+export const CustodialCitizenshipProfileReady: Story = {
+  render: () => (
+    <CustodialGovernanceStory
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-custodial-citizenship-profile"
+      storyProps={{
+        currentStepId: 'profile',
+        identityStatus: 'verified',
+        initialHouse: 'citizenship',
+        initialProfileDraft: {
+          name: 'Maya Citizen',
+          socialLinks: 'https://twitter.com/gooddollar',
+        },
+        dataTestId: 'GovernanceOnboardingWidget-citizenship-profile-ready',
+      }}
+    />
+  ),
+}
+
+export const CustodialAlignmentProfileError: Story = {
+  parameters: {
+    goodWidgetProvider: { useShell: false, defaultTheme: 'dark' },
+  },
+  render: () => (
+    <CustodialGovernanceStory
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-custodial-alignment-profile"
+      storyProps={{
+        currentStepId: 'profile',
+        identityStatus: 'verified',
+        initialHouse: 'alignment',
+        initialProfileDraft: {
+          name: 'Solar Commons',
+        },
+        initialFieldErrors: {
+          projectWebpage: 'Project webpage is required',
+          missionStatement: 'Mission statement is required',
+          distributionStrategy: 'Distribution strategy is required',
+        },
+        dataTestId: 'GovernanceOnboardingWidget-alignment-profile-error',
+      }}
+    />
+  ),
+}
+
+export const CustodialStakeProgress: Story = {
+  parameters: {
+    goodWidgetProvider: { useShell: false, defaultTheme: 'dark' },
+  },
+  render: () => (
+    <CustodialGovernanceStory
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-custodial-stake"
+      storyProps={{
+        currentStepId: 'stake',
+        identityStatus: 'verified',
+        initialHouse: 'alignment',
+        transactionSteps: [...failedTransactionSteps],
+        dataTestId: 'GovernanceOnboardingWidget-stake-progress',
+      }}
+    />
+  ),
+}
+
+export const CustodialSuccess: Story = {
+  render: () => (
+    <CustodialGovernanceStory
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-custodial-success"
+      storyProps={{
+        currentStepId: 'success',
+        identityStatus: 'verified',
+        initialHouse: 'alignment',
+        finalActions: [
+          { id: 'proposals', label: 'Explore Governance Proposals', variant: 'secondary' },
+          { id: 'profile', label: 'Go to my profile', variant: 'primary' },
+        ],
+        dataTestId: 'GovernanceOnboardingWidget-success',
+      }}
+    />
+  ),
+}
+
+function CustodialGovernanceStoryAtWidth({
+  walletLabel,
+  storyProps,
+  dataTestId,
+  width,
+}: {
+  walletLabel: string
+  storyProps: GovernanceOnboardingWidgetProps
+  dataTestId: string
+  width: number
+}) {
+  return (
+    <CustodialGovernanceStory
+      walletLabel={walletLabel}
+      dataTestId={dataTestId}
+      storyProps={{
+        ...storyProps,
+        dataTestId,
+      }}
+      width={width}
+    />
+  )
+}
+
+export const CustodialMobileWelcome: Story = {
+  parameters: {
+    goodWidgetProvider: { useShell: false, defaultTheme: 'light' },
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => (
+    <CustodialGovernanceStoryAtWidth
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-mobile-welcome"
+      width={328}
+      storyProps={{
+        currentStepId: 'welcome',
+        identityStatus: 'verified',
+      }}
+    />
+  ),
+}
+
+export const CustodialMobileDarkProfile: Story = {
+  parameters: {
+    goodWidgetProvider: { useShell: false, defaultTheme: 'dark' },
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => (
+    <CustodialGovernanceStoryAtWidth
+      walletLabel="Custodial wallet fixture"
+      dataTestId="GovernanceOnboardingWidget-mobile-dark-profile"
+      width={328}
+      storyProps={{
+        currentStepId: 'profile',
+        identityStatus: 'verified',
+        initialHouse: 'alignment',
+        initialProfileDraft: { name: 'Solar Commons' },
+        initialFieldErrors: {
+          projectWebpage: 'Project webpage is required',
+          missionStatement: 'Mission statement is required',
+          distributionStrategy: 'Distribution strategy is required',
+        },
+      }}
+    />
+  ),
+}
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/README.md b/examples/storybook/src/stories/governance-widget/screenshots/README.md
new file mode 100644
index 0000000..42eaaf4
--- /dev/null
+++ b/examples/storybook/src/stories/governance-widget/screenshots/README.md
@@ -0,0 +1,43 @@
+# Governance Onboarding — Reference Screenshots
+
+This directory holds the **curated reference set** for the governance onboarding widget.
+The PNGs are produced by the Playwright suite (`pnpm test:demo tests/widgets/governance-widget`)
+and copied here for human review.
+
+## How to regenerate
+
+```bash
+# From repo root:
+pnpm --filter @goodwidget/storybook build-storybook   # optional, dev server also works
+pnpm storybook &                                       # start dev server on :6006
+pnpm test:demo tests/widgets/governance-widget        # runs the suite, writes test-results/
+```
+
+Then copy each `tests/widgets/governance-widget/test-results/gwo-NN-*.png` into this
+directory under its state-based name below.
+
+## What's here
+
+| State | Story | Notes |
+|---|---|---|
+| `welcome-verified.png` | `custodialInteractiveFlow` (step 1) | Verified welcome; CTA enabled |
+| `welcome-unverified.png` | `custodialWelcomeUnverified` | Unverified welcome; CTA disabled |
+| `house-selection.png` | `custodialInteractiveFlow` (step 2) | House selection inside the interactive flow |
+| `house-selection-standalone.png` | `custodialHouseSelection` | House selection as a standalone story |
+| `profile-alignment.png` | `custodialInteractiveFlow` (step 3) | Alignment profile with all fields filled |
+| `profile-citizenship-ready.png` | `custodialCitizenshipProfileReady` | Citizenship profile ready to continue |
+| `profile-alignment-error.png` | `custodialAlignmentProfileError` | Alignment profile with field errors |
+| `stake-progress-active.png` | `custodialInteractiveFlow` (step 4) | Stake stepper with active transaction |
+| `stake-progress-failed.png` | `custodialStakeProgress` | Stake stepper with failed transaction |
+| `success.png` | `custodialInteractiveFlow` (step 5) | Success state inside the interactive flow |
+| `success-standalone.png` | `custodialSuccess` | Success state as a standalone story |
+
+## Naming convention
+
+- **`screenshots/`** — curated, state-named reference set, checked in, regenerated
+  on demand. This is what reviewers look at.
+- **`tests/widgets/governance-widget/test-results/`** — Playwright run artifacts.
+  These churn on every test run and should not be considered reference quality.
+
+The two directories intentionally diverge to keep reference evidence stable while
+allowing test artifacts to evolve with the test suite.
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/house-selection-standalone.png b/examples/storybook/src/stories/governance-widget/screenshots/house-selection-standalone.png
new file mode 100644
index 0000000..8c92079
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/house-selection-standalone.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/house-selection.png b/examples/storybook/src/stories/governance-widget/screenshots/house-selection.png
new file mode 100644
index 0000000..3ec1172
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/house-selection.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/profile-alignment-error.png b/examples/storybook/src/stories/governance-widget/screenshots/profile-alignment-error.png
new file mode 100644
index 0000000..41aeead
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/profile-alignment-error.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/profile-alignment.png b/examples/storybook/src/stories/governance-widget/screenshots/profile-alignment.png
new file mode 100644
index 0000000..a1b7394
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/profile-alignment.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/profile-citizenship-ready.png b/examples/storybook/src/stories/governance-widget/screenshots/profile-citizenship-ready.png
new file mode 100644
index 0000000..55d2971
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/profile-citizenship-ready.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/stake-progress-active.png b/examples/storybook/src/stories/governance-widget/screenshots/stake-progress-active.png
new file mode 100644
index 0000000..fa59af4
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/stake-progress-active.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/stake-progress-failed.png b/examples/storybook/src/stories/governance-widget/screenshots/stake-progress-failed.png
new file mode 100644
index 0000000..734919b
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/stake-progress-failed.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/success-standalone.png b/examples/storybook/src/stories/governance-widget/screenshots/success-standalone.png
new file mode 100644
index 0000000..d94e3a9
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/success-standalone.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/success.png b/examples/storybook/src/stories/governance-widget/screenshots/success.png
new file mode 100644
index 0000000..d94e3a9
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/success.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/welcome-unverified.png b/examples/storybook/src/stories/governance-widget/screenshots/welcome-unverified.png
new file mode 100644
index 0000000..e9b145d
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/welcome-unverified.png differ
diff --git a/examples/storybook/src/stories/governance-widget/screenshots/welcome-verified.png b/examples/storybook/src/stories/governance-widget/screenshots/welcome-verified.png
new file mode 100644
index 0000000..039448b
Binary files /dev/null and b/examples/storybook/src/stories/governance-widget/screenshots/welcome-verified.png differ
diff --git a/packages/governance-widget/package.json b/packages/governance-widget/package.json
new file mode 100644
index 0000000..007f847
--- /dev/null
+++ b/packages/governance-widget/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@goodwidget/governance-widget",
+  "version": "0.1.0",
+  "description": "Presentational governance homepage components for GoodWidget",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist .turbo"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@goodwidget/ui": "workspace:*",
+    "react-native-svg": "15.15.5",
+    "tamagui": "1.121.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0"
+  }
+}
diff --git a/packages/governance-widget/src/GovernanceOnboardingWidget.tsx b/packages/governance-widget/src/GovernanceOnboardingWidget.tsx
new file mode 100644
index 0000000..14a7420
--- /dev/null
+++ b/packages/governance-widget/src/GovernanceOnboardingWidget.tsx
@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react'
+import { PageWizardProvider } from '@goodwidget/ui'
+import { GovernanceOnboardingFlow } from './onboarding/GovernanceOnboardingFlow'
+import { DEFAULT_FINAL_ACTIONS, DEFAULT_TRANSACTION_STEPS, ONBOARDING_STEPS } from './onboarding/constants'
+import type {
+  GovernanceOnboardingStepId,
+  GovernanceOnboardingWidgetProps,
+  GovernanceWizardData,
+} from './types'
+
+/**
+ * GovernanceOnboardingWidget keeps the five onboarding pages UI-only for now.
+ * The component owns light/dark-safe visuals, simple local navigation, and a
+ * presentational state contract that stories and later runtime integrations can drive.
+ */
+export function GovernanceOnboardingWidget({
+  currentStepId,
+  initialStepId = 'welcome',
+  identityStatus = 'verified',
+  walletAddress,
+  initialHouse,
+  disabledHouseOptions = [],
+  initialProfileDraft,
+  initialFieldErrors = {},
+  stakeAmountLabel = '250 G$',
+  transactionSteps = DEFAULT_TRANSACTION_STEPS,
+  finalActions = DEFAULT_FINAL_ACTIONS,
+  dataTestId,
+  onStepChange,
+  onVerifyIdentity,
+  onFinalActionPress,
+}: GovernanceOnboardingWidgetProps) {
+  const initialWizardData = useMemo<GovernanceWizardData>(
+    () => ({
+      selectedHouse: initialHouse,
+      profileDraft: initialProfileDraft ?? {},
+    }),
+    [initialHouse, initialProfileDraft],
+  )
+
+  return (
+    <PageWizardProvider
+      steps={ONBOARDING_STEPS}
+      initialStepId={initialStepId}
+      currentStepId={currentStepId}
+      initialData={initialWizardData}
+      onStepChange={(stepId) => onStepChange?.(stepId as GovernanceOnboardingStepId)}
+    >
+      <GovernanceOnboardingFlow
+        identityStatus={identityStatus}
+        walletAddress={walletAddress}
+        disabledHouseOptions={disabledHouseOptions}
+        initialFieldErrors={initialFieldErrors}
+        stakeAmountLabel={stakeAmountLabel}
+        transactionSteps={transactionSteps}
+        finalActions={finalActions}
+        onVerifyIdentity={onVerifyIdentity}
+        onFinalActionPress={onFinalActionPress}
+        dataTestId={dataTestId}
+      />
+    </PageWizardProvider>
+  )
+}
diff --git a/packages/governance-widget/src/governanceComponents.tsx b/packages/governance-widget/src/governanceComponents.tsx
new file mode 100644
index 0000000..ccce74e
--- /dev/null
+++ b/packages/governance-widget/src/governanceComponents.tsx
@@ -0,0 +1,606 @@
+import React from 'react'
+import Svg, { Circle, G } from 'react-native-svg'
+import { Stack, useTheme } from 'tamagui'
+import {
+  Badge,
+  BadgeText,
+  Button,
+  ButtonText,
+  Card,
+  Heading,
+  Icon,
+  Text,
+  TokenAmount,
+  XStack,
+  YStack,
+} from '@goodwidget/ui'
+import type { IconName } from '@goodwidget/ui'
+
+export interface GovernanceAmount {
+  value: string | number
+  token?: string
+  isStreaming?: boolean
+  streamLabel?: string
+}
+
+export interface ImpactCardMetric {
+  label: string
+  amount: GovernanceAmount
+  description?: string
+}
+
+export interface ImpactCardProps {
+  title: string
+  metrics: [ImpactCardMetric, ImpactCardMetric]
+  description: string
+  ctaLabel?: string
+  ctaDisabled?: boolean
+  onCtaPress?: () => void
+  testID?: string
+}
+
+export interface BalanceCardMetadata {
+  label: string
+  tone?: 'default' | 'positive' | 'muted'
+  icon?: IconName
+}
+
+export interface BalanceCardProps {
+  icon: IconName
+  title: string
+  amount: GovernanceAmount | string | number
+  amountType?: 'token' | 'raw'
+  metadata: BalanceCardMetadata
+  compact?: boolean
+  testID?: string
+}
+
+export interface RankedVotingOption {
+  id: string
+  label: string
+  percentage: number
+}
+
+export interface AlignmentVotingProposalCardProps {
+  id: string
+  categoryLabel: string
+  title: string
+  summaryLabel?: string
+  options: RankedVotingOption[]
+  maxVisibleOptions?: number
+  onPress?: (id: string) => void
+  testID?: string
+}
+
+export interface VoteSegment {
+  id: string
+  label: string
+  percentage: number
+  tone?: 'for' | 'against' | 'abstain' | 'neutral'
+}
+
+export interface VoterPreview {
+  id: string
+  label: string
+  avatarUrl?: string
+}
+
+export interface OptimisticVotingProposalCardProps {
+  id: string
+  categoryLabel: string
+  title: string
+  quorumLabel?: string
+  quorumReachedPercent: number
+  voteSegments: VoteSegment[]
+  voters: VoterPreview[]
+  remainingVoterCountLabel?: string
+  onPress?: (id: string) => void
+  testID?: string
+}
+
+export interface FundingProjectAllocation {
+  id: string
+  name: string
+  amount: GovernanceAmount
+  percentage: number
+}
+
+export interface FundingDistributionChartProps {
+  totalAmount: GovernanceAmount
+  projects: FundingProjectAllocation[]
+  isStreaming?: boolean
+  onProjectPress?: (id: string) => void
+  testID?: string
+}
+
+const SEGMENT_TONES: Record<NonNullable<VoteSegment['tone']>, string> = {
+  for: '$primary',
+  against: '$error',
+  abstain: '$placeholderColor',
+  neutral: '$success',
+}
+
+const DONUT_COLOR_KEYS = ['primary', 'success', 'warning', 'info', 'error'] as const
+
+function clampPercentage(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  return Math.max(0, Math.min(100, value))
+}
+
+function formatRawValue(value: string | number): string {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value)
+}
+
+function isGovernanceAmount(value: GovernanceAmount | string | number): value is GovernanceAmount {
+  return typeof value === 'object' && value !== null && 'value' in value
+}
+
+function resolveThemeColor(theme: ReturnType<typeof useTheme>, key: string, fallback: string): string {
+  const themeValue = theme[key as keyof typeof theme]
+
+  if (themeValue && typeof themeValue === 'object' && 'val' in themeValue) {
+    return String(themeValue.val)
+  }
+
+  return fallback
+}
+
+function renderGovernanceAmount(amount: GovernanceAmount, size: 'sm' | 'md' | 'lg' | 'xl' = 'lg') {
+  return (
+    <YStack gap="$1">
+      {amount.token ? (
+        <TokenAmount amount={amount.value} token={amount.token} size={size} />
+      ) : (
+        <Heading level={size === 'xl' ? 2 : 4}>{formatRawValue(amount.value)}</Heading>
+      )}
+      {amount.isStreaming ? (
+        <Text variant="caption" tone="secondary">
+          {amount.streamLabel ?? 'Live stream'}
+        </Text>
+      ) : null}
+    </YStack>
+  )
+}
+
+function MetricBox({ metric }: { metric: ImpactCardMetric }) {
+  return (
+    <YStack
+      flex={1}
+      minWidth={140}
+      gap="$2"
+      padding="$3"
+      borderRadius="$3"
+      backgroundColor="$backgroundHover"
+      borderWidth={1}
+      borderColor="$borderColor"
+    >
+      <Text variant="label" tone="secondary">
+        {metric.label}
+      </Text>
+      {renderGovernanceAmount(metric.amount, 'lg')}
+      {metric.description ? (
+        <Text variant="caption" tone="dim">
+          {metric.description}
+        </Text>
+      ) : null}
+    </YStack>
+  )
+}
+
+function ProposalHeader({ categoryLabel }: { categoryLabel: string }) {
+  return (
+    <XStack alignItems="center" justifyContent="space-between" gap="$3">
+      <Badge type="info">
+        <BadgeText>{categoryLabel}</BadgeText>
+      </Badge>
+      <Icon name="chevron-right" size="sm" color="muted" />
+    </XStack>
+  )
+}
+
+function ProgressBar({ percentage, colorToken = '$primary' }: { percentage: number; colorToken?: string }) {
+  return (
+    <Stack height={8} borderRadius="$full" backgroundColor="$backgroundPress" overflow="hidden">
+      <Stack width={`${clampPercentage(percentage)}%`} height="100%" backgroundColor={colorToken} />
+    </Stack>
+  )
+}
+
+function RankedOptionRow({ option }: { option: RankedVotingOption }) {
+  return (
+    <YStack gap="$2">
+      <XStack alignItems="center" justifyContent="space-between" gap="$3">
+        <Text variant="label" truncate flex={1}>
+          {option.label}
+        </Text>
+        <Text variant="label" bold noWrap>
+          {clampPercentage(option.percentage)}%
+        </Text>
+      </XStack>
+      <ProgressBar percentage={option.percentage} />
+    </YStack>
+  )
+}
+
+function StackedProgressBar({ segments }: { segments: VoteSegment[] }) {
+  return (
+    <XStack height={12} borderRadius="$full" backgroundColor="$backgroundPress" overflow="hidden">
+      {segments.map((segment) => (
+        <Stack
+          key={segment.id}
+          width={`${clampPercentage(segment.percentage)}%`}
+          height="100%"
+          backgroundColor={SEGMENT_TONES[segment.tone ?? 'neutral']}
+        />
+      ))}
+    </XStack>
+  )
+}
+
+function VoterAvatar({ voter, index }: { voter: VoterPreview; index: number }) {
+  const initial = voter.label.trim().slice(0, 1).toUpperCase() || '?'
+
+  return (
+    <Stack
+      width={32}
+      height={32}
+      marginLeft={index === 0 ? 0 : -8}
+      borderRadius="$full"
+      borderWidth={2}
+      borderColor="$background"
+      backgroundColor="$backgroundPress"
+      alignItems="center"
+      justifyContent="center"
+      overflow="hidden"
+    >
+      {voter.avatarUrl ? (
+        <img src={voter.avatarUrl} alt={voter.label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+      ) : (
+        <Text variant="caption" bold>
+          {initial}
+        </Text>
+      )}
+    </Stack>
+  )
+}
+
+function VoterPreviewGroup({ voters, remainingLabel }: { voters: VoterPreview[]; remainingLabel?: string }) {
+  return (
+    <XStack alignItems="center" gap="$2">
+      <XStack alignItems="center">
+        {voters.slice(0, 4).map((voter, index) => (
+          <VoterAvatar key={voter.id} voter={voter} index={index} />
+        ))}
+      </XStack>
+      {remainingLabel ? (
+        <Badge>
+          <BadgeText>{remainingLabel}</BadgeText>
+        </Badge>
+      ) : null}
+    </XStack>
+  )
+}
+
+function VoteLegend({ segments }: { segments: VoteSegment[] }) {
+  return (
+    <XStack flexWrap="wrap" gap="$3">
+      {segments.map((segment) => (
+        <XStack key={segment.id} alignItems="center" gap="$2">
+          <Stack
+            width={10}
+            height={10}
+            borderRadius="$full"
+            backgroundColor={SEGMENT_TONES[segment.tone ?? 'neutral']}
+          />
+          <Text variant="caption" tone="secondary">
+            {segment.label} {clampPercentage(segment.percentage)}%
+          </Text>
+        </XStack>
+      ))}
+    </XStack>
+  )
+}
+
+function fundingAmountLabel(amount: GovernanceAmount): string {
+  const base = amount.token ? `${formatRawValue(amount.value)} ${amount.token}` : formatRawValue(amount.value)
+
+  if (amount.isStreaming) {
+    return `${base} streaming`
+  }
+
+  return base
+}
+
+function FundingLegend({
+  projects,
+  colors,
+  onProjectPress,
+}: {
+  projects: FundingProjectAllocation[]
+  colors: string[]
+  onProjectPress?: (id: string) => void
+}) {
+  if (projects.length === 0) {
+    return (
+      <YStack padding="$3" borderRadius="$3" backgroundColor="$backgroundHover">
+        <Text tone="secondary">No active funding distribution yet.</Text>
+      </YStack>
+    )
+  }
+
+  return (
+    <YStack gap="$2" flex={1} minWidth={220}>
+      {projects.map((project, index) => (
+        <Button
+          key={project.id}
+          variant="list"
+          onPress={onProjectPress ? () => onProjectPress(project.id) : undefined}
+          aria-label={`Open ${project.name} allocation`}
+        >
+          <Stack width={12} height={12} borderRadius="$full" backgroundColor={colors[index]} />
+          <YStack flex={1} gap="$1">
+            <Text variant="label" truncate>
+              {project.name}
+            </Text>
+            <Text variant="caption" tone="secondary">
+              {fundingAmountLabel(project.amount)}
+            </Text>
+          </YStack>
+          <Text variant="label" bold noWrap>
+            {clampPercentage(project.percentage)}%
+          </Text>
+        </Button>
+      ))}
+    </YStack>
+  )
+}
+
+function FundingDonut({
+  projects,
+  totalAmount,
+  colors,
+  onProjectPress,
+}: {
+  projects: FundingProjectAllocation[]
+  totalAmount: GovernanceAmount
+  colors: string[]
+  onProjectPress?: (id: string) => void
+}) {
+  const size = 196
+  const strokeWidth = 22
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  let offset = 0
+
+  return (
+    <Stack width={size} height={size} alignItems="center" justifyContent="center">
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} accessibilityRole="image">
+        <G rotation="-90" origin={`${size / 2}, ${size / 2}`}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={colors[0]}
+            strokeOpacity={projects.length === 0 ? 0.18 : 0.08}
+            strokeWidth={strokeWidth}
+            fill="transparent"
+          />
+          {projects.map((project, index) => {
+            const percentage = clampPercentage(project.percentage)
+            const dashLength = (percentage / 100) * circumference
+            const dashOffset = -offset
+            offset += dashLength
+
+            return (
+              <Circle
+                key={project.id}
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                stroke={colors[index]}
+                strokeWidth={strokeWidth}
+                strokeDasharray={`${dashLength} ${circumference - dashLength}`}
+                strokeDashoffset={dashOffset}
+                strokeLinecap="round"
+                fill="transparent"
+                onPress={onProjectPress ? () => onProjectPress(project.id) : undefined}
+              />
+            )
+          })}
+        </G>
+      </Svg>
+      <YStack position="absolute" alignItems="center" justifyContent="center" gap="$1" maxWidth={128}>
+        {renderGovernanceAmount(totalAmount, 'md')}
+        <Text variant="caption" tone="secondary" center>
+          Total active funding
+        </Text>
+      </YStack>
+    </Stack>
+  )
+}
+
+export function ImpactCard({
+  title,
+  metrics,
+  description,
+  ctaLabel,
+  ctaDisabled = false,
+  onCtaPress,
+  testID,
+}: ImpactCardProps) {
+  return (
+    <Card data-testid={testID} width="100%" maxWidth={520} gap="$4">
+      <Heading level={3}>{title}</Heading>
+      <XStack flexWrap="wrap" gap="$3">
+        {metrics.map((metric) => (
+          <MetricBox key={metric.label} metric={metric} />
+        ))}
+      </XStack>
+      <Text tone="secondary">{description}</Text>
+      {ctaLabel ? (
+        <Button fullWidth disabled={ctaDisabled} onPress={onCtaPress} aria-label={ctaLabel}>
+          <ButtonText>{ctaLabel}</ButtonText>
+        </Button>
+      ) : null}
+    </Card>
+  )
+}
+
+export function BalanceCard({
+  icon,
+  title,
+  amount,
+  amountType = 'token',
+  metadata,
+  compact = false,
+  testID,
+}: BalanceCardProps) {
+  const amountValue = isGovernanceAmount(amount) ? amount : { value: amount, token: amountType === 'token' ? 'G$' : undefined }
+  const metadataTone = metadata.tone === 'positive' ? 'default' : metadata.tone === 'muted' ? 'secondary' : 'soft'
+
+  return (
+    <Card data-testid={testID} width="100%" maxWidth={compact ? 220 : 268} minHeight={compact ? 150 : 176} gap="$3">
+      <XStack alignItems="center" gap="$2">
+        <Icon name={icon} size="sm" color="primary" round />
+        <Text variant="label" truncate flex={1}>
+          {title}
+        </Text>
+      </XStack>
+      {renderGovernanceAmount(amountValue, compact ? 'md' : 'lg')}
+      <XStack alignItems="center" gap="$2" marginTop="auto">
+        {metadata.icon ? <Icon name={metadata.icon} size="xs" color={metadata.tone === 'positive' ? 'success' : 'muted'} /> : null}
+        <Text variant="caption" tone={metadataTone} truncate>
+          {metadata.label}
+        </Text>
+      </XStack>
+    </Card>
+  )
+}
+
+export function AlignmentVotingProposalCard({
+  id,
+  categoryLabel,
+  title,
+  summaryLabel = 'Current top voted',
+  options,
+  maxVisibleOptions = 3,
+  onPress,
+  testID,
+}: AlignmentVotingProposalCardProps) {
+  const visibleOptions = options.slice(0, maxVisibleOptions)
+  const hiddenCount = Math.max(0, options.length - visibleOptions.length)
+
+  return (
+    <Card
+      data-testid={testID}
+      width="100%"
+      maxWidth={480}
+      gap="$4"
+      cursor={onPress ? 'pointer' : undefined}
+      onPress={onPress ? () => onPress(id) : undefined}
+      role={onPress ? 'button' : undefined}
+      aria-label={`Open proposal ${title}`}
+    >
+      <ProposalHeader categoryLabel={categoryLabel} />
+      <Heading level={4}>{title}</Heading>
+      <XStack alignItems="center" gap="$2">
+        <Icon name="info" size="xs" color="muted" />
+        <Text variant="caption" tone="secondary">
+          {summaryLabel}
+        </Text>
+      </XStack>
+      <YStack gap="$3">
+        {visibleOptions.map((option) => (
+          <RankedOptionRow key={option.id} option={option} />
+        ))}
+        {hiddenCount > 0 ? (
+          <Text variant="caption" tone="secondary">
+            +{hiddenCount} more options
+          </Text>
+        ) : null}
+      </YStack>
+    </Card>
+  )
+}
+
+export function OptimisticVotingProposalCard({
+  id,
+  categoryLabel,
+  title,
+  quorumLabel = 'Current vote quorum',
+  quorumReachedPercent,
+  voteSegments,
+  voters,
+  remainingVoterCountLabel,
+  onPress,
+  testID,
+}: OptimisticVotingProposalCardProps) {
+  return (
+    <Card
+      data-testid={testID}
+      width="100%"
+      maxWidth={480}
+      gap="$4"
+      cursor={onPress ? 'pointer' : undefined}
+      onPress={onPress ? () => onPress(id) : undefined}
+      role={onPress ? 'button' : undefined}
+      aria-label={`Open proposal ${title}`}
+    >
+      <ProposalHeader categoryLabel={categoryLabel} />
+      <Heading level={4}>{title}</Heading>
+      <YStack gap="$2">
+        <XStack alignItems="center" justifyContent="space-between" gap="$3">
+          <Text variant="caption" tone="secondary">
+            {quorumLabel}
+          </Text>
+          <Text variant="label" bold noWrap>
+            {clampPercentage(quorumReachedPercent)}% reached
+          </Text>
+        </XStack>
+        <Stack position="relative">
+          <Stack height={12} borderRadius="$full" backgroundColor="$backgroundPress" overflow="hidden">
+            <Stack width={`${clampPercentage(quorumReachedPercent)}%`} height="100%" backgroundColor="$backgroundHover" />
+          </Stack>
+          <Stack position="absolute" left={0} right={0} top={0} bottom={0}>
+            <StackedProgressBar segments={voteSegments} />
+          </Stack>
+        </Stack>
+      </YStack>
+      <VoterPreviewGroup voters={voters} remainingLabel={remainingVoterCountLabel} />
+      <VoteLegend segments={voteSegments} />
+    </Card>
+  )
+}
+
+export function FundingDistributionChart({
+  totalAmount,
+  projects,
+  isStreaming = false,
+  onProjectPress,
+  testID,
+}: FundingDistributionChartProps) {
+  const theme = useTheme()
+  const fallbackColors = ['#2563eb', '#16a34a', '#d97706', '#0891b2', '#dc2626']
+  const colors = DONUT_COLOR_KEYS.map((key, index) => resolveThemeColor(theme, key, fallbackColors[index]))
+  const total = { ...totalAmount, isStreaming: totalAmount.isStreaming ?? isStreaming }
+
+  return (
+    <Card data-testid={testID} width="100%" maxWidth={620} gap="$4">
+      <YStack gap="$1">
+        <Heading level={3}>Funding distribution</Heading>
+        <Text tone="secondary">Current allocation across active governance projects.</Text>
+      </YStack>
+      <XStack flexWrap="wrap" justifyContent="center" alignItems="center" gap="$4">
+        <FundingDonut projects={projects} totalAmount={total} colors={colors} onProjectPress={onProjectPress} />
+        <FundingLegend projects={projects} colors={colors} onProjectPress={onProjectPress} />
+      </XStack>
+    </Card>
+  )
+}
diff --git a/packages/governance-widget/src/index.ts b/packages/governance-widget/src/index.ts
new file mode 100644
index 0000000..c09acd0
--- /dev/null
+++ b/packages/governance-widget/src/index.ts
@@ -0,0 +1,33 @@
+export { GovernanceOnboardingWidget } from './GovernanceOnboardingWidget'
+export type {
+  GovernanceHouse,
+  GovernanceIdentityStatus,
+  GovernanceOnboardingAction,
+  GovernanceOnboardingStepId,
+  GovernanceOnboardingWidgetProps,
+  GovernanceProfileDraft,
+  GovernanceProfileFieldErrors,
+  GovernanceProfileFieldKey,
+  GovernanceWizardData,
+} from './types'
+export {
+  ImpactCard,
+  BalanceCard,
+  AlignmentVotingProposalCard,
+  OptimisticVotingProposalCard,
+  FundingDistributionChart,
+} from './governanceComponents'
+export type {
+  GovernanceAmount,
+  ImpactCardMetric,
+  ImpactCardProps,
+  BalanceCardProps,
+  BalanceCardMetadata,
+  RankedVotingOption,
+  AlignmentVotingProposalCardProps,
+  VoteSegment,
+  VoterPreview,
+  OptimisticVotingProposalCardProps,
+  FundingProjectAllocation,
+  FundingDistributionChartProps,
+} from './governanceComponents'
diff --git a/packages/governance-widget/src/onboarding/GovernanceOnboardingFlow.tsx b/packages/governance-widget/src/onboarding/GovernanceOnboardingFlow.tsx
new file mode 100644
index 0000000..a33bc66
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/GovernanceOnboardingFlow.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from 'react'
+import { Button, ButtonText, PageWizardShell, XStack, usePageWizard } from '@goodwidget/ui'
+import { HOUSE_COPY } from './copy'
+import { DEFAULT_TRANSACTION_STEPS, DEFAULT_FINAL_ACTIONS } from './constants'
+import { isProfileDraftComplete, validateProfileDraft } from './validation'
+import { WelcomeStepContent } from './steps/WelcomeStepContent'
+import { HouseStepContent } from './steps/HouseStepContent'
+import { ProfileStepContent } from './steps/ProfileStepContent'
+import { StakeStepContent } from './steps/StakeStepContent'
+import { SuccessStepContent } from './steps/SuccessStepContent'
+import type {
+  GovernanceHouse,
+  GovernanceIdentityStatus,
+  GovernanceOnboardingAction,
+  GovernanceOnboardingStepId,
+  GovernanceProfileFieldErrors,
+  GovernanceProfileFieldKey,
+  GovernanceWizardData,
+} from '../types'
+import type { StepperStepItem } from '@goodwidget/ui'
+
+interface GovernanceOnboardingFlowProps {
+  identityStatus: GovernanceIdentityStatus
+  walletAddress?: string
+  disabledHouseOptions: GovernanceHouse[]
+  initialFieldErrors: GovernanceProfileFieldErrors
+  stakeAmountLabel: string
+  transactionSteps: StepperStepItem[]
+  finalActions: GovernanceOnboardingAction[]
+  onVerifyIdentity?: () => void
+  onFinalActionPress?: (actionId: string) => void
+  dataTestId?: string
+}
+
+export function GovernanceOnboardingFlow({
+  identityStatus,
+  walletAddress,
+  disabledHouseOptions,
+  initialFieldErrors,
+  stakeAmountLabel,
+  transactionSteps = DEFAULT_TRANSACTION_STEPS,
+  finalActions = DEFAULT_FINAL_ACTIONS,
+  onVerifyIdentity,
+  onFinalActionPress,
+  dataTestId,
+}: GovernanceOnboardingFlowProps) {
+  const { currentStep, data, setData, next, back, isFirst } = usePageWizard()
+  const [fieldErrors, setFieldErrors] = useState<GovernanceProfileFieldErrors>(initialFieldErrors)
+
+  const wizardData = data as GovernanceWizardData
+  const selectedHouse = wizardData.selectedHouse
+  const profileDraft = wizardData.profileDraft ?? {}
+  const resolvedHouse: GovernanceHouse = selectedHouse ?? 'citizenship'
+  const isIdentityVerified = identityStatus === 'verified'
+
+  const updateProfileField = (fieldKey: GovernanceProfileFieldKey, nextValue: string) => {
+    setData((previousData) => {
+      const previousDraft =
+        (previousData as GovernanceWizardData).profileDraft ?? {}
+      return {
+        profileDraft: {
+          ...previousDraft,
+          [fieldKey]: nextValue,
+        },
+      }
+    })
+
+    setFieldErrors((previousErrors) => {
+      const nextErrors = { ...previousErrors }
+      delete nextErrors[fieldKey]
+      return nextErrors
+    })
+  }
+
+  const handleProfileContinue = () => {
+    const nextFieldErrors = validateProfileDraft(resolvedHouse, profileDraft)
+    setFieldErrors(nextFieldErrors)
+
+    if (Object.keys(nextFieldErrors).length === 0) {
+      next()
+    }
+  }
+
+  const handleHouseSelect = (nextHouse: GovernanceHouse) => {
+    setData({ selectedHouse: nextHouse })
+  }
+
+  let shellTitle = 'Governance onboarding'
+  let shellDescription = ''
+  let shellContent: React.ReactNode = null
+  let shellFooter: React.ReactNode = null
+  let hideStepper = false
+
+  switch (currentStep?.id as GovernanceOnboardingStepId | undefined) {
+    case 'welcome':
+    default:
+      shellTitle = 'Welcome'
+      shellDescription =
+        'Before entering governance, we must verify your unique identity status on the GoodDollar Protocol.'
+      shellContent = (
+        <WelcomeStepContent
+          identityStatus={identityStatus}
+          walletAddress={walletAddress}
+          isIdentityVerified={isIdentityVerified}
+          onVerifyPress={onVerifyIdentity}
+          // CTA button lives inside the card — no shell footer button needed
+          onProceedPress={next}
+        />
+      )
+      // Footer is null — "Proceed to Membership" is inside OnboardingIdentityCard
+      shellFooter = null
+      break
+
+    case 'house':
+      shellTitle = 'Choose your house'
+      shellDescription =
+        'Where will your impact be felt? Choose the path that best fits your contribution.'
+      shellContent = (
+        <HouseStepContent
+          selectedHouse={selectedHouse}
+          disabledHouseOptions={disabledHouseOptions}
+          stakeAmountLabel={stakeAmountLabel}
+          onHouseSelect={handleHouseSelect}
+        />
+      )
+      shellFooter = (
+        <XStack gap="$3" justifyContent="space-between" flexWrap="wrap">
+          <Button variant="secondary" onPress={back} disabled={isFirst}>
+            <ButtonText>Back</ButtonText>
+          </Button>
+          <Button disabled={!selectedHouse} onPress={next}>
+            <ButtonText>Continue to profile</ButtonText>
+          </Button>
+        </XStack>
+      )
+      break
+
+    case 'profile':
+      shellTitle = `Apply for ${HOUSE_COPY[resolvedHouse].title}`
+      shellDescription =
+        'Finalize your application by providing your details and staking the required amount.'
+      shellContent = (
+        <ProfileStepContent
+          selectedHouse={resolvedHouse}
+          profileDraft={profileDraft}
+          fieldErrors={fieldErrors}
+          stakeAmountLabel={stakeAmountLabel}
+          onProfileFieldChange={updateProfileField}
+          // CTA button lives inside the card — no shell footer button needed
+          onContinuePress={handleProfileContinue}
+        />
+      )
+      // Footer is null — "Create Profile and Stake" is inside ProfileStepContent card
+      shellFooter = null
+      break
+
+    case 'stake':
+      shellTitle = 'Creating profile & staking'
+      shellDescription =
+        'Please wait while your transaction is confirmed on-chain. You can review each step below.'
+      shellContent = (
+        <StakeStepContent stakeAmountLabel={stakeAmountLabel} transactionSteps={transactionSteps} />
+      )
+      shellFooter = (
+        <XStack gap="$3" justifyContent="space-between" flexWrap="wrap">
+          <Button variant="secondary" onPress={back}>
+            <ButtonText>Back</ButtonText>
+          </Button>
+          <Button onPress={next}>
+            <ButtonText>Continue to success</ButtonText>
+          </Button>
+        </XStack>
+      )
+      break
+
+    case 'success':
+      hideStepper = true
+      shellContent = (
+        <SuccessStepContent
+          finalActions={finalActions}
+          stakeAmountLabel={stakeAmountLabel}
+          onFinalActionPress={onFinalActionPress}
+        />
+      )
+      shellFooter = null
+      break
+  }
+
+  return (
+    <PageWizardShell
+      title={shellTitle}
+      description={shellDescription}
+      footer={shellFooter}
+      dataTestId={dataTestId}
+      showStepper={!hideStepper}
+    >
+      {shellContent}
+    </PageWizardShell>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/HouseSelectionCard.tsx b/packages/governance-widget/src/onboarding/HouseSelectionCard.tsx
new file mode 100644
index 0000000..5b0414f
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/HouseSelectionCard.tsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import { Stack, styled } from 'tamagui'
+import { Badge, BadgeText, Heading, Icon, PillText, Text, XStack, YStack } from '@goodwidget/ui'
+import { HOUSE_COPY } from './copy'
+import type { GovernanceHouse } from '../types'
+
+/**
+ * Internal house-selection button. Uses Tamagui's `styled()` directly (not
+ * `createComponent`) because this is governance-specific UI, not a reusable
+ * design-system primitive. Registering a `name` here would pollute the public
+ * `@goodwidget/ui` manifest namespace with widget-internal components.
+ */
+const HouseOptionButton = styled(Stack, {
+  tag: 'button',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  width: '100%',
+  borderRadius: '$4',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  backgroundColor: '$background',
+  padding: '$4',
+  gap: '$3',
+  cursor: 'pointer',
+  hoverStyle: {
+    borderColor: '$borderColorFocus',
+    backgroundColor: '$backgroundHover',
+  },
+  pressStyle: {
+    borderColor: '$borderColorFocus',
+    backgroundColor: '$backgroundPress',
+  },
+  variants: {
+    selected: {
+      true: {
+        borderColor: '$borderColorFocus',
+        backgroundColor: '$backgroundHover',
+      },
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+      },
+    },
+  } as const,
+})
+
+const RadioBullet = styled(Stack, {
+  width: 24,
+  height: 24,
+  borderRadius: '$full',
+  borderWidth: 2,
+  borderColor: '$borderColor',
+  backgroundColor: '$background',
+  alignItems: 'center',
+  justifyContent: 'center',
+  variants: {
+    selected: {
+      true: {
+        borderColor: '$primary',
+      },
+    },
+  } as const,
+})
+
+const RadioDot = styled(Stack, {
+  width: 10,
+  height: 10,
+  borderRadius: '$full',
+  backgroundColor: '$primary',
+  variants: {
+    selected: {
+      false: {
+        backgroundColor: 'transparent',
+      },
+    },
+  } as const,
+})
+
+const HousePill = styled(Stack, {
+  borderRadius: '$full',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  backgroundColor: '$surface',
+  paddingHorizontal: '$3',
+  paddingVertical: '$1',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+interface HouseSelectionCardProps {
+  house: GovernanceHouse
+  isSelected: boolean
+  isDisabled: boolean
+  stakeAmountLabel: string
+  onPress: () => void
+}
+
+export function HouseSelectionCard({
+  house,
+  isSelected,
+  isDisabled,
+  stakeAmountLabel,
+  onPress,
+}: HouseSelectionCardProps) {
+  const houseCopy = HOUSE_COPY[house]
+
+  return (
+    <HouseOptionButton
+      selected={isSelected}
+      disabled={isDisabled}
+      role="radio"
+      aria-checked={isSelected}
+      onPress={onPress}
+      data-testid={`GovernanceOnboardingWidget-house-${house}`}
+    >
+      <XStack alignItems="center" gap="$3" width="100%">
+        <RadioBullet selected={isSelected}>
+          <RadioDot selected={isSelected} />
+        </RadioBullet>
+        <YStack flex={1} gap="$1">
+          <Heading level={5}>{houseCopy.title}</Heading>
+          <Text tone="secondary">{houseCopy.summary}</Text>
+        </YStack>
+      </XStack>
+
+      <XStack gap="$2" flexWrap="wrap" alignItems="center">
+        <HousePill>
+          <PillText>{houseCopy.label}</PillText>
+        </HousePill>
+        <HousePill>
+          <PillText>{`${stakeAmountLabel} stake`}</PillText>
+        </HousePill>
+        {isSelected ? (
+          <Badge type="success">
+            <BadgeText>Selected</BadgeText>
+          </Badge>
+        ) : null}
+      </XStack>
+
+      <XStack alignItems="center" gap="$2" alignSelf="flex-end">
+        <Text color="$primary" fontWeight="700">
+          Continue with this house
+        </Text>
+        <Icon name="arrow-right" size="sm" color="primary" />
+      </XStack>
+    </HouseOptionButton>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/MembershipStakeBanner.tsx b/packages/governance-widget/src/onboarding/MembershipStakeBanner.tsx
new file mode 100644
index 0000000..68970d7
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/MembershipStakeBanner.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { Badge, BadgeText, Card, Icon, Text, XStack, YStack } from '@goodwidget/ui'
+
+interface MembershipStakeBannerProps {
+  stakeAmountLabel: string
+  warningMessage: string
+}
+
+/**
+ * Staking banner shown above the profile form. Highlights the required stake
+ * amount and a wallet-funds warning so members can confirm they are funded
+ * before submitting the governance application.
+ */
+export function MembershipStakeBanner({ stakeAmountLabel, warningMessage }: MembershipStakeBannerProps) {
+  return (
+    <Card elevated backgroundColor="$governanceSurfaceAlt" borderColor="$governancePrimary">
+      <YStack gap="$3">
+        <XStack alignItems="center" gap="$3">
+          <XStack
+            width={48}
+            height={48}
+            borderRadius="$full"
+            alignItems="center"
+            justifyContent="center"
+            backgroundColor="$governancePrimary"
+          >
+            <Icon name="info" color="white" />
+          </XStack>
+          <YStack gap="$1">
+            <Text variant="caption" tone="secondary">
+              Membership Stake
+            </Text>
+            <Text fontWeight="700" fontSize="$7" lineHeight="$7" color="$color">
+              {stakeAmountLabel}
+            </Text>
+          </YStack>
+        </XStack>
+
+        <XStack
+          alignItems="flex-start"
+          gap="$3"
+          padding="$3"
+          borderRadius="$3"
+          backgroundColor="$governanceErrorMuted"
+          borderWidth={1}
+          borderColor="$governanceError"
+        >
+          <Icon name="alert-triangle" color="error" />
+          <YStack flex={1} gap="$2">
+            <Badge type="error">
+              <BadgeText>Wallet funding required</BadgeText>
+            </Badge>
+            <Text variant="caption">{warningMessage}</Text>
+          </YStack>
+        </XStack>
+      </YStack>
+    </Card>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/OnboardingIdentityCard.tsx b/packages/governance-widget/src/onboarding/OnboardingIdentityCard.tsx
new file mode 100644
index 0000000..3d3e926
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/OnboardingIdentityCard.tsx
@@ -0,0 +1,152 @@
+import React from 'react'
+import { Stack, styled } from 'tamagui'
+import { AddressDisplay, Button, ButtonText, Card, Icon, Text, XStack, YStack } from '@goodwidget/ui'
+import type { GovernanceIdentityStatus } from '../types'
+
+interface OnboardingIdentityCardProps {
+  identityStatus: GovernanceIdentityStatus
+  walletAddress?: string
+  onVerifyPress?: () => void
+  onProceedPress?: () => void
+}
+
+/** Left-border accent row used for the Identity Status field when verified. */
+const AccentRow = styled(XStack, {
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingVertical: '$3',
+  paddingHorizontal: '$3',
+  borderRadius: '$2',
+  backgroundColor: '$backgroundHover',
+  borderLeftWidth: 3,
+  variants: {
+    verified: {
+      true: { borderLeftColor: '$success' },
+      false: { borderLeftColor: '$warning' },
+    },
+  } as const,
+})
+
+/** Plain field row without a left accent (e.g. Wallet Address). */
+const FieldRow = styled(XStack, {
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingVertical: '$3',
+  paddingHorizontal: '$3',
+  borderRadius: '$2',
+  backgroundColor: '$backgroundHover',
+})
+
+export function OnboardingIdentityCard({
+  identityStatus,
+  walletAddress,
+  onVerifyPress,
+  onProceedPress,
+}: OnboardingIdentityCardProps) {
+  const isVerified = identityStatus === 'verified'
+
+  return (
+    <Card elevated>
+      <YStack gap="$4" alignItems="stretch">
+        {/* ── Centered icon ─────────────────────────────────────── */}
+        <YStack alignItems="center" paddingTop="$2">
+          <YStack
+            width={72}
+            height={72}
+            borderRadius="$full"
+            alignItems="center"
+            justifyContent="center"
+            backgroundColor="$infoMuted"
+          >
+            <Icon
+              name="shield-check"
+              size="lg"
+              color={isVerified ? 'success' : 'primary'}
+            />
+          </YStack>
+        </YStack>
+
+        {/* ── Field rows ────────────────────────────────────────── */}
+        <YStack gap="$2">
+          {/* Wallet Address row */}
+          <FieldRow>
+            <Text variant="label" tone="secondary">
+              Wallet Address
+            </Text>
+            {walletAddress ? (
+              <AddressDisplay address={walletAddress} size="sm" />
+            ) : (
+              <Text tone="secondary" fontWeight="600">
+                Not connected
+              </Text>
+            )}
+          </FieldRow>
+
+          {/* Identity Status row — green left accent when verified */}
+          <AccentRow verified={isVerified}>
+            <YStack gap="$0.5">
+              <Text variant="label" tone="secondary">
+                Identity Status
+              </Text>
+              <Text
+                fontWeight="700"
+                color={isVerified ? '$success' : '$warning'}
+              >
+                {isVerified ? 'Verified' : 'Verification required'}
+              </Text>
+            </YStack>
+            {isVerified ? (
+              <Stack
+                width={28}
+                height={28}
+                borderRadius="$full"
+                borderWidth={2}
+                borderColor="$success"
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Icon name="check" size="xs" color="success" />
+              </Stack>
+            ) : (
+              <Stack
+                width={28}
+                height={28}
+                borderRadius="$full"
+                borderWidth={2}
+                borderColor="$warning"
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Icon name="alert-triangle" size="xs" color="warning" />
+              </Stack>
+            )}
+          </AccentRow>
+        </YStack>
+
+        {/* ── CTA buttons ───────────────────────────────────────── */}
+        <YStack gap="$2">
+          {!isVerified && (
+            <Button
+              fullWidth
+              onPress={onVerifyPress}
+              aria-label="Verify identity"
+              data-testid="GovernanceOnboardingWidget-verify-btn"
+            >
+              <ButtonText>Verify Identity</ButtonText>
+            </Button>
+          )}
+          <Button
+            fullWidth
+            disabled={!isVerified}
+            onPress={onProceedPress}
+            variant={isVerified ? 'primary' : 'secondary'}
+            aria-label="Proceed to Membership"
+            data-testid="GovernanceOnboardingWidget-proceed-btn"
+          >
+            <ButtonText>Proceed to Membership</ButtonText>
+          </Button>
+        </YStack>
+      </YStack>
+    </Card>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/OnboardingNotice.tsx b/packages/governance-widget/src/onboarding/OnboardingNotice.tsx
new file mode 100644
index 0000000..1dc5275
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/OnboardingNotice.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { Badge, BadgeText, Card, Heading, Icon, Text, XStack, YStack } from '@goodwidget/ui'
+
+export type OnboardingNoticeBadgeType = 'info' | 'warning' | 'success'
+export type OnboardingNoticeIconName = 'info' | 'check' | 'alert-triangle'
+
+interface OnboardingNoticeProps {
+  badgeLabel: string
+  badgeType: OnboardingNoticeBadgeType
+  title: string
+  description: string
+  iconName: OnboardingNoticeIconName
+}
+
+export function OnboardingNotice({
+  badgeLabel,
+  badgeType,
+  title,
+  description,
+  iconName,
+}: OnboardingNoticeProps) {
+  return (
+    <Card outlined>
+      <XStack alignItems="flex-start" gap="$3">
+        <YStack
+          width={44}
+          height={44}
+          borderRadius="$full"
+          alignItems="center"
+          justifyContent="center"
+          backgroundColor={
+            badgeType === 'success'
+              ? '$successMuted'
+              : badgeType === 'warning'
+                ? '$warningMuted'
+                : '$infoMuted'
+          }
+        >
+          <Icon
+            name={iconName}
+            color={badgeType === 'warning' ? 'error' : badgeType === 'success' ? 'success' : 'primary'}
+          />
+        </YStack>
+        <YStack flex={1} gap="$2">
+          <Badge type={badgeType}>
+            <BadgeText>{badgeLabel}</BadgeText>
+          </Badge>
+          <YStack gap="$1">
+            <Heading level={5}>{title}</Heading>
+            <Text tone="secondary">{description}</Text>
+          </YStack>
+        </YStack>
+      </XStack>
+    </Card>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/ProfileField.tsx b/packages/governance-widget/src/onboarding/ProfileField.tsx
new file mode 100644
index 0000000..8131b2c
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/ProfileField.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { InputError, InputFrame, InputLabel, Text, YStack } from '@goodwidget/ui'
+
+interface ProfileFieldProps {
+  label: string
+  placeholder: string
+  value?: string
+  helperText?: string
+  errorMessage?: string
+  onChangeText: (nextValue: string) => void
+}
+
+export function ProfileField({
+  label,
+  placeholder,
+  value,
+  helperText,
+  errorMessage,
+  onChangeText,
+}: ProfileFieldProps) {
+  return (
+    <YStack gap="$1">
+      <InputLabel>{label}</InputLabel>
+      <InputFrame
+        placeholder={placeholder}
+        value={value ?? ''}
+        error={Boolean(errorMessage)}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          onChangeText(event.currentTarget.value)
+        }}
+      />
+      {errorMessage ? <InputError>{errorMessage}</InputError> : null}
+      {helperText ? <Text variant="caption">{helperText}</Text> : null}
+    </YStack>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/ProfileTextAreaField.tsx b/packages/governance-widget/src/onboarding/ProfileTextAreaField.tsx
new file mode 100644
index 0000000..5a7a1f4
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/ProfileTextAreaField.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { TextArea } from 'tamagui'
+import { InputError, InputLabel, Text, YStack } from '@goodwidget/ui'
+
+interface ProfileTextAreaFieldProps {
+  label: string
+  placeholder: string
+  value?: string
+  helperText?: string
+  errorMessage?: string
+  onChangeText: (nextValue: string) => void
+}
+
+export function ProfileTextAreaField({
+  label,
+  placeholder,
+  value,
+  helperText,
+  errorMessage,
+  onChangeText,
+}: ProfileTextAreaFieldProps) {
+  return (
+    <YStack gap="$1">
+      <InputLabel>{label}</InputLabel>
+      <TextArea
+        value={value ?? ''}
+        placeholder={placeholder}
+        numberOfLines={4}
+        minHeight={112}
+        borderRadius="$2"
+        borderWidth={1}
+        borderColor={errorMessage ? '$error' : '$borderColor'}
+        paddingHorizontal="$3"
+        paddingVertical="$3"
+        backgroundColor="$background"
+        color="$color"
+        fontFamily="$body"
+        fontSize="$3"
+        lineHeight="$4"
+        outlineWidth={0}
+        hoverStyle={{
+          borderColor: errorMessage ? '$error' : '$borderColorHover',
+        }}
+        focusStyle={{
+          borderColor: errorMessage ? '$error' : '$borderColorFocus',
+          shadowColor: '$shadowColorFocus',
+          shadowRadius: 4,
+          shadowOpacity: 1,
+        }}
+        onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+          onChangeText(event.currentTarget.value)
+        }}
+      />
+      {helperText ? <Text variant="caption">{helperText}</Text> : null}
+      {errorMessage ? <InputError>{errorMessage}</InputError> : null}
+    </YStack>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/constants.ts b/packages/governance-widget/src/onboarding/constants.ts
new file mode 100644
index 0000000..f0b770a
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/constants.ts
@@ -0,0 +1,46 @@
+import type { PageWizardStep, StepperStepItem } from '@goodwidget/ui'
+import type { GovernanceHouse, GovernanceProfileFieldKey } from '../types'
+import type { GovernanceOnboardingAction } from '../types'
+
+export const ONBOARDING_STEPS: PageWizardStep[] = [
+  { id: 'welcome', title: 'Verify' },
+  { id: 'house', title: 'Path' },
+  { id: 'profile', title: 'Profile' },
+  { id: 'stake', title: 'Transact' },
+  { id: 'success', title: 'Complete' },
+]
+
+export const REQUIRED_PROFILE_FIELDS: Record<GovernanceHouse, GovernanceProfileFieldKey[]> = {
+  citizenship: ['name', 'socialLinks'],
+  alignment: ['name', 'projectWebpage', 'missionStatement', 'distributionStrategy'],
+}
+
+export const DEFAULT_TRANSACTION_STEPS: StepperStepItem[] = [
+  {
+    id: 'prepare',
+    title: 'Prepare wallet balance',
+    description: 'Keep the required G$ amount available before the staking transaction starts.',
+    status: 'completed',
+  },
+  {
+    id: 'approve',
+    title: 'Approve governance stake',
+    description: 'Waiting for the wallet confirmation that authorizes the G$ stake amount.',
+    status: 'active',
+  },
+  {
+    id: 'stake',
+    title: 'Lock the membership stake',
+    status: 'pending',
+  },
+  {
+    id: 'finalize',
+    title: 'Finalize governance access',
+    status: 'pending',
+  },
+]
+
+export const DEFAULT_FINAL_ACTIONS: GovernanceOnboardingAction[] = [
+  { id: 'proposals', label: 'Explore Governance Proposals', variant: 'secondary' },
+  { id: 'profile', label: 'Go to my profile', variant: 'primary' },
+]
diff --git a/packages/governance-widget/src/onboarding/copy.ts b/packages/governance-widget/src/onboarding/copy.ts
new file mode 100644
index 0000000..b23e6ab
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/copy.ts
@@ -0,0 +1,31 @@
+import type { GovernanceHouse } from '../types'
+
+export interface HouseCopy {
+  title: string
+  summary: string
+  helper: string
+  label: string
+  defaultStakeAmount: string
+}
+
+export const HOUSE_COPY: Record<GovernanceHouse, HouseCopy> = {
+  citizenship: {
+    title: 'House of Citizenship',
+    summary: 'Represent verified community members and highlight your public governance identity.',
+    helper: 'Collect the profile details that describe the member behind the wallet.',
+    label: 'Membership house',
+    defaultStakeAmount: '100 G$',
+  },
+  alignment: {
+    title: 'House of Alignment',
+    summary: 'Coordinate aligned projects and explain how your mission creates value for the network.',
+    helper: 'Collect project-facing metadata that can later map to the onchain registration shape.',
+    label: 'Project house',
+    defaultStakeAmount: '250 G$',
+  },
+}
+
+export function resolveHouseStakeAmount(house: GovernanceHouse, defaultLabel?: string): string {
+  return defaultLabel ?? HOUSE_COPY[house].defaultStakeAmount
+}
+
diff --git a/packages/governance-widget/src/onboarding/resolveStakeSummary.ts b/packages/governance-widget/src/onboarding/resolveStakeSummary.ts
new file mode 100644
index 0000000..dc02504
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/resolveStakeSummary.ts
@@ -0,0 +1,52 @@
+import type { StepperStepItem } from '@goodwidget/ui'
+
+export interface StakeSummary {
+  title: string
+  badgeType: 'info' | 'warning' | 'success'
+  description: string
+}
+
+export function resolveStakeSummary(transactionSteps: StepperStepItem[]): StakeSummary {
+  const failedStep = transactionSteps.find(
+    (step) => step.status === 'failed' || step.status === 'attention',
+  )
+  if (failedStep) {
+    return {
+      title: 'Action required',
+      badgeType: 'warning',
+      description:
+        failedStep.description ??
+        'A stake transaction needs attention before governance onboarding can finish.',
+    }
+  }
+
+  const activeStep = transactionSteps.find((step) => step.status === 'active')
+  if (activeStep) {
+    return {
+      title: 'Transaction in progress',
+      badgeType: 'info',
+      description:
+        activeStep.description ??
+        'The next governance transaction is currently waiting for confirmation.',
+    }
+  }
+
+  const allCompleted =
+    transactionSteps.length > 0 &&
+    transactionSteps.every((step) => step.status === 'completed')
+  if (allCompleted) {
+    return {
+      title: 'Stake confirmed',
+      badgeType: 'success',
+      description:
+        'All presentational transaction states are completed and the member can move to the final success state.',
+    }
+  }
+
+  return {
+    title: 'Stake not yet started',
+    badgeType: 'info',
+    description:
+      'The membership stake has not been submitted yet. Continue from the profile step to begin the transaction flow.',
+  }
+}
diff --git a/packages/governance-widget/src/onboarding/steps/HouseStepContent.tsx b/packages/governance-widget/src/onboarding/steps/HouseStepContent.tsx
new file mode 100644
index 0000000..6c616f5
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/steps/HouseStepContent.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { Card, Heading, Text, YStack } from '@goodwidget/ui'
+import { HouseSelectionCard } from '../HouseSelectionCard'
+import type { GovernanceHouse } from '../../types'
+
+interface HouseStepContentProps {
+  selectedHouse?: GovernanceHouse
+  disabledHouseOptions: GovernanceHouse[]
+  stakeAmountLabel: string
+  onHouseSelect: (nextHouse: GovernanceHouse) => void
+}
+
+export function HouseStepContent({
+  selectedHouse,
+  disabledHouseOptions,
+  stakeAmountLabel,
+  onHouseSelect,
+}: HouseStepContentProps) {
+  return (
+    <YStack gap="$3">
+      <Card elevated>
+        <YStack gap="$3" role="radiogroup" aria-label="Select your governance house">
+          <YStack gap="$1">
+            <Heading level={5}>Pick a governance house</Heading>
+            <Text tone="secondary">
+              Each house holds a different profile and stake amount. Tap a card to select it, then continue
+              from the footer.
+            </Text>
+          </YStack>
+          <YStack gap="$3">
+            <HouseSelectionCard
+              house="citizenship"
+              isSelected={selectedHouse === 'citizenship'}
+              isDisabled={disabledHouseOptions.includes('citizenship')}
+              stakeAmountLabel={stakeAmountLabel}
+              onPress={() => onHouseSelect('citizenship')}
+            />
+            <HouseSelectionCard
+              house="alignment"
+              isSelected={selectedHouse === 'alignment'}
+              isDisabled={disabledHouseOptions.includes('alignment')}
+              stakeAmountLabel={stakeAmountLabel}
+              onPress={() => onHouseSelect('alignment')}
+            />
+          </YStack>
+        </YStack>
+      </Card>
+    </YStack>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/steps/ProfileStepContent.tsx b/packages/governance-widget/src/onboarding/steps/ProfileStepContent.tsx
new file mode 100644
index 0000000..62118fe
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/steps/ProfileStepContent.tsx
@@ -0,0 +1,195 @@
+import React from 'react'
+import { Stack, XStack, YStack } from 'tamagui'
+import { Badge, BadgeText, Button, ButtonText, Card, Icon, Text } from '@goodwidget/ui'
+import { InputError, InputFrame, InputLabel } from '@goodwidget/ui'
+import { ProfileTextAreaField } from '../ProfileTextAreaField'
+import { isProfileDraftComplete } from '../validation'
+import type {
+  GovernanceHouse,
+  GovernanceProfileDraft,
+  GovernanceProfileFieldErrors,
+  GovernanceProfileFieldKey,
+} from '../../types'
+
+interface ProfileStepContentProps {
+  selectedHouse: GovernanceHouse
+  profileDraft: GovernanceProfileDraft
+  fieldErrors: GovernanceProfileFieldErrors
+  stakeAmountLabel: string
+  onProfileFieldChange: (fieldKey: GovernanceProfileFieldKey, nextValue: string) => void
+  onContinuePress: () => void
+}
+
+const STAKE_WARNING =
+  'Please ensure you have the required G$ in your wallet. Staked tokens are locked for the duration of active governance cycles.'
+
+// ── Inline profile field (avoids extra import of ProfileField) ───────────────
+function FormField({
+  label,
+  placeholder,
+  value,
+  errorMessage,
+  onChangeText,
+}: {
+  label: string
+  placeholder: string
+  value?: string
+  errorMessage?: string
+  onChangeText: (v: string) => void
+}) {
+  return (
+    <YStack gap="$1">
+      <InputLabel>{label}</InputLabel>
+      <InputFrame
+        placeholder={placeholder}
+        value={value ?? ''}
+        error={Boolean(errorMessage)}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          onChangeText(event.currentTarget.value)
+        }}
+      />
+      {errorMessage ? <InputError>{errorMessage}</InputError> : null}
+    </YStack>
+  )
+}
+
+export function ProfileStepContent({
+  selectedHouse,
+  profileDraft,
+  fieldErrors,
+  stakeAmountLabel,
+  onProfileFieldChange,
+  onContinuePress,
+}: ProfileStepContentProps) {
+  const isReadyToContinue = isProfileDraftComplete(selectedHouse, profileDraft, fieldErrors)
+  const isPristine = Object.values(profileDraft).every((fieldValue) => !fieldValue)
+  const hasErrors = Object.keys(fieldErrors).length > 0
+  const statusBadgeLabel = isReadyToContinue
+    ? 'Ready to continue'
+    : hasErrors
+      ? 'Validation needed'
+      : isPristine
+        ? 'Profile empty'
+        : 'Editing profile'
+
+  return (
+    <YStack gap="$3">
+      <Card elevated>
+        <YStack gap="$4">
+          {/* ── Membership Stake banner (Figma: inline inside card) ──────── */}
+          <YStack
+            borderRadius="$3"
+            borderWidth={1}
+            borderColor="$governancePrimary"
+            backgroundColor="$governanceSurfaceAlt"
+            padding="$3"
+            gap="$3"
+          >
+            {/* Amount row */}
+            <XStack alignItems="center" gap="$3">
+              <XStack
+                width={36}
+                height={36}
+                borderRadius="$full"
+                alignItems="center"
+                justifyContent="center"
+                backgroundColor="$governancePrimary"
+              >
+                <Icon name="shield-check" size="sm" color="white" />
+              </XStack>
+              <YStack gap="$0.5">
+                <Text variant="caption" tone="secondary">
+                  Membership Stake
+                </Text>
+                <Text fontWeight="700" fontSize="$6" lineHeight="$6" color="$color">
+                  {stakeAmountLabel}
+                </Text>
+              </YStack>
+            </XStack>
+
+            {/* Warning row */}
+            <XStack
+              alignItems="flex-start"
+              gap="$3"
+              padding="$3"
+              borderRadius="$2"
+              backgroundColor="$governanceErrorMuted"
+              borderWidth={1}
+              borderColor="$governanceError"
+            >
+              <Icon name="alert-triangle" color="error" size="sm" />
+              <Text variant="caption" flex={1}>
+                {STAKE_WARNING}
+              </Text>
+            </XStack>
+          </YStack>
+
+          {/* ── Header details row with Status Badge ────────────────────── */}
+          <XStack justifyContent="space-between" alignItems="center" flexWrap="wrap" gap="$2">
+            <Text variant="caption" tone="secondary">
+              Profile details
+            </Text>
+            <Badge type={isReadyToContinue ? 'success' : hasErrors ? 'warning' : 'info'}>
+              <BadgeText>{statusBadgeLabel}</BadgeText>
+            </Badge>
+          </XStack>
+
+          {/* ── Profile fields ──────────────────────────────────────────── */}
+          <YStack gap="$3">
+            <FormField
+              label="Official Name"
+              placeholder="John Doe or Organization"
+              value={profileDraft.name}
+              errorMessage={fieldErrors.name}
+              onChangeText={(v) => onProfileFieldChange('name', v)}
+            />
+
+            {selectedHouse === 'citizenship' ? (
+              <FormField
+                label="Social Profile Link"
+                placeholder="https://twitter.com/username"
+                value={profileDraft.socialLinks}
+                errorMessage={fieldErrors.socialLinks}
+                onChangeText={(v) => onProfileFieldChange('socialLinks', v)}
+              />
+            ) : (
+              <>
+                <FormField
+                  label="External Link"
+                  placeholder="https://..."
+                  value={profileDraft.projectWebpage}
+                  errorMessage={fieldErrors.projectWebpage}
+                  onChangeText={(v) => onProfileFieldChange('projectWebpage', v)}
+                />
+                <ProfileTextAreaField
+                  label="Mission Statement"
+                  placeholder="What is the primary goal of your alignment?"
+                  value={profileDraft.missionStatement}
+                  errorMessage={fieldErrors.missionStatement}
+                  onChangeText={(v) => onProfileFieldChange('missionStatement', v)}
+                />
+                <ProfileTextAreaField
+                  label="Redistribution Strategy"
+                  placeholder="How do you plan to allocate resources?"
+                  value={profileDraft.distributionStrategy}
+                  errorMessage={fieldErrors.distributionStrategy}
+                  onChangeText={(v) => onProfileFieldChange('distributionStrategy', v)}
+                />
+              </>
+            )}
+          </YStack>
+
+          {/* ── CTA button (Figma: inside card at bottom) ───────────────── */}
+          <Button
+            fullWidth
+            onPress={onContinuePress}
+            aria-label="Create Profile and Stake"
+            data-testid="GovernanceOnboardingWidget-profile-cta"
+          >
+            <ButtonText>Create Profile and Stake</ButtonText>
+          </Button>
+        </YStack>
+      </Card>
+    </YStack>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/steps/StakeStepContent.tsx b/packages/governance-widget/src/onboarding/steps/StakeStepContent.tsx
new file mode 100644
index 0000000..603d5f9
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/steps/StakeStepContent.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { Badge, BadgeText, Card, Heading, Stepper, Text, XStack, YStack } from '@goodwidget/ui'
+import { resolveStakeSummary } from '../resolveStakeSummary'
+import type { StepperStepItem } from '@goodwidget/ui'
+
+interface StakeStepContentProps {
+  stakeAmountLabel: string
+  transactionSteps: StepperStepItem[]
+}
+
+function resolveProgress(steps: StepperStepItem[]): { completed: number; total: number; percent: number } {
+  const total = steps.length
+  const completed = steps.filter((step) => step.status === 'completed').length
+  const percent = total === 0 ? 0 : Math.round((completed / total) * 100)
+  return { completed, total, percent }
+}
+
+export function StakeStepContent({ stakeAmountLabel, transactionSteps }: StakeStepContentProps) {
+  const stakeSummary = resolveStakeSummary(transactionSteps)
+  const progress = resolveProgress(transactionSteps)
+
+  return (
+    <YStack gap="$3">
+      <Card elevated>
+        <YStack gap="$3">
+          <XStack alignItems="center" justifyContent="space-between" gap="$3" flexWrap="wrap">
+            <YStack gap="$1">
+              <Text variant="caption" tone="secondary">
+                {`${stakeAmountLabel} locked stake`}
+              </Text>
+              <Heading level={4}>Creating profile &amp; staking</Heading>
+            </YStack>
+            <Badge type={stakeSummary.badgeType}>
+              <BadgeText>{stakeSummary.title}</BadgeText>
+            </Badge>
+          </XStack>
+
+          <XStack alignItems="center" gap="$3">
+            <YStack flex={1} height={8} borderRadius="$full" backgroundColor="$surface" overflow="hidden">
+              <YStack
+                height="100%"
+                width={`${progress.percent}%`}
+                backgroundColor="$primary"
+                borderRadius="$full"
+              />
+            </YStack>
+            <Text fontWeight="700" color="$primary">
+              {`${progress.completed}/${progress.total}`}
+            </Text>
+          </XStack>
+
+          <Text tone="secondary">{stakeSummary.description}</Text>
+
+          <Stepper steps={transactionSteps} palette="primary" maxHeight={320} />
+        </YStack>
+      </Card>
+    </YStack>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/steps/SuccessStepContent.tsx b/packages/governance-widget/src/onboarding/steps/SuccessStepContent.tsx
new file mode 100644
index 0000000..a72151d
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/steps/SuccessStepContent.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { YStack } from 'tamagui'
+import { Button, ButtonText, Heading, Icon, Text } from '@goodwidget/ui'
+import type { GovernanceOnboardingAction } from '../../types'
+
+const SUCCESS_GRADIENT = {
+  background: 'linear-gradient(135deg, #00AFFF 0%, #33BFFF 60%, #7BD6FF 100%)',
+}
+
+interface SuccessStepContentProps {
+  finalActions: GovernanceOnboardingAction[]
+  stakeAmountLabel?: string
+  onFinalActionPress?: (actionId: string) => void
+}
+
+export function SuccessStepContent({
+  finalActions,
+  stakeAmountLabel = '1,000 G$',
+  onFinalActionPress,
+}: SuccessStepContentProps) {
+  return (
+    /* The gradient card IS the root — no dark outer overlay (matches Figma) */
+    <YStack
+      width="100%"
+      borderRadius="$5"
+      padding="$8"
+      gap="$5"
+      alignItems="center"
+      style={SUCCESS_GRADIENT}
+      data-testid="GovernanceOnboardingWidget-success-card"
+    >
+      {/* ── Celebration icon ─────────────────────────────────────── */}
+      <YStack
+        width={80}
+        height={80}
+        borderRadius="$full"
+        alignItems="center"
+        justifyContent="center"
+        style={{ backgroundColor: 'rgba(255,255,255,0.22)' }}
+        borderWidth={3}
+        borderColor="rgba(255,255,255,0.65)"
+        data-testid="GovernanceOnboardingWidget-success"
+      >
+        <Icon name="party-popper" size="lg" color="white" />
+      </YStack>
+
+      {/* ── Heading + body ───────────────────────────────────────── */}
+      <YStack alignItems="center" gap="$3" maxWidth={420}>
+        <Heading level={1} color="white" center>
+          Welcome to Governance
+        </Heading>
+        <Text color="white" center>
+          {`You've successfully staked ${stakeAmountLabel} and joined the mission. Your voice now shapes the future of sustainable universal basic income.`}
+        </Text>
+      </YStack>
+
+      {/* ── Action buttons ───────────────────────────────────────── */}
+      <YStack width="100%" gap="$3">
+        {finalActions.map((action, index) => (
+          <Button
+            key={action.id}
+            fullWidth
+            variant={action.variant ?? (index === 0 ? 'secondary' : 'primary')}
+            disabled={action.disabled}
+            onPress={() => onFinalActionPress?.(action.id)}
+            data-testid={`GovernanceOnboardingWidget-success-${action.id}`}
+          >
+            {index === 0 ? (
+              <Icon name="compass" size="sm" color="primary" />
+            ) : (
+              <Icon name="user" size="sm" color="white" />
+            )}
+            <ButtonText>{action.label}</ButtonText>
+          </Button>
+        ))}
+      </YStack>
+
+      {/* ── Footer ───────────────────────────────────────────────── */}
+      <Text variant="caption" color="white" center>
+        {'© 2024 GoodDollar Governance. Civic & Transparent.'}
+      </Text>
+    </YStack>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/steps/WelcomeStepContent.tsx b/packages/governance-widget/src/onboarding/steps/WelcomeStepContent.tsx
new file mode 100644
index 0000000..181ec98
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/steps/WelcomeStepContent.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { YStack } from '@goodwidget/ui'
+import { OnboardingIdentityCard } from '../OnboardingIdentityCard'
+import type { GovernanceIdentityStatus } from '../../types'
+
+interface WelcomeStepContentProps {
+  identityStatus: GovernanceIdentityStatus
+  walletAddress?: string
+  isIdentityVerified: boolean
+  onVerifyPress?: () => void
+  onProceedPress?: () => void
+}
+
+export function WelcomeStepContent({
+  identityStatus,
+  walletAddress,
+  isIdentityVerified,
+  onVerifyPress,
+  onProceedPress,
+}: WelcomeStepContentProps) {
+  return (
+    <YStack gap="$3">
+      <OnboardingIdentityCard
+        identityStatus={identityStatus}
+        walletAddress={walletAddress}
+        onVerifyPress={onVerifyPress}
+        onProceedPress={isIdentityVerified ? onProceedPress : undefined}
+      />
+    </YStack>
+  )
+}
diff --git a/packages/governance-widget/src/onboarding/validation.ts b/packages/governance-widget/src/onboarding/validation.ts
new file mode 100644
index 0000000..d3388ca
--- /dev/null
+++ b/packages/governance-widget/src/onboarding/validation.ts
@@ -0,0 +1,49 @@
+import { REQUIRED_PROFILE_FIELDS } from './constants'
+import type {
+  GovernanceHouse,
+  GovernanceProfileDraft,
+  GovernanceProfileFieldErrors,
+  GovernanceProfileFieldKey,
+} from '../types'
+
+function createRequiredFieldLabel(fieldKey: GovernanceProfileFieldKey): string {
+  switch (fieldKey) {
+    case 'name':
+      return 'Name is required'
+    case 'socialLinks':
+      return 'Social links are required'
+    case 'projectWebpage':
+      return 'Project webpage is required'
+    case 'missionStatement':
+      return 'Mission statement is required'
+    case 'distributionStrategy':
+      return 'Distribution strategy is required'
+    default:
+      return 'This field is required'
+  }
+}
+
+export function validateProfileDraft(
+  selectedHouse: GovernanceHouse,
+  profileDraft: GovernanceProfileDraft,
+): GovernanceProfileFieldErrors {
+  return REQUIRED_PROFILE_FIELDS[selectedHouse].reduce<GovernanceProfileFieldErrors>(
+    (errors, fieldKey) => {
+      const fieldValue = profileDraft[fieldKey]?.trim()
+      if (!fieldValue) {
+        errors[fieldKey] = createRequiredFieldLabel(fieldKey)
+      }
+      return errors
+    },
+    {},
+  )
+}
+
+export function isProfileDraftComplete(
+  selectedHouse: GovernanceHouse,
+  profileDraft: GovernanceProfileDraft,
+  fieldErrors: GovernanceProfileFieldErrors,
+): boolean {
+  const validationErrors = validateProfileDraft(selectedHouse, profileDraft)
+  return Object.keys(validationErrors).length === 0 && Object.keys(fieldErrors).length === 0
+}
diff --git a/packages/governance-widget/src/types.ts b/packages/governance-widget/src/types.ts
new file mode 100644
index 0000000..721a81a
--- /dev/null
+++ b/packages/governance-widget/src/types.ts
@@ -0,0 +1,59 @@
+import type { ButtonProps, StepperStepItem } from '@goodwidget/ui'
+
+export type GovernanceHouse = 'citizenship' | 'alignment'
+
+export type GovernanceOnboardingStepId =
+  | 'welcome'
+  | 'house'
+  | 'profile'
+  | 'stake'
+  | 'success'
+
+export interface GovernanceWizardData extends Record<string, unknown> {
+  selectedHouse?: GovernanceHouse
+  profileDraft: GovernanceProfileDraft
+}
+
+export type GovernanceIdentityStatus = 'verified' | 'unverified'
+
+export interface GovernanceProfileDraft {
+  name?: string
+  socialLinks?: string
+  projectWebpage?: string
+  missionStatement?: string
+  distributionStrategy?: string
+}
+
+export type GovernanceProfileFieldKey = keyof GovernanceProfileDraft
+
+export type GovernanceProfileFieldErrors = Partial<Record<GovernanceProfileFieldKey, string>>
+
+export interface GovernanceOnboardingAction {
+  id: string
+  label: string
+  variant?: ButtonProps['variant']
+  disabled?: boolean
+}
+
+export interface GovernanceOnboardingWidgetProps {
+  currentStepId?: GovernanceOnboardingStepId
+  initialStepId?: GovernanceOnboardingStepId
+  identityStatus?: GovernanceIdentityStatus
+  /**
+   * Connected wallet address shown in the welcome step. The widget is
+   * presentational, so a parent integration supplies the address instead of
+   * the widget reading provider state directly.
+   */
+  walletAddress?: string
+  initialHouse?: GovernanceHouse
+  disabledHouseOptions?: GovernanceHouse[]
+  initialProfileDraft?: GovernanceProfileDraft
+  initialFieldErrors?: GovernanceProfileFieldErrors
+  stakeAmountLabel?: string
+  transactionSteps?: StepperStepItem[]
+  finalActions?: GovernanceOnboardingAction[]
+  dataTestId?: string
+  onStepChange?: (stepId: GovernanceOnboardingStepId) => void
+  onVerifyIdentity?: () => void
+  onFinalActionPress?: (actionId: string) => void
+}
diff --git a/packages/governance-widget/tsconfig.build.json b/packages/governance-widget/tsconfig.build.json
new file mode 100644
index 0000000..5a24989
--- /dev/null
+++ b/packages/governance-widget/tsconfig.build.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}
diff --git a/packages/governance-widget/tsconfig.json b/packages/governance-widget/tsconfig.json
new file mode 100644
index 0000000..c2f740f
--- /dev/null
+++ b/packages/governance-widget/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "paths": {
+      "@goodwidget/ui": ["../ui/src/index.ts"],
+      "react-native": ["./node_modules/react-native-web"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/governance-widget/tsup.config.ts b/packages/governance-widget/tsup.config.ts
new file mode 100644
index 0000000..756b6b0
--- /dev/null
+++ b/packages/governance-widget/tsup.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: {
+    index: 'src/index.ts',
+  },
+  format: ['esm', 'cjs'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  tsconfig: 'tsconfig.build.json',
+  external: ['react', 'react-dom', 'react-native', 'react-native-web', 'react-native-svg'],
+})
diff --git a/packages/ui/src/components/Icon.tsx b/packages/ui/src/components/Icon.tsx
index fd63649..1d7542a 100644
--- a/packages/ui/src/components/Icon.tsx
+++ b/packages/ui/src/components/Icon.tsx
@@ -56,6 +56,14 @@ const SVG_PATHS: Record<string, string | string[]> = {
   'external-link': 'M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3',
   search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
   settings: 'M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z',
+  globe: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z',
+  'shield-check':
+    'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zM9 12l2 2 4-4',
+  'party-popper':
+    'M5.8 11.3L2 22l10.7-3.79M4 3h.01M22 8h.01M15 2h.01M22 20h.01M22 2l-7.61 19.29A2 2 0 0112.55 22H12a2 2 0 01-1.75-1.04L7.5 15.5l-5.46-2.75A2 2 0 011 10.93v-.57a2 2 0 011.29-1.86L22 2',
+  compass:
+    'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z',
+  user: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z',
 }
 
 // ---------------------------------------------------------------------------
@@ -74,7 +82,7 @@ export type IconSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
  * Semantic color roles for icons — resolved via the active theme.
  * 'inherit' falls back to CSS currentColor (inherits from parent element).
  */
-export type IconColor = 'primary' | 'text' | 'muted' | 'error' | 'success' | 'inherit'
+export type IconColor = 'primary' | 'text' | 'muted' | 'error' | 'success' | 'warning' | 'white' | 'inherit'
 
 /** Raw px values for each named size — mirrors the preset icon token scale. */
 const SIZE_PX: Record<IconSize, number> = {
@@ -98,6 +106,8 @@ const COLOR_THEME_KEY: Record<IconColor, string> = {
   muted: '$placeholderColor',
   error: '$error',
   success: '$success',
+  warning: '$warning',
+  white: '$white',
   inherit: 'currentColor',
 }
 
diff --git a/packages/ui/src/components/PageWizard.tsx b/packages/ui/src/components/PageWizard.tsx
new file mode 100644
index 0000000..97afe4b
--- /dev/null
+++ b/packages/ui/src/components/PageWizard.tsx
@@ -0,0 +1,301 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+import { Stack } from 'tamagui'
+import { createComponent } from '../createComponent'
+import { XStack, YStack } from '../components-test/Stacks'
+import { Heading } from './Heading'
+import { Text } from './Text'
+
+export interface PageWizardStep {
+  id: string
+  title: string
+  description?: string
+}
+
+export interface PageWizardContextValue {
+  currentIndex: number
+  currentStep?: PageWizardStep
+  steps: PageWizardStep[]
+  data: Record<string, unknown>
+  setData: (patch: PageWizardDataPatch) => void
+  next: () => void
+  back: () => void
+  goTo: (index: number) => void
+  goToStep: (stepId: string) => void
+  isFirst: boolean
+  isLast: boolean
+}
+
+export type PageWizardDataPatch =
+  | Record<string, unknown>
+  | ((previous: Record<string, unknown>) => Record<string, unknown>)
+
+interface PageWizardProviderProps {
+  steps: PageWizardStep[]
+  initialStepId?: string
+  currentStepId?: string
+  initialData?: Record<string, unknown>
+  onStepChange?: (stepId: string, index: number) => void
+  children: ReactNode
+}
+
+interface PageWizardShellProps {
+  title: string
+  description?: string
+  footer?: ReactNode
+  children: ReactNode
+  dataTestId?: string
+  /**
+   * Renders the horizontal step track and mobile summary when true. Use false
+   * for end-state views (e.g. a celebration screen) where the wizard progress
+   * should be hidden from the user.
+   */
+  showStepper?: boolean
+}
+
+const PageWizardContext = createContext<PageWizardContextValue | null>(null)
+
+const PageWizardStepCircle = createComponent(Stack, {
+  name: 'PageWizardStepCircle',
+  width: 32,
+  height: 32,
+  borderRadius: '$full',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  backgroundColor: '$background',
+})
+
+function resolveStepIndex(steps: PageWizardStep[], stepId?: string): number {
+  if (!stepId) {
+    return 0
+  }
+
+  const nextIndex = steps.findIndex((step) => step.id === stepId)
+  return nextIndex >= 0 ? nextIndex : 0
+}
+
+export function PageWizardProvider({
+  steps,
+  initialStepId,
+  currentStepId,
+  initialData,
+  onStepChange,
+  children,
+}: PageWizardProviderProps) {
+  const [uncontrolledStepId, setUncontrolledStepId] = useState<string | undefined>(initialStepId)
+  const [data, setDataState] = useState<Record<string, unknown>>(initialData ?? {})
+
+  const resolvedStepId = currentStepId ?? uncontrolledStepId ?? steps[0]?.id
+  const currentIndex = resolveStepIndex(steps, resolvedStepId)
+
+  const setData = useCallback((patch: PageWizardDataPatch) => {
+    setDataState((previousData) => {
+      const resolvedPatch = typeof patch === 'function' ? patch(previousData) : patch
+      return {
+        ...previousData,
+        ...resolvedPatch,
+      }
+    })
+  }, [])
+
+  const updateStep = useCallback(
+    (nextIndex: number) => {
+      if (steps.length === 0) {
+        return
+      }
+
+      const boundedIndex = Math.max(0, Math.min(nextIndex, steps.length - 1))
+      const nextStep = steps[boundedIndex]
+
+      if (!currentStepId) {
+        setUncontrolledStepId(nextStep.id)
+      }
+
+      onStepChange?.(nextStep.id, boundedIndex)
+    },
+    [currentStepId, onStepChange, steps],
+  )
+
+  const goTo = useCallback(
+    (nextIndex: number) => {
+      updateStep(nextIndex)
+    },
+    [updateStep],
+  )
+
+  const goToStep = useCallback(
+    (stepId: string) => {
+      updateStep(resolveStepIndex(steps, stepId))
+    },
+    [steps, updateStep],
+  )
+
+  const next = useCallback(() => {
+    updateStep(currentIndex + 1)
+  }, [currentIndex, updateStep])
+
+  const back = useCallback(() => {
+    updateStep(currentIndex - 1)
+  }, [currentIndex, updateStep])
+
+  const value = useMemo<PageWizardContextValue>(
+    () => ({
+      currentIndex,
+      currentStep: steps[currentIndex],
+      steps,
+      data,
+      setData,
+      next,
+      back,
+      goTo,
+      goToStep,
+      isFirst: currentIndex <= 0,
+      isLast: currentIndex >= steps.length - 1,
+    }),
+    [back, currentIndex, data, goTo, goToStep, next, setData, steps],
+  )
+
+  return <PageWizardContext.Provider value={value}>{children}</PageWizardContext.Provider>
+}
+
+export function usePageWizard(): PageWizardContextValue {
+  const contextValue = useContext(PageWizardContext)
+
+  if (!contextValue) {
+    throw new Error('usePageWizard must be used inside a PageWizardProvider')
+  }
+
+  return contextValue
+}
+
+export function PageWizardShell({
+  title,
+  description,
+  footer,
+  children,
+  dataTestId,
+  showStepper = true,
+}: PageWizardShellProps) {
+  const { currentIndex, steps } = usePageWizard()
+  const activeStep = steps[currentIndex]
+
+  return (
+    <YStack gap="$4" width="100%" data-testid={dataTestId}>
+      {showStepper ? (
+        <YStack gap="$3">
+          <YStack
+            gap="$1"
+            data-testid="PageWizardStep-mobile-summary"
+            display="flex"
+            $gtSm={{ display: 'none' }}
+          >
+            <Text variant="caption" tone="secondary">
+              {`Step ${currentIndex + 1} of ${steps.length}`}
+            </Text>
+            {activeStep ? (
+              <Text fontWeight="700" color="$color">
+                {activeStep.title}
+              </Text>
+            ) : null}
+          </YStack>
+
+          <XStack
+            alignItems="center"
+            justifyContent="space-between"
+            gap="$2"
+            width="100%"
+            data-testid="PageWizardStep-track"
+            display="none"
+            $gtSm={{ display: 'flex' }}
+          >
+            {steps.map((step, index) => {
+              const isActiveStep = index === currentIndex
+              const isCompletedStep = index < currentIndex
+              const isLastStep = index === steps.length - 1
+              const connectorColor =
+                index < currentIndex ? '$governancePrimary' : '$governanceBorder'
+
+              return (
+                <React.Fragment key={step.id}>
+                  <YStack
+                    alignItems="center"
+                    gap="$1"
+                    flex={1}
+                    minWidth={0}
+                    data-testid={`PageWizardStep-${step.id}`}
+                    data-state={isActiveStep ? 'active' : isCompletedStep ? 'completed' : 'pending'}
+                  >
+                    <PageWizardStepCircle
+                      backgroundColor={
+                        isActiveStep
+                          ? '$governancePrimary'
+                          : isCompletedStep
+                            ? '$governanceSuccessMuted'
+                            : '$governanceBackground'
+                      }
+                      borderColor={
+                        isActiveStep
+                          ? '$governancePrimary'
+                          : isCompletedStep
+                            ? '$governanceSuccess'
+                            : '$governanceBorder'
+                      }
+                    >
+                      <Text
+                        color={
+                          isActiveStep || isCompletedStep
+                            ? '$color'
+                            : '$governanceTextSecondary'
+                        }
+                        fontWeight="700"
+                      >
+                        {index + 1}
+                      </Text>
+                    </PageWizardStepCircle>
+                    <Text
+                      variant="caption"
+                      color={isActiveStep ? '$color' : '$governanceTextSecondary'}
+                      fontWeight={isActiveStep ? '700' : '500'}
+                      center
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                      maxWidth="100%"
+                    >
+                      {step.title}
+                    </Text>
+                  </YStack>
+                  {!isLastStep ? (
+                    <YStack
+                      flex={1}
+                      height={2}
+                      borderRadius="$full"
+                      backgroundColor={connectorColor}
+                      marginHorizontal="$1"
+                      data-testid={`PageWizardConnector-${index}`}
+                    />
+                  ) : null}
+                </React.Fragment>
+              )
+            })}
+          </XStack>
+
+          <YStack gap="$1">
+            <Heading level={3}>{title}</Heading>
+            {description ? <Text tone="secondary">{description}</Text> : null}
+          </YStack>
+        </YStack>
+      ) : null}
+
+      {children}
+      {footer}
+    </YStack>
+  )
+}
diff --git a/packages/ui/src/components/Stepper.tsx b/packages/ui/src/components/Stepper.tsx
new file mode 100644
index 0000000..f0bb795
--- /dev/null
+++ b/packages/ui/src/components/Stepper.tsx
@@ -0,0 +1,400 @@
+import React, { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+import { Icon } from './Icon'
+import { Text } from './Text'
+import { XStack, YStack } from '../components-test/Stacks'
+import { createComponent } from '../createComponent'
+
+const MARKER_SIZE = 28
+const ROW_GAP_PX = 8
+
+export type StepperStepStatus = 'pending' | 'active' | 'completed' | 'failed' | 'attention'
+
+export type StepperPalette = 'primary' | 'purple'
+
+export interface StepperStepItem {
+  id: string
+  title: string
+  description?: string
+  status: StepperStepStatus
+}
+
+export interface StepperProps {
+  steps: StepperStepItem[]
+  activeStepId?: string | null
+  header?: ReactNode
+  maxHeight?: number
+  /**
+   * Visual palette for the stepper. `primary` matches the rest of the design
+   * system (cyan accent). `purple` switches the active/completed fills and
+   * the connector track to the lavender tones used by the governance stake
+   * progress screen.
+   */
+  palette?: StepperPalette
+}
+
+interface PaletteTokens {
+  activeFill: string
+  activeText: string
+  completedFill: string
+  completedText: string
+  pendingTrack: string
+  pendingBorder: string
+  pendingText: string
+  failedFill: string
+  failedText: string
+  activeRingFill: string
+  activeRingText: string
+}
+
+const PRIMARY_PALETTE: PaletteTokens = {
+  activeFill: '$governancePrimary',
+  activeText: '$governancePrimaryDark',
+  activeRingFill: '$governancePrimaryMuted',
+  activeRingText: '$governancePrimaryDark',
+  completedFill: '$governanceSuccess',
+  completedText: '$governancePrimaryDark',
+  pendingTrack: '$governanceBorderLight',
+  pendingBorder: '$governanceBorder',
+  pendingText: '$governanceTextSecondary',
+  failedFill: '$governanceError',
+  failedText: '$governanceError',
+}
+
+const PURPLE_PALETTE: PaletteTokens = {
+  activeFill: '$governancePrimary',
+  activeText: '$governancePrimaryDark',
+  activeRingFill: '$governancePrimaryMuted',
+  activeRingText: '$governancePrimaryDark',
+  completedFill: '$governancePrimary',
+  completedText: '$governancePrimaryDark',
+  pendingTrack: '$governanceBorderLight',
+  pendingBorder: '$governanceBorder',
+  pendingText: '$governanceTextSecondary',
+  failedFill: '$governanceError',
+  failedText: '$governanceError',
+}
+
+function resolvePalette(palette: StepperPalette | undefined): PaletteTokens {
+  return palette === 'purple' ? PURPLE_PALETTE : PRIMARY_PALETTE
+}
+
+function connectorColor(status: StepperStepStatus, palette: PaletteTokens): string {
+  if (status === 'completed') {
+    return palette.completedFill
+  }
+
+  if (status === 'active' || status === 'attention') {
+    return palette.activeFill
+  }
+
+  if (status === 'failed') {
+    return palette.failedFill
+  }
+
+  return palette.pendingTrack
+}
+
+function statusLabel(status: StepperStepStatus): string {
+  if (status === 'failed') {
+    return 'Needs attention'
+  }
+
+  if (status === 'completed') {
+    return 'Completed'
+  }
+
+  if (status === 'active' || status === 'attention') {
+    return 'In progress'
+  }
+
+  return 'Pending'
+}
+
+function statusColor(status: StepperStepStatus, palette: PaletteTokens): string | undefined {
+  if (status === 'failed' || status === 'attention') {
+    return palette.failedText
+  }
+
+  if (status === 'completed') {
+    return palette.completedText
+  }
+
+  if (status === 'active') {
+    return palette.activeText
+  }
+
+  return undefined
+}
+
+type StepperMarkerVariant = 'completed' | 'active' | 'failed' | 'pending' | 'attention'
+
+function resolveMarkerVariant(status: StepperStepStatus): StepperMarkerVariant {
+  if (status === 'completed') {
+    return 'completed'
+  }
+
+  if (status === 'failed') {
+    return 'failed'
+  }
+
+  if (status === 'attention') {
+    return 'attention'
+  }
+
+  if (status === 'active') {
+    return 'active'
+  }
+
+  return 'pending'
+}
+
+function StepperMarker({ variant, palette }: { variant: StepperMarkerVariant; palette: PaletteTokens }) {
+  if (variant === 'pending') {
+    return (
+      <YStack
+        width={MARKER_SIZE}
+        height={MARKER_SIZE}
+        borderRadius="$full"
+        borderWidth={2}
+        borderColor={palette.pendingBorder}
+        backgroundColor="transparent"
+      />
+    )
+  }
+
+  if (variant === 'attention') {
+    return (
+      <YStack
+        width={MARKER_SIZE}
+        height={MARKER_SIZE}
+        borderRadius="$full"
+        borderWidth={2}
+        borderColor={palette.failedFill}
+        backgroundColor="transparent"
+      />
+    )
+  }
+
+  const fillColor = variant === 'failed' ? palette.failedFill : palette.completedFill
+  const glyph =
+    variant === 'completed' ? (
+      <Icon name="check" size="xs" color="white" />
+    ) : variant === 'failed' ? (
+      <Icon name="alert-triangle" size="xs" color="white" />
+    ) : (
+      <Icon name="loader" size="sm" color="white" spin />
+    )
+
+  return (
+    <YStack
+      width={MARKER_SIZE}
+      height={MARKER_SIZE}
+      borderRadius="$full"
+      backgroundColor={fillColor}
+      alignItems="center"
+      justifyContent="center"
+    >
+      {glyph}
+    </YStack>
+  )
+}
+
+interface StepperStepRowProps {
+  step: StepperStepItem
+  isFirst: boolean
+  isLast: boolean
+  connectorAboveColor?: string
+  stepRef: (node: HTMLElement | null) => void
+  palette: PaletteTokens
+}
+
+function StepperStepRow({
+  step,
+  isFirst,
+  isLast,
+  connectorAboveColor,
+  stepRef,
+  palette,
+}: StepperStepRowProps) {
+  const isActiveStep = step.status === 'active' || step.status === 'attention'
+  const isFailedStep = step.status === 'failed'
+  const isAttentionStep = step.status === 'attention'
+  const connectorBelowColor = connectorColor(step.status, palette)
+  const titleColor = isAttentionStep
+    ? palette.failedText
+    : isFailedStep
+      ? palette.failedText
+      : step.status === 'completed' || isActiveStep
+        ? palette.activeText
+        : palette.pendingText
+  const contentBackgroundColor = isActiveStep ? palette.activeRingFill : undefined
+  const contentBorderColor = isAttentionStep
+    ? palette.failedFill
+    : isFailedStep
+      ? palette.failedFill
+      : isActiveStep
+        ? palette.activeFill
+        : 'transparent'
+  const shouldShowDescription = Boolean(step.description) && (isActiveStep || isFailedStep)
+  const railOffset = isActiveStep || isFailedStep ? '$2' : '$1'
+
+  return (
+    <YStack ref={stepRef} width="100%">
+      <XStack alignItems="stretch" gap="$3">
+        <YStack alignItems="center" width={MARKER_SIZE} flexShrink={0} marginTop={railOffset}>
+          {!isFirst && connectorAboveColor ? (
+            <YStack
+              width={2}
+              flex={1}
+              minHeight={6}
+              backgroundColor={connectorAboveColor}
+              marginTop={-ROW_GAP_PX}
+            />
+          ) : null}
+          <StepperMarker variant={resolveMarkerVariant(step.status)} palette={palette} />
+          {!isLast ? (
+            <YStack
+              width={2}
+              flex={1}
+              minHeight={16}
+              backgroundColor={connectorBelowColor}
+              marginBottom={-ROW_GAP_PX}
+            />
+          ) : null}
+        </YStack>
+
+        <YStack
+          flex={1}
+          gap={isActiveStep ? '$2' : '$1'}
+          paddingTop="$1"
+          paddingBottom={isLast ? '$0' : '$3'}
+          paddingHorizontal={isActiveStep || isFailedStep ? '$3' : '$0'}
+          paddingVertical={isActiveStep || isFailedStep ? '$3' : '$0'}
+          borderRadius="$3"
+          borderWidth={isActiveStep || isFailedStep ? 1 : 0}
+          borderColor={contentBorderColor}
+          backgroundColor={contentBackgroundColor}
+        >
+          <XStack alignItems="center" justifyContent="space-between" gap="$2">
+            <XStack alignItems="center" gap="$2" flex={1} flexWrap="wrap">
+              <Text
+                color={titleColor}
+                fontWeight={isActiveStep || step.status === 'completed' || isFailedStep ? '700' : '600'}
+                fontSize={isActiveStep ? '$4' : undefined}
+              >
+                {step.title}
+              </Text>
+              {isAttentionStep ? <Icon name="alert-triangle" size="xs" color="inherit" /> : null}
+            </XStack>
+            <Text
+              variant="caption"
+              secondary={!statusColor(step.status, palette)}
+              color={statusColor(step.status, palette)}
+              fontWeight="700"
+            >
+              {statusLabel(step.status)}
+            </Text>
+          </XStack>
+          {shouldShowDescription ? (
+            <Text secondary={!isActiveStep && !isFailedStep} color={isFailedStep || isAttentionStep ? palette.failedText : undefined}>
+              {step.description}
+            </Text>
+          ) : null}
+        </YStack>
+      </XStack>
+    </YStack>
+  )
+}
+
+const SCROLL_HIDE_CLASS = 'gw-stepper-scroll-hide'
+
+const SCROLL_HIDE_STYLE_ID = 'gw-stepper-scroll-hide-style'
+
+function ensureScrollbarHidden(): void {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  if (document.getElementById(SCROLL_HIDE_STYLE_ID)) {
+    return
+  }
+
+  const style = document.createElement('style')
+  style.id = SCROLL_HIDE_STYLE_ID
+  style.textContent = `.${SCROLL_HIDE_CLASS}::-webkit-scrollbar { display: none; width: 0; height: 0; }`
+  document.head.appendChild(style)
+}
+
+const StepperScrollFrame = createComponent(YStack, {
+  name: 'Stepper',
+  width: '100%',
+  overflow: 'auto' as const,
+})
+
+function resolveActiveStepId(steps: StepperStepItem[], activeStepId?: string | null): string | null {
+  if (activeStepId) {
+    return activeStepId
+  }
+
+  const prioritizedStep = steps.find(
+    (step) => step.status === 'active' || step.status === 'failed' || step.status === 'attention',
+  )
+
+  return prioritizedStep?.id ?? null
+}
+
+export function Stepper({ steps, activeStepId, header, maxHeight = 360, palette = 'primary' }: StepperProps) {
+  const stepRefs = useRef(new Map<string, HTMLElement>())
+  const resolvedActiveStepId = resolveActiveStepId(steps, activeStepId)
+  const resolvedPalette = resolvePalette(palette)
+
+  useEffect(() => {
+    ensureScrollbarHidden()
+  }, [])
+
+  useEffect(() => {
+    if (!resolvedActiveStepId) {
+      return undefined
+    }
+
+    const frame = requestAnimationFrame(() => {
+      const node = stepRefs.current.get(resolvedActiveStepId)
+      node?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [resolvedActiveStepId])
+
+  return (
+    <YStack gap="$3" width="100%">
+      {header}
+      <StepperScrollFrame
+        maxHeight={maxHeight}
+        className={SCROLL_HIDE_CLASS}
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+      >
+        <YStack gap="$2">
+          {steps.map((step, index) => (
+            <StepperStepRow
+              key={step.id}
+              step={step}
+              isFirst={index === 0}
+              isLast={index === steps.length - 1}
+              connectorAboveColor={index === 0 ? undefined : connectorColor(steps[index - 1].status, resolvedPalette)}
+              stepRef={(node) => {
+                if (node) {
+                  stepRefs.current.set(step.id, node)
+                  return
+                }
+
+                stepRefs.current.delete(step.id)
+              }}
+              palette={resolvedPalette}
+            />
+          ))}
+        </YStack>
+      </StepperScrollFrame>
+    </YStack>
+  )
+}
diff --git a/packages/ui/src/config.ts b/packages/ui/src/config.ts
index 726c565..c409794 100644
--- a/packages/ui/src/config.ts
+++ b/packages/ui/src/config.ts
@@ -237,6 +237,12 @@ export function createGoodWidgetConfig(overrides?: GoodWidgetConfig) {
       body: bodyFont,
     },
     defaultFont: 'body',
+    media: {
+      sm: { maxWidth: 480 },
+      md: { maxWidth: 768 },
+      gtSm: { minWidth: 481 },
+      gtMd: { minWidth: 769 },
+    },
   })
 }
 
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 27a33dc..f52de56 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -69,6 +69,14 @@ export type { ToastStatus, ToastConfig, ToastItem } from './components/Toast'
 export { Alert } from './components-test/Alert'
 export { Badge, BadgeText } from './components-test/Badge'
 export { Drawer } from './components/Drawer'
+export {
+  PageWizardProvider,
+  PageWizardShell,
+  usePageWizard,
+} from './components/PageWizard'
+export type { PageWizardContextValue, PageWizardStep } from './components/PageWizard'
+export { Stepper } from './components/Stepper'
+export type { StepperProps, StepperStepItem, StepperStepStatus } from './components/Stepper'
 
 // Icon — new component with inline SVG registry and semantic color/size props
 export { Icon } from './components/Icon'
diff --git a/playwright.config.ts b/playwright.config.ts
index 54921cf..9455f9c 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -45,6 +45,18 @@ export default defineConfig({
         },
       },
     },
+    {
+      // Mobile capture for governance onboarding — mirrors the Figma reference
+      // width (390px) so PR reviewers can compare against design without resizing.
+      name: 'chromium-mobile',
+      testMatch: /governance-widget\/.*\.spec\.ts$/,
+      use: {
+        ...devices['Pixel 7'],
+        launchOptions: {
+          args: ['--disable-web-security', '--ignore-certificate-errors'],
+        },
+      },
+    },
   ],
   webServer: {
     command: 'pnpm storybook',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 04afa8b..3c1446a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,6 +170,9 @@ importers:
       '@goodwidget/core':
         specifier: workspace:*
         version: link:../../packages/core
+      '@goodwidget/governance-widget':
+        specifier: workspace:*
+        version: link:../../packages/governance-widget
       '@goodwidget/ui':
         specifier: workspace:*
         version: link:../../packages/ui
@@ -344,6 +347,37 @@ importers:
         specifier: ^5.7.0
         version: 5.9.3
 
+  packages/governance-widget:
+    dependencies:
+      '@goodwidget/ui':
+        specifier: workspace:*
+        version: link:../ui
+      react-native-svg:
+        specifier: 15.15.5
+        version: 15.15.5(react-native@0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.2(@babel/core@7.29.0))(@types/react@18.3.28)(react@18.3.1))(react@18.3.1)
+      tamagui:
+        specifier: 1.121.0
+        version: 1.121.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-native@0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.2(@babel/core@7.29.0))(@types/react@18.3.28)(react@18.3.1))(react@18.3.1)
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.0
+        version: 18.3.28
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.7(@types/react@18.3.28)
+      react:
+        specifier: ^18.3.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.0
+        version: 18.3.1(react@18.3.1)
+      tsup:
+        specifier: ^8.4.0
+        version: 8.5.1(@swc/core@1.15.30)(postcss@8.5.8)(typescript@5.9.3)(yaml@2.8.3)
+      typescript:
+        specifier: ^5.7.0
+        version: 5.9.3
+
   packages/ui:
     dependencies:
       '@tamagui/animations-react-native':
@@ -3592,6 +3626,9 @@ packages:
     resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
     engines: {node: '>=0.6'}
 
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
   bplist-creator@0.0.7:
     resolution: {integrity: sha512-xp/tcaV3T5PCiaY04mXga7o/TE+t95gqeLmADeBI1CvZtdWTbgBt3uLpvh4UWtenKeBhCV6oVxGk38yZr2uYEA==}
 
@@ -3926,6 +3963,17 @@ packages:
   css-in-js-utils@3.1.0:
     resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
 
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -4067,6 +4115,9 @@ packages:
   dom-serializer@0.2.2:
     resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
   domelementtype@1.3.1:
     resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
 
@@ -4076,9 +4127,16 @@ packages:
   domhandler@2.4.2:
     resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
 
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
   domutils@1.7.0:
     resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
 
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dotenv-expand@11.0.7:
     resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
     engines: {node: '>=12'}
@@ -4130,6 +4188,10 @@ packages:
   entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   env-editor@0.4.2:
     resolution: {integrity: sha512-ObFo8v4rQJAE59M69QzwloxPZtd33TpYEIjtKD1rrFDcM1Gd7IkDxEBU+HriziN6HSHQnBJi8Dmy+JWkav5HKA==}
     engines: {node: '>=8'}
@@ -5407,6 +5469,9 @@ packages:
   md5@2.3.0:
     resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
 
+  mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
   memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
 
@@ -5724,6 +5789,9 @@ packages:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
   nullthrows@1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
 
@@ -6161,6 +6229,12 @@ packages:
       react: '*'
       react-native: '*'
 
+  react-native-svg@15.15.5:
+    resolution: {integrity: sha512-L4go5jA+GWutdJ/JucuN20cjAbMg1HmMtAP+wZ+3JLCf6Jd0bhXQHxciRP/AQm/FlrIEZwkMcHNZP+FXAiic0w==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
   react-native-web@0.19.13:
     resolution: {integrity: sha512-etv3bN8rJglrRCp/uL4p7l8QvUNUC++QwDbdZ8CB7BvZiMvsxfFIRM1j04vxNldG3uo2puRd6OSWR3ibtmc29A==}
     peerDependencies:
@@ -11819,6 +11893,8 @@ snapshots:
 
   big-integer@1.6.52: {}
 
+  boolbase@1.0.0: {}
+
   bplist-creator@0.0.7:
     dependencies:
       stream-buffers: 2.2.0
@@ -12193,6 +12269,21 @@ snapshots:
     dependencies:
       hyphenate-style-name: 1.1.0
 
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@1.1.3:
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
+  css-what@6.2.2: {}
+
   css.escape@1.5.1: {}
 
   csstype@3.2.3: {}
@@ -12297,6 +12388,12 @@ snapshots:
       domelementtype: 2.3.0
       entities: 2.2.0
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
   domelementtype@1.3.1: {}
 
   domelementtype@2.3.0: {}
@@ -12305,11 +12402,21 @@ snapshots:
     dependencies:
       domelementtype: 1.3.1
 
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
   domutils@1.7.0:
     dependencies:
       dom-serializer: 0.2.2
       domelementtype: 1.3.1
 
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dotenv-expand@11.0.7:
     dependencies:
       dotenv: 16.4.7
@@ -12354,6 +12461,8 @@ snapshots:
 
   entities@2.2.0: {}
 
+  entities@4.5.0: {}
+
   env-editor@0.4.2: {}
 
   error-ex@1.3.4:
@@ -13963,6 +14072,8 @@ snapshots:
       crypt: 0.0.2
       is-buffer: 1.1.6
 
+  mdn-data@2.0.14: {}
+
   memoize-one@5.2.1: {}
 
   memoize-one@6.0.0: {}
@@ -14471,6 +14582,10 @@ snapshots:
     dependencies:
       path-key: 3.1.1
 
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
   nullthrows@1.1.1: {}
 
   nyc@15.1.0:
@@ -14931,6 +15046,13 @@ snapshots:
       react-native: 0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.2(@babel/core@7.29.0))(@types/react@18.3.28)(react@18.3.1)
       warn-once: 0.1.1
 
+  react-native-svg@15.15.5(react-native@0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.2(@babel/core@7.29.0))(@types/react@18.3.28)(react@18.3.1))(react@18.3.1):
+    dependencies:
+      css-select: 5.2.2
+      css-tree: 1.1.3
+      react: 18.3.1
+      react-native: 0.76.9(@babel/core@7.29.0)(@babel/preset-env@7.29.2(@babel/core@7.29.0))(@types/react@18.3.28)(react@18.3.1)
+
   react-native-web@0.19.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.29.2
diff --git a/skills-lock.json b/skills-lock.json
new file mode 100644
index 0000000..9b92c72
--- /dev/null
+++ b/skills-lock.json
@@ -0,0 +1,11 @@
+{
+  "version": 1,
+  "skills": {
+    "gooddollar": {
+      "source": "GoodDollar/GoodSkills",
+      "sourceType": "github",
+      "skillPath": "skills/gooddollar/SKILL.md",
+      "computedHash": "d5f8cc5079f386e7170925e61214fb3334176aa6d0fc6bdc50400e535692b377"
+    }
+  }
+}
diff --git a/tests/widgets/governance-widget/dashboard.spec.ts b/tests/widgets/governance-widget/dashboard.spec.ts
new file mode 100644
index 0000000..90393b5
--- /dev/null
+++ b/tests/widgets/governance-widget/dashboard.spec.ts
@@ -0,0 +1,116 @@
+import { expect, test, type Page } from '@playwright/test'
+
+type GovernanceStoryCase = {
+  id: string
+  testId: string
+  screenshot: string
+  width?: number
+  height?: number
+  expectedText: string
+}
+
+const STORY_CASES: GovernanceStoryCase[] = [
+  {
+    id: 'widgets-governancedashboard--impact-light',
+    testId: 'ImpactCard-light',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-01-impact-light.png',
+    expectedText: 'Community impact this month',
+  },
+  {
+    id: 'widgets-governancedashboard--impact-dark-long-disabled-mobile',
+    testId: 'ImpactCard-dark-mobile-disabled',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-02-impact-dark-mobile-disabled.png',
+    width: 390,
+    height: 844,
+    expectedText: 'Coming soon',
+  },
+  {
+    id: 'widgets-governancedashboard--balance-variants-light',
+    testId: 'BalanceCard-token-growth',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-03-balance-variants-light.png',
+    expectedText: 'Voting balance',
+  },
+  {
+    id: 'widgets-governancedashboard--balance-dark-compact',
+    testId: 'BalanceCard-dark-compact',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-04-balance-dark-compact.png',
+    width: 390,
+    height: 844,
+    expectedText: 'Snapshot in 3 days',
+  },
+  {
+    id: 'widgets-governancedashboard--alignment-default-light',
+    testId: 'AlignmentVotingProposalCard-default',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-05-alignment-default-light.png',
+    expectedText: 'Current top 3 voted',
+  },
+  {
+    id: 'widgets-governancedashboard--alignment-dark-long-options',
+    testId: 'AlignmentVotingProposalCard-dark-long',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-06-alignment-dark-long-options.png',
+    expectedText: '+2 more options',
+  },
+  {
+    id: 'widgets-governancedashboard--optimistic-high-quorum-light',
+    testId: 'OptimisticVotingProposalCard-high-quorum',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-07-optimistic-high-quorum-light.png',
+    expectedText: '78% reached',
+  },
+  {
+    id: 'widgets-governancedashboard--optimistic-dark-low-quorum-mixed',
+    testId: 'OptimisticVotingProposalCard-low-quorum',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-08-optimistic-dark-low-quorum-mixed.png',
+    expectedText: '+84',
+  },
+  {
+    id: 'widgets-governancedashboard--funding-distribution-light',
+    testId: 'FundingDistributionChart-populated',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-09-funding-distribution-light.png',
+    width: 760,
+    height: 720,
+    expectedText: 'Local Food Chain',
+  },
+  {
+    id: 'widgets-governancedashboard--funding-distribution-dark-empty-mobile',
+    testId: 'FundingDistributionChart-empty-dark-mobile',
+    screenshot: 'tests/widgets/governance-widget/test-results/gw-10-funding-distribution-empty-dark-mobile.png',
+    width: 390,
+    height: 844,
+    expectedText: 'No active funding distribution yet.',
+  },
+]
+
+async function gotoStory(page: Page, storyId: string): Promise<void> {
+  await page.goto(`/iframe.html?id=${storyId}&viewMode=story`)
+  await page.waitForLoadState('domcontentloaded')
+}
+
+for (const storyCase of STORY_CASES) {
+  test(`${storyCase.id} renders and captures screenshot`, async ({ page }) => {
+    if (storyCase.width && storyCase.height) {
+      await page.setViewportSize({ width: storyCase.width, height: storyCase.height })
+    }
+
+    await gotoStory(page, storyCase.id)
+
+    const component = page.getByTestId(storyCase.testId)
+    await expect(component).toBeVisible()
+    await expect(page.getByText(storyCase.expectedText).first()).toBeVisible()
+
+    await page.screenshot({ path: storyCase.screenshot, fullPage: true })
+  })
+}
+
+test('governance dashboard card interactions update mocked action state', async ({ page }) => {
+  await gotoStory(page, 'widgets-governancedashboard--alignment-default-light')
+
+  await page.getByTestId('AlignmentVotingProposalCard-default').click()
+  await expect(page.getByTestId('GovernanceWidget-last-action')).toContainText(
+    'Opened alignment-q3',
+  )
+
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gw-11-interaction-alignment.png',
+    fullPage: true,
+  })
+})
diff --git a/tests/widgets/governance-widget/onboarding.spec.ts b/tests/widgets/governance-widget/onboarding.spec.ts
new file mode 100644
index 0000000..f5b3c10
--- /dev/null
+++ b/tests/widgets/governance-widget/onboarding.spec.ts
@@ -0,0 +1,200 @@
+import { expect, test, type Page } from '@playwright/test'
+
+const STORY_IDS = {
+  injectedWelcomeUnverified:
+    '/iframe.html?id=widgets-governanceonboarding--injected-welcome-unverified&viewMode=story',
+  custodialWelcomeUnverified:
+    '/iframe.html?id=widgets-governanceonboarding--custodial-welcome-unverified&viewMode=story',
+  custodialInteractiveFlow:
+    '/iframe.html?id=widgets-governanceonboarding--custodial-interactive-flow&viewMode=story',
+  custodialHouseSelection:
+    '/iframe.html?id=widgets-governanceonboarding--custodial-house-selection&viewMode=story',
+  custodialCitizenshipProfileReady:
+    '/iframe.html?id=widgets-governanceonboarding--custodial-citizenship-profile-ready&viewMode=story',
+  custodialAlignmentProfileError:
+    '/iframe.html?id=widgets-governanceonboarding--custodial-alignment-profile-error&viewMode=story',
+  custodialStakeProgress:
+    '/iframe.html?id=widgets-governanceonboarding--custodial-stake-progress&viewMode=story',
+  custodialSuccess:
+    '/iframe.html?id=widgets-governanceonboarding--custodial-success&viewMode=story',
+} as const
+
+async function gotoStory(page: Page, storyUrl: string): Promise<void> {
+  await page.goto(storyUrl)
+  await page.waitForLoadState('domcontentloaded')
+  await page.waitForLoadState('networkidle')
+}
+
+test('Governance onboarding interactive flow persists selected house into profile and success steps', async ({
+  page,
+}) => {
+  await gotoStory(page, STORY_IDS.custodialInteractiveFlow)
+
+  await expect(page.getByText('Welcome', { exact: true })).toBeVisible()
+  await page.getByRole('button', { name: 'Proceed to Membership' }).scrollIntoViewIfNeeded()
+  await expect(page.getByRole('button', { name: 'Proceed to Membership' })).toBeEnabled()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-01-welcome-verified.png',
+    fullPage: true,
+  })
+
+  await page.getByRole('button', { name: 'Proceed to Membership' }).click()
+  await expect(page.getByText('Choose your house', { exact: true })).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-02-house-selection.png',
+    fullPage: true,
+  })
+
+  await page.getByTestId('GovernanceOnboardingWidget-house-alignment').click()
+  await page.getByRole('button', { name: 'Continue to profile' }).scrollIntoViewIfNeeded()
+  await page.getByRole('button', { name: 'Continue to profile' }).click({ force: true })
+  await expect(page.getByText('Apply for House of Alignment', { exact: true })).toBeVisible()
+  await expect(page.getByText('Mission statement')).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-03-profile-alignment.png',
+    fullPage: true,
+  })
+
+  await page.getByPlaceholder('John Doe or Organization').fill('Solar Commons')
+  await page.getByPlaceholder('https://...').fill('https://solar.example')
+  await page
+    .getByPlaceholder(
+      'What is the primary goal of your alignment?',
+    )
+    .fill('Expand regenerative local access.')
+  await page
+    .getByPlaceholder('How do you plan to allocate resources?')
+    .fill('Allocate quarterly grants through community review.')
+  await page
+    .getByRole('button', { name: 'Create Profile and Stake' })
+    .scrollIntoViewIfNeeded()
+  await page.getByRole('button', { name: 'Create Profile and Stake' }).click({ force: true })
+
+  await expect(page.getByText('Creating profile & staking', { exact: true }).first()).toBeVisible()
+  await expect(page.getByText('Approve governance stake')).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-04-stake-progress-active.png',
+    fullPage: true,
+  })
+
+  await page.getByRole('button', { name: 'Continue to success' }).scrollIntoViewIfNeeded()
+  await page.getByRole('button', { name: 'Continue to success' }).click({ force: true })
+  await expect(page.getByText('Welcome to Governance', { exact: true })).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-05-success.png',
+    fullPage: true,
+  })
+})
+
+test('Governance onboarding shows the unverified welcome state', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialWelcomeUnverified)
+  await expect(page.getByText('Verification required')).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Proceed to Membership' })).toBeDisabled()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-06-welcome-unverified.png',
+    fullPage: true,
+  })
+})
+
+test('Governance onboarding shows house selection as a standalone state', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialHouseSelection)
+  await expect(page.getByText('House of Citizenship')).toBeVisible()
+  await expect(page.getByText('House of Alignment')).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-07-house-selection-standalone.png',
+    fullPage: true,
+  })
+})
+
+test('Governance onboarding shows the citizenship profile ready state', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialCitizenshipProfileReady)
+  await expect(page.getByText('Ready to continue')).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-08-profile-citizenship-ready.png',
+    fullPage: true,
+  })
+})
+
+test('Governance onboarding shows the alignment profile validation state', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialAlignmentProfileError)
+  await expect(page.getByText('Project webpage is required')).toBeVisible()
+  await expect(page.getByText('Distribution strategy is required')).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-09-profile-alignment-error.png',
+    fullPage: true,
+  })
+})
+
+test('Governance onboarding shows the failed stake progress state', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialStakeProgress)
+  await expect(page.getByText('Action required')).toBeVisible()
+  await expect(
+    page.getByText('The previous transaction failed and needs a retry from the wallet.').first(),
+  ).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-10-stake-progress-failed.png',
+    fullPage: true,
+  })
+})
+
+test('Governance onboarding shows the standalone success state actions', async ({ page }) => {
+  await gotoStory(page, STORY_IDS.custodialSuccess)
+  await expect(page.getByRole('button', { name: 'Explore Governance Proposals' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Go to my profile' })).toBeVisible()
+  await page.screenshot({
+    path: 'tests/widgets/governance-widget/test-results/gwo-11-success-standalone.png',
+    fullPage: true,
+  })
+})
+
+test('Profile field handles rapid typing without losing characters (stale-closure regression)', async ({
+  page,
+}) => {
+  await gotoStory(page, STORY_IDS.custodialInteractiveFlow)
+
+  await page.getByRole('button', { name: 'Proceed to Membership' }).scrollIntoViewIfNeeded()
+  await page.getByRole('button', { name: 'Proceed to Membership' }).click()
+  await page.getByTestId('GovernanceOnboardingWidget-house-alignment').click()
+  await page.getByRole('button', { name: 'Continue to profile' }).scrollIntoViewIfNeeded()
+  await page.getByRole('button', { name: 'Continue to profile' }).click({ force: true })
+  await expect(page.getByText('Apply for House of Alignment', { exact: true })).toBeVisible()
+
+  const nameInput = page.getByPlaceholder('John Doe or Organization')
+  const longName = `Solar Commons Federation ${'X'.repeat(60)}`
+
+  await nameInput.click()
+  await page.keyboard.type(longName, { delay: 0 })
+
+  await expect(nameInput).toHaveValue(longName)
+
+  const webpageInput = page.getByPlaceholder('https://...')
+  const longWebpage = `https://${'y'.repeat(40)}.example`
+  await webpageInput.click()
+  await page.keyboard.type(longWebpage, { delay: 0 })
+
+  await expect(webpageInput).toHaveValue(longWebpage)
+
+  // Multi-line textarea path — exercises ProfileTextAreaField's controlled-value
+  // reconciliation, which is the path most likely to drop characters under
+  // rapid React Native Web input events.
+  const missionArea = page.getByPlaceholder(
+    'What is the primary goal of your alignment?',
+  )
+  const longMission = `Expand regenerative local access. ${'Regenerative '.repeat(40)}`
+  await missionArea.scrollIntoViewIfNeeded()
+  await missionArea.click({ force: true })
+  await page.keyboard.type(longMission, { delay: 0 })
+
+  await expect(missionArea).toHaveValue(longMission)
+
+  // Clear-then-retype path — verifies the controlled-value reconciliation works
+  // when the input is overwritten rather than incrementally typed into. This
+  // guards against a regression where the stale closure was masked by always
+  // typing into an empty field.
+  const newMission = 'All new copy after clearing the previous value.'
+  await missionArea.fill('')
+  await missionArea.scrollIntoViewIfNeeded()
+  await missionArea.click({ force: true })
+  await page.keyboard.type(newMission, { delay: 0 })
+  await expect(missionArea).toHaveValue(newMission)
+})
diff --git a/tests/widgets/governance-widget/test-results/gw-01-impact-light.png b/tests/widgets/governance-widget/test-results/gw-01-impact-light.png
new file mode 100644
index 0000000..a092df9
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-01-impact-light.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-02-impact-dark-mobile-disabled.png b/tests/widgets/governance-widget/test-results/gw-02-impact-dark-mobile-disabled.png
new file mode 100644
index 0000000..a215f17
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-02-impact-dark-mobile-disabled.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-03-balance-variants-light.png b/tests/widgets/governance-widget/test-results/gw-03-balance-variants-light.png
new file mode 100644
index 0000000..9a4894c
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-03-balance-variants-light.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-04-balance-dark-compact.png b/tests/widgets/governance-widget/test-results/gw-04-balance-dark-compact.png
new file mode 100644
index 0000000..765ea6a
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-04-balance-dark-compact.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-05-alignment-default-light.png b/tests/widgets/governance-widget/test-results/gw-05-alignment-default-light.png
new file mode 100644
index 0000000..c459672
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-05-alignment-default-light.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-06-alignment-dark-long-options.png b/tests/widgets/governance-widget/test-results/gw-06-alignment-dark-long-options.png
new file mode 100644
index 0000000..e46f6bd
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-06-alignment-dark-long-options.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-07-optimistic-high-quorum-light.png b/tests/widgets/governance-widget/test-results/gw-07-optimistic-high-quorum-light.png
new file mode 100644
index 0000000..3967e7b
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-07-optimistic-high-quorum-light.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-08-optimistic-dark-low-quorum-mixed.png b/tests/widgets/governance-widget/test-results/gw-08-optimistic-dark-low-quorum-mixed.png
new file mode 100644
index 0000000..f72fb50
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-08-optimistic-dark-low-quorum-mixed.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-09-funding-distribution-light.png b/tests/widgets/governance-widget/test-results/gw-09-funding-distribution-light.png
new file mode 100644
index 0000000..591cbbd
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-09-funding-distribution-light.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-10-funding-distribution-empty-dark-mobile.png b/tests/widgets/governance-widget/test-results/gw-10-funding-distribution-empty-dark-mobile.png
new file mode 100644
index 0000000..a353f4f
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-10-funding-distribution-empty-dark-mobile.png differ
diff --git a/tests/widgets/governance-widget/test-results/gw-11-interaction-alignment.png b/tests/widgets/governance-widget/test-results/gw-11-interaction-alignment.png
new file mode 100644
index 0000000..6c0aa5e
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gw-11-interaction-alignment.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-01-welcome-verified.png b/tests/widgets/governance-widget/test-results/gwo-01-welcome-verified.png
new file mode 100644
index 0000000..052a568
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-01-welcome-verified.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-02-house-selection.png b/tests/widgets/governance-widget/test-results/gwo-02-house-selection.png
new file mode 100644
index 0000000..e0da6ca
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-02-house-selection.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-03-profile-alignment.png b/tests/widgets/governance-widget/test-results/gwo-03-profile-alignment.png
new file mode 100644
index 0000000..2dc041c
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-03-profile-alignment.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-04-stake-progress-active.png b/tests/widgets/governance-widget/test-results/gwo-04-stake-progress-active.png
new file mode 100644
index 0000000..e9564e8
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-04-stake-progress-active.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-05-success.png b/tests/widgets/governance-widget/test-results/gwo-05-success.png
new file mode 100644
index 0000000..f46128c
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-05-success.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-06-welcome-unverified.png b/tests/widgets/governance-widget/test-results/gwo-06-welcome-unverified.png
new file mode 100644
index 0000000..3abdf42
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-06-welcome-unverified.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-07-house-selection-standalone.png b/tests/widgets/governance-widget/test-results/gwo-07-house-selection-standalone.png
new file mode 100644
index 0000000..8c92079
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-07-house-selection-standalone.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-08-profile-citizenship-ready.png b/tests/widgets/governance-widget/test-results/gwo-08-profile-citizenship-ready.png
new file mode 100644
index 0000000..02d1ebc
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-08-profile-citizenship-ready.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-09-profile-alignment-error.png b/tests/widgets/governance-widget/test-results/gwo-09-profile-alignment-error.png
new file mode 100644
index 0000000..fb2b9f1
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-09-profile-alignment-error.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-10-stake-progress-failed.png b/tests/widgets/governance-widget/test-results/gwo-10-stake-progress-failed.png
new file mode 100644
index 0000000..734919b
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-10-stake-progress-failed.png differ
diff --git a/tests/widgets/governance-widget/test-results/gwo-11-success-standalone.png b/tests/widgets/governance-widget/test-results/gwo-11-success-standalone.png
new file mode 100644
index 0000000..f46128c
Binary files /dev/null and b/tests/widgets/governance-widget/test-results/gwo-11-success-standalone.png differ