diff --git a/src/components/pageComponents/NotFound404.test.tsx b/src/components/pageComponents/NotFound404.test.tsx
new file mode 100644
index 00000000..6ce87039
--- /dev/null
+++ b/src/components/pageComponents/NotFound404.test.tsx
@@ -0,0 +1,22 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NotFound404 from './NotFound404'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: vi.fn(() => vi.fn()),
+}))
+
+describe('NotFound404', () => {
+  it('renders 404 title and message', () => {
+    render(
+      <ChakraProvider value={system}>
+        <NotFound404 />
+      </ChakraProvider>,
+    )
+    expect(screen.getByText('404 - Not Found')).toBeDefined()
+    expect(screen.getByRole('button', { name: 'Home' })).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/ConnectWallet/index.test.tsx b/src/components/pageComponents/home/Examples/demos/ConnectWallet/index.test.tsx
new file mode 100644
index 00000000..ab37345f
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/ConnectWallet/index.test.tsx
@@ -0,0 +1,17 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import connectWallet from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('ConnectWallet demo', () => {
+  it('renders the connect wallet button', () => {
+    render(<ChakraProvider value={system}>{connectWallet.demo}</ChakraProvider>)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/EnsName/index.test.tsx b/src/components/pageComponents/home/Examples/demos/EnsName/index.test.tsx
new file mode 100644
index 00000000..2463d875
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/EnsName/index.test.tsx
@@ -0,0 +1,20 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ensName from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('wagmi', () => ({
+  useEnsName: vi.fn(() => ({ data: undefined, error: undefined, status: 'pending' })),
+}))
+
+describe('EnsName demo', () => {
+  it('renders the ENS name search interface', () => {
+    render(<ChakraProvider value={system}>{ensName.demo}</ChakraProvider>)
+    expect(screen.getByText('Find ENS name')).toBeDefined()
+    expect(
+      screen.getByPlaceholderText('Enter an address or select one from the dropdown'),
+    ).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/HashHandling/index.test.tsx b/src/components/pageComponents/home/Examples/demos/HashHandling/index.test.tsx
new file mode 100644
index 00000000..90fc9c0f
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/HashHandling/index.test.tsx
@@ -0,0 +1,28 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import hashHandling from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    isWalletConnected: false,
+    walletChainId: undefined,
+  })),
+}))
+
+vi.mock('@/src/utils/hash', () => {
+  const mockFn = vi.fn(() => Promise.resolve(null))
+  return {
+    default: mockFn,
+    detectHash: mockFn,
+  }
+})
+
+describe('HashHandling demo', () => {
+  it('renders the hash input field', () => {
+    render(<ChakraProvider value={system}>{hashHandling.demo}</ChakraProvider>)
+    expect(screen.getByPlaceholderText(/address|hash/i)).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/SignMessage/index.test.tsx b/src/components/pageComponents/home/Examples/demos/SignMessage/index.test.tsx
new file mode 100644
index 00000000..d673002c
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/SignMessage/index.test.tsx
@@ -0,0 +1,27 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import signMessage from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    isWalletConnected: false,
+    isWalletSynced: false,
+    walletChainId: undefined,
+    appChainId: 11155420,
+    switchChain: vi.fn(),
+  })),
+}))
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('SignMessage demo', () => {
+  it('renders connect wallet fallback when wallet not connected', () => {
+    render(<ChakraProvider value={system}>{signMessage.demo}</ChakraProvider>)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/SwitchNetwork/index.test.tsx b/src/components/pageComponents/home/Examples/demos/SwitchNetwork/index.test.tsx
new file mode 100644
index 00000000..7b93bb7b
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/SwitchNetwork/index.test.tsx
@@ -0,0 +1,23 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import switchNetwork from './index'
+
+const system = createSystem(defaultConfig)
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    isWalletConnected: false,
+  })),
+}))
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('SwitchNetwork demo', () => {
+  it('renders connect wallet button when wallet not connected', () => {
+    render(<ChakraProvider value={system}>{switchNetwork.demo}</ChakraProvider>)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/TokenDropdown/index.test.tsx b/src/components/pageComponents/home/Examples/demos/TokenDropdown/index.test.tsx
new file mode 100644
index 00000000..ade29b7c
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/TokenDropdown/index.test.tsx
@@ -0,0 +1,20 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import tokenDropdown from './index'
+
+const system = createSystem(defaultConfig)
+
+// Mock the shared component to avoid its deep dependency chain
+// (TokenSelect uses withSuspenseAndRetry, useTokenLists, useTokens, etc.)
+vi.mock('@/src/components/sharedComponents/TokenDropdown', () => ({
+  default: () => <div data-testid="token-dropdown-mock">Token Dropdown</div>,
+}))
+
+describe('TokenDropdown demo', () => {
+  it('renders the token dropdown container', () => {
+    render(<ChakraProvider value={system}>{tokenDropdown.demo}</ChakraProvider>)
+    expect(screen.getByText('Search and select a token')).toBeDefined()
+    expect(screen.getByTestId('token-dropdown-mock')).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx b/src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx
new file mode 100644
index 00000000..9e86b8b7
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx
@@ -0,0 +1,49 @@
+import { createMockWeb3Status, renderWithProviders } from '@/src/test-utils'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import tokenInput from './index'
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => createMockWeb3Status()),
+}))
+
+vi.mock('@/src/hooks/useTokenLists', () => ({
+  useTokenLists: vi.fn(() => ({
+    tokens: [],
+    tokensByChainId: {},
+    tokensByAddress: {},
+    tokensBySymbol: {},
+  })),
+}))
+
+vi.mock('@/src/hooks/useTokenSearch', () => ({
+  useTokenSearch: vi.fn(() => ({
+    searchResult: [],
+  })),
+}))
+
+vi.mock('@/src/components/sharedComponents/TokenInput/useTokenInput', () => ({
+  useTokenInput: vi.fn(() => ({
+    amount: 0n,
+    setAmount: vi.fn(),
+    amountError: null,
+    setAmountError: vi.fn(),
+    balance: 0n,
+    balanceError: null,
+    isLoadingBalance: false,
+    selectedToken: undefined,
+    setTokenSelected: vi.fn(),
+  })),
+}))
+
+describe('TokenInput demo', () => {
+  it('renders the token input container', () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    renderWithProviders(
+      <QueryClientProvider client={queryClient}>{tokenInput.demo}</QueryClientProvider>,
+    )
+    // The mode dropdown should be visible
+    expect(screen.getByText('Single token')).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/Examples/demos/TransactionButton/index.test.tsx b/src/components/pageComponents/home/Examples/demos/TransactionButton/index.test.tsx
new file mode 100644
index 00000000..1d7d3be8
--- /dev/null
+++ b/src/components/pageComponents/home/Examples/demos/TransactionButton/index.test.tsx
@@ -0,0 +1,19 @@
+import { createMockWeb3Status, renderWithProviders } from '@/src/test-utils'
+import { screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import transactionButton from './index'
+
+vi.mock('@/src/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => createMockWeb3Status({ appChainId: 11155420 })),
+}))
+
+vi.mock('@/src/providers/Web3Provider', () => ({
+  ConnectWalletButton: () => <button type="button">Connect Wallet</button>,
+}))
+
+describe('TransactionButton demo', () => {
+  it('renders connect wallet fallback when wallet not connected', () => {
+    renderWithProviders(transactionButton.demo)
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeDefined()
+  })
+})
diff --git a/src/components/pageComponents/home/index.test.tsx b/src/components/pageComponents/home/index.test.tsx
new file mode 100644
index 00000000..d498d8a1
--- /dev/null
+++ b/src/components/pageComponents/home/index.test.tsx
@@ -0,0 +1,21 @@
+import { renderWithProviders } from '@/src/test-utils'
+import { screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { Home } from './index'
+
+// Mock sub-components that pull in Web3 dependencies to keep this a pure structural test
+vi.mock('@/src/components/pageComponents/home/Examples', () => ({
+  default: () => <section data-testid="examples">Examples</section>,
+}))
+
+vi.mock('@/src/components/pageComponents/home/Welcome', () => ({
+  default: () => <section data-testid="welcome">Welcome</section>,
+}))
+
+describe('Home', () => {
+  it('renders Welcome and Examples sections', () => {
+    renderWithProviders(<Home />)
+    expect(screen.getByTestId('welcome')).toBeDefined()
+    expect(screen.getByTestId('examples')).toBeDefined()
+  })
+})