diff --git a/src/components/MainWalletPage.test.tsx b/src/components/MainWalletPage.test.tsx
index e4661cee8..3f2da3734 100644
--- a/src/components/MainWalletPage.test.tsx
+++ b/src/components/MainWalletPage.test.tsx
@@ -53,6 +53,10 @@ vi.mock('./wallet/WalletJarsDetailsOverlay', () => ({
   ),
 }))
 
+vi.mock('./wallet/TxHistoryContent', () => ({
+  TxHistoryContent: () => <div data-testid="TxHistoryContent" />,
+}))
+
 vi.mock('./ui/jam/Balance', () => ({
   Balance: ({ valueString, onClick }: { valueString: string; onClick?: () => void }) => (
     <span onClick={onClick}>{valueString}</span>
diff --git a/src/components/MainWalletPage.tsx b/src/components/MainWalletPage.tsx
index 3dbcdc4a5..c8e4fbd84 100644
--- a/src/components/MainWalletPage.tsx
+++ b/src/components/MainWalletPage.tsx
@@ -19,6 +19,8 @@ import type { WalletFileName } from '@/lib/utils'
 import { cn, shortenStringMiddle, walletDisplayName } from '@/lib/utils'
 import { Balance } from './ui/jam/Balance'
 import { Spinner } from './ui/spinner'
+import { TxHistoryContent } from './wallet/TxHistoryContent'
+import { TxHistoryOverlay } from './wallet/TxHistoryOverlay'
 import { WalletJarsDetailsOverlay } from './wallet/WalletJarsDetailsOverlay'
 
 interface MainWalletPageProps {
@@ -30,6 +32,7 @@ export default function MainWalletPage({ walletFileName }: MainWalletPageProps)
   const navigate = useNavigate()
   const [selectedJar, setSelectedJar] = useState<JarObject>()
   const [isWalletJarsDetailsOpen, setIsWalletJarsDetailsOpen] = useState(false)
+  const [isTxHistoryOpen, setIsTxHistoryOpen] = useState(false)
 
   const { toggleDisplayMode } = useJamDisplayContext()
   const { isLoading, isFetching, error, refetch: refetchWalletData } = useJamWalletInfoContext()
@@ -55,6 +58,7 @@ export default function MainWalletPage({ walletFileName }: MainWalletPageProps)
         walletFileName={walletFileName}
         selectedJarIndex={selectedJar?.jarIndex}
       />
+      <TxHistoryOverlay open={isTxHistoryOpen} onOpenChange={setIsTxHistoryOpen} walletFileName={walletFileName} />
       <div className="flex flex-col items-center justify-center gap-8 px-4 py-12">
         <div className="flex w-full max-w-xl flex-col items-center justify-center gap-2">
           <p className="text-muted-foreground hover:text-foreground text-xl select-all" title={walletName}>
@@ -152,6 +156,13 @@ export default function MainWalletPage({ walletFileName }: MainWalletPageProps)
             {t('global.refresh')}
           </Button>
         </div>
+        <TxHistoryContent
+          walletFileName={walletFileName}
+          compact={true}
+          initialLimit={5}
+          onViewAll={() => setIsTxHistoryOpen(true)}
+          className="w-full max-w-6xl"
+        />
       </div>
     </>
   )
diff --git a/src/components/wallet/TxHistoryContent.test.tsx b/src/components/wallet/TxHistoryContent.test.tsx
new file mode 100644
index 000000000..b22a61a99
--- /dev/null
+++ b/src/components/wallet/TxHistoryContent.test.tsx
@@ -0,0 +1,113 @@
+import type { WalletHistoryResponse } from '@joinmarket-webui/joinmarket-ng-api-ts/jm'
+import type { UseQueryResult } from '@tanstack/react-query'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { useQueryWalletHistory } from '@/hooks/useQueryWalletHistory'
+import { TxHistoryContent } from './TxHistoryContent'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock('@/hooks/useQueryWalletHistory', () => ({
+  useQueryWalletHistory: vi.fn(),
+}))
+
+vi.mock('./TxHistoryTable', () => ({
+  TxHistoryTable: ({ history, compact }: { history: unknown[]; compact: boolean }) => (
+    <div data-testid="mock-table" data-compact={compact}>
+      Mock Table (Rows: {history.length})
+    </div>
+  ),
+}))
+
+vi.mock('@/components/ui/alert', () => ({
+  Alert: ({ children, variant }: { children: React.ReactNode; variant?: string }) => (
+    <div data-testid="mock-alert" data-variant={variant}>
+      {children}
+    </div>
+  ),
+  AlertDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+
+vi.mock('@/components/ui/spinner', () => ({
+  Spinner: () => <div data-testid="mock-loading" />,
+}))
+
+const mockUseQuery = useQueryWalletHistory as unknown as ReturnType<typeof vi.fn>
+
+const mockQueryResult = (overrides: Partial<UseQueryResult<WalletHistoryResponse, unknown>>) =>
+  ({
+    isLoading: false,
+    error: null,
+    isFetching: false,
+    refetch: vi.fn(),
+    ...overrides,
+  }) as UseQueryResult<WalletHistoryResponse, unknown>
+
+describe('TxHistoryContent', () => {
+  it('renders loading state', () => {
+    mockUseQuery.mockReturnValue({
+      history: [],
+      queryResult: mockQueryResult({ isLoading: true }),
+    })
+
+    render(<TxHistoryContent walletFileName="wallet.jmdat" compact={false} />)
+    expect(screen.getByTestId('mock-loading')).toBeInTheDocument()
+  })
+
+  it('renders error state', () => {
+    mockUseQuery.mockReturnValue({
+      history: [],
+      queryResult: mockQueryResult({ error: new Error('failed') }),
+    })
+
+    render(<TxHistoryContent walletFileName="wallet.jmdat" compact={false} />)
+    expect(screen.getByTestId('mock-alert')).toBeInTheDocument()
+    expect(screen.getByText('tx_history.error_loading')).toBeInTheDocument()
+  })
+
+  it('renders the table with data', () => {
+    const mockHistory = [{ txid: '1' }, { txid: '2' }]
+    mockUseQuery.mockReturnValue({
+      history: mockHistory,
+      queryResult: mockQueryResult({}),
+    })
+
+    render(<TxHistoryContent walletFileName="wallet.jmdat" compact={true} />)
+    expect(screen.getByTestId('mock-table')).toHaveAttribute('data-compact', 'true')
+    expect(screen.getByText('Mock Table (Rows: 2)')).toBeInTheDocument()
+  })
+
+  it('renders Load More button when not compact and handles clicks', () => {
+    const mockHistory = Array.from({ length: 10 }, () => ({ txid: 'mock' }))
+    const refetch = vi.fn()
+
+    mockUseQuery.mockReturnValue({
+      history: mockHistory,
+      queryResult: mockQueryResult({ refetch, isFetching: false }),
+    })
+
+    render(<TxHistoryContent walletFileName="wallet.jmdat" compact={false} />)
+
+    const loadMoreButton = screen.getByRole('button', { name: 'tx_history.button_load_more' })
+    expect(loadMoreButton).toBeInTheDocument()
+
+    fireEvent.click(loadMoreButton)
+    expect(mockUseQuery).toHaveBeenLastCalledWith(expect.objectContaining({ limit: 20 }))
+  })
+
+  it('hides Load More button if history length is less than limit', () => {
+    const mockHistory = Array.from({ length: 5 }, () => ({ txid: 'mock' }))
+
+    mockUseQuery.mockReturnValue({
+      history: mockHistory,
+      queryResult: mockQueryResult({}),
+    })
+
+    render(<TxHistoryContent walletFileName="wallet.jmdat" compact={false} />)
+    expect(screen.queryByRole('button', { name: 'tx_history.button_load_more' })).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/wallet/TxHistoryContent.tsx b/src/components/wallet/TxHistoryContent.tsx
new file mode 100644
index 000000000..aa64a5c26
--- /dev/null
+++ b/src/components/wallet/TxHistoryContent.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { AlertTriangleIcon, ListIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { useQueryWalletHistory } from '@/hooks/useQueryWalletHistory'
+import { cn, type WalletFileName } from '@/lib/utils'
+import { TxHistoryTable } from './TxHistoryTable'
+
+interface TxHistoryContentProps {
+  walletFileName: WalletFileName
+  className?: string
+  initialLimit?: number
+  compact?: boolean
+  enabled?: boolean
+  onViewAll?: () => void
+}
+
+export const TxHistoryContent = ({
+  walletFileName,
+  className,
+  initialLimit = 10,
+  compact = false,
+  enabled = true,
+  onViewAll,
+}: TxHistoryContentProps) => {
+  const { t } = useTranslation()
+  const [limit, setLimit] = useState(initialLimit)
+  const { history, queryResult } = useQueryWalletHistory({ walletFileName, limit, enabled })
+
+  return (
+    <section className={cn('flex flex-col gap-3', className)}>
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-muted-foreground text-sm font-light tracking-wide">{t('tx_history.section_title')}</h2>
+        {compact && onViewAll ? (
+          <Button size="sm" variant="outline" onClick={onViewAll}>
+            <ListIcon />
+            {t('tx_history.button_view_all')}
+          </Button>
+        ) : null}
+      </div>
+
+      {queryResult.isLoading ? (
+        <div className="flex min-h-32 items-center justify-center gap-2">
+          <Spinner className="motion-reduce:hidden" />
+          {t('global.loading')}
+        </div>
+      ) : queryResult.error ? (
+        <Alert variant="destructive">
+          <AlertTriangleIcon />
+          <AlertDescription>{t('tx_history.error_loading')}</AlertDescription>
+        </Alert>
+      ) : (
+        <TxHistoryTable history={compact ? history.slice(0, 5) : history} compact={compact} />
+      )}
+
+      {!compact && history.length >= limit ? (
+        <div className="flex justify-center">
+          <Button
+            variant="outline"
+            onClick={() => setLimit((current) => current + 10)}
+            disabled={queryResult.isFetching}
+          >
+            {queryResult.isFetching ? <Spinner /> : undefined}
+            {t('tx_history.button_load_more')}
+          </Button>
+        </div>
+      ) : null}
+    </section>
+  )
+}
diff --git a/src/components/wallet/TxHistoryOverlay.test.tsx b/src/components/wallet/TxHistoryOverlay.test.tsx
new file mode 100644
index 000000000..f2f441949
--- /dev/null
+++ b/src/components/wallet/TxHistoryOverlay.test.tsx
@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { TxHistoryOverlay } from './TxHistoryOverlay'
+
+type ChildrenProps = { children: ReactNode }
+type DialogProps = ChildrenProps & { open?: boolean; onOpenChange?: (open: boolean) => void }
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock('./TxHistoryContent', () => ({
+  TxHistoryContent: ({ walletFileName }: { walletFileName: string }) => (
+    <div data-testid="tx-history-content" data-wallet={walletFileName}>
+      Content
+    </div>
+  ),
+}))
+
+vi.mock('../ui/jam/PageTitle', () => ({
+  default: ({ title }: { title: string }) => <h1 data-testid="page-title">{title}</h1>,
+}))
+
+// Mock Dialog to avoid dealing with portals and radix UI internals
+vi.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open, onOpenChange }: DialogProps) =>
+    open ? (
+      <div data-testid="dialog">
+        <button onClick={() => onOpenChange?.(false)}>Close</button>
+        {children}
+      </div>
+    ) : null,
+  DialogContent: ({ children }: ChildrenProps) => <div>{children}</div>,
+  DialogHeader: ({ children }: ChildrenProps) => <div>{children}</div>,
+  DialogTitle: ({ children }: ChildrenProps) => <div>{children}</div>,
+}))
+
+describe('TxHistoryOverlay', () => {
+  it('renders dialog content when open', () => {
+    render(<TxHistoryOverlay open={true} onOpenChange={vi.fn()} walletFileName="test-wallet.jmdat" />)
+
+    expect(screen.getByTestId('page-title')).toHaveTextContent('tx_history.overlay_title')
+
+    const content = screen.getByTestId('tx-history-content')
+    expect(content).toBeInTheDocument()
+    expect(content).toHaveAttribute('data-wallet', 'test-wallet.jmdat')
+  })
+
+  it('calls onOpenChange when closed', () => {
+    const onOpenChange = vi.fn()
+    render(<TxHistoryOverlay open={true} onOpenChange={onOpenChange} walletFileName="test-wallet.jmdat" />)
+
+    const closeButton = screen.getByText('Close')
+    fireEvent.click(closeButton)
+
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('does not render when closed', () => {
+    render(<TxHistoryOverlay open={false} onOpenChange={vi.fn()} walletFileName="test-wallet.jmdat" />)
+    expect(screen.queryByTestId('dialog')).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/wallet/TxHistoryOverlay.tsx b/src/components/wallet/TxHistoryOverlay.tsx
new file mode 100644
index 000000000..155c6fd09
--- /dev/null
+++ b/src/components/wallet/TxHistoryOverlay.tsx
@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import type { WithRequiredProperty } from '@/types/global'
+import PageTitle from '../ui/jam/PageTitle'
+import { TxHistoryContent } from './TxHistoryContent'
+
+type TxHistoryOverlayProps = WithRequiredProperty<
+  Omit<ComponentProps<typeof Dialog>, 'children'>,
+  'open' | 'onOpenChange'
+> &
+  Pick<ComponentProps<typeof TxHistoryContent>, 'walletFileName'>
+
+export function TxHistoryOverlay({ open, onOpenChange, walletFileName, ...dialogProps }: TxHistoryOverlayProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Dialog open={open} onOpenChange={() => onOpenChange(false)} {...dialogProps}>
+      <DialogContent className="data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom flex h-dvh max-h-dvh! max-w-screen! flex-col overflow-hidden rounded-none border-none">
+        <DialogHeader className="px-2">
+          <DialogTitle className="sr-only flex items-center gap-2">
+            <PageTitle title={t('tx_history.overlay_title')} />
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex min-h-0 flex-1 overflow-hidden">
+          <TxHistoryContent
+            enabled={open}
+            walletFileName={walletFileName}
+            className="flex h-full min-h-0 flex-1 flex-col overflow-hidden p-2 pt-0"
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/components/wallet/TxHistoryTable.test.tsx b/src/components/wallet/TxHistoryTable.test.tsx
new file mode 100644
index 000000000..6973ca82d
--- /dev/null
+++ b/src/components/wallet/TxHistoryTable.test.tsx
@@ -0,0 +1,108 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { HistoryEntry } from '@/hooks/useQueryWalletHistory'
+import { TxHistoryTable } from './TxHistoryTable'
+
+const mocks = vi.hoisted(() => ({
+  toastSuccess: vi.fn(),
+  toastError: vi.fn(),
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: mocks.toastSuccess,
+    error: mocks.toastError,
+  },
+}))
+
+vi.mock('../ui/jam/Address', () => ({
+  Address: ({ value }: { value: string }) => <span>{value}</span>,
+}))
+
+vi.mock('../ui/jam/Balance', () => ({
+  Balance: ({ valueString }: { valueString: string }) => <span>{valueString}</span>,
+}))
+
+const mockDeposit: HistoryEntry = {
+  timestamp: '2026-07-28T12:00:00Z',
+  role: 'deposit',
+  txid: 'tx1',
+  cj_amount: 5000,
+  net_fee: 0,
+  confirmations: 10,
+  success: true,
+  source_mixdepth: 0,
+}
+
+const mockSend: HistoryEntry = {
+  timestamp: '2026-07-28T13:00:00Z',
+  role: 'send',
+  txid: 'tx2',
+  cj_amount: 10000,
+  net_fee: -100,
+  confirmations: 0,
+  success: true,
+  source_mixdepth: 0,
+}
+
+const mockFailed: HistoryEntry = {
+  timestamp: '2026-07-28T14:00:00Z',
+  role: 'taker',
+  txid: 'tx3',
+  cj_amount: 0,
+  net_fee: 0,
+  confirmations: 0,
+  success: false,
+  failure_reason: 'aborted',
+  source_mixdepth: 1,
+}
+
+describe('TxHistoryTable', () => {
+  beforeEach(() => {
+    mocks.toastSuccess.mockReset()
+    mocks.toastError.mockReset()
+  })
+
+  it('renders history rows and sorts by date', () => {
+    render(<TxHistoryTable history={[mockDeposit, mockSend]} />)
+
+    expect(screen.getByText('tx_history.role_deposit')).toBeInTheDocument()
+    expect(screen.getByText('tx_history.role_send')).toBeInTheDocument()
+
+    const dateHeader = screen.getByText('tx_history.column_date')
+    fireEvent.click(dateHeader)
+    expect(dateHeader).toBeInTheDocument()
+  })
+
+  it('renders empty history alert', () => {
+    render(<TxHistoryTable history={[]} />)
+    expect(screen.getByText('tx_history.empty_history')).toBeInTheDocument()
+  })
+
+  it('expands row details to show raw JSON', () => {
+    render(<TxHistoryTable history={[mockDeposit]} />)
+
+    const detailsButton = screen.getByRole('button', { name: 'jar_details.utxo_list.row_button_details' })
+    fireEvent.click(detailsButton)
+
+    // Check if the JSON is rendered
+    expect(screen.getByText(/"txid": "tx1"/u)).toBeInTheDocument()
+  })
+
+  it('sorts columns correctly', () => {
+    render(<TxHistoryTable history={[mockDeposit, mockSend, mockFailed]} />)
+
+    fireEvent.click(screen.getByText('tx_history.column_amount'))
+    fireEvent.click(screen.getByText('tx_history.column_net_fee'))
+    fireEvent.click(screen.getByText('tx_history.column_confirmations'))
+    fireEvent.click(screen.getByText('tx_history.column_role'))
+
+    expect(screen.getByText('tx_history.role_taker')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/wallet/TxHistoryTable.tsx b/src/components/wallet/TxHistoryTable.tsx
new file mode 100644
index 000000000..fefe61f1d
--- /dev/null
+++ b/src/components/wallet/TxHistoryTable.tsx
@@ -0,0 +1,300 @@
+import { useMemo, useState } from 'react'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type CellContext,
+  type PaginationState,
+  type Row,
+  type SortingState,
+  useReactTable,
+} from '@tanstack/react-table'
+import type { TFunction } from 'i18next'
+import { CheckIcon, ChevronDownIcon, CopyIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { TablePagination } from '@/components/ui/jam/TablePagination'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import type { HistoryEntry } from '@/hooks/useQueryWalletHistory'
+import { cn, shortenStringMiddle } from '@/lib/utils'
+import { Alert, AlertDescription } from '../ui/alert'
+import { Button } from '../ui/button'
+import { buttonVariants } from '../ui/button-variants'
+import { Card, CardContent } from '../ui/card'
+import { Balance } from '../ui/jam/Balance'
+import { CopyButton } from '../ui/jam/CopyButton'
+import { SortIcon } from '../ui/jam/SortIcon'
+import { StatusBadge } from '../ui/jam/StatusBadge'
+
+const ITEMS_PER_PAGE = 25
+
+type KnownHistoryRole = 'maker' | 'taker' | 'send' | 'deposit'
+type StatusBadgeVariant = NonNullable<Parameters<typeof StatusBadge>[0]['variant']>
+
+const ROLE_VARIANT: Record<KnownHistoryRole, StatusBadgeVariant> = {
+  maker: 'cj-out',
+  taker: 'default',
+  send: 'used-empty',
+  deposit: 'deposit',
+}
+
+const columnHelper = createColumnHelper<HistoryEntry>()
+
+const historyRole = (entry: HistoryEntry): KnownHistoryRole | undefined => {
+  return ['maker', 'taker', 'send', 'deposit'].includes(entry.role ?? '') ? (entry.role as KnownHistoryRole) : undefined
+}
+
+const roleLabel = (entry: HistoryEntry, t: TFunction) => {
+  const role = historyRole(entry)
+  return role ? t(`tx_history.role_${role}`) : t('tx_history.role_unknown')
+}
+
+const dateTimeValue = (value: string) => {
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? 0 : date.getTime()
+}
+
+const formatDateTime = (value: string) => {
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
+}
+
+const TxHistoryDetails = ({ entry }: { entry: HistoryEntry }) => {
+  return (
+    <Card>
+      <CardContent className="overflow-x-auto p-4 font-mono text-xs">
+        <pre>{JSON.stringify(entry, null, 2)}</pre>
+      </CardContent>
+    </Card>
+  )
+}
+
+const TxHistoryTableRow = ({ row }: { row: Row<HistoryEntry> }) => {
+  return (
+    <>
+      <TableRow key={row.id}>
+        {row.getVisibleCells().map((cell) => {
+          const alignCenter = cell.column.columnDef.meta?.align === 'center'
+          const alignRight = cell.column.columnDef.meta?.align === 'right'
+          return (
+            <TableCell
+              key={cell.id}
+              className={cn({
+                'text-center': alignCenter,
+                'text-right': alignRight,
+              })}
+            >
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </TableCell>
+          )
+        })}
+      </TableRow>
+      {row.getIsExpanded() && (
+        <TableRow>
+          <TableCell colSpan={row.getAllCells().length} className="p-2">
+            <TxHistoryDetails entry={row.original} />
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  )
+}
+
+const txHistoryTableColumns = (t: TFunction) => {
+  return [
+    columnHelper.accessor('timestamp', {
+      header: () => t('tx_history.column_date'),
+      sortingFn: (a, b) => dateTimeValue(a.original.timestamp) - dateTimeValue(b.original.timestamp),
+      cell: (info) => <span className="text-nowrap">{formatDateTime(info.getValue())}</span>,
+      meta: {
+        alphabetic: true,
+      },
+    }),
+    columnHelper.accessor('role', {
+      header: () => t('tx_history.column_role'),
+      sortingFn: (a, b) => roleLabel(a.original, t).localeCompare(roleLabel(b.original, t)),
+      cell: (info) => {
+        const role = historyRole(info.row.original)
+        return (
+          <StatusBadge variant={role ? ROLE_VARIANT[role] : 'default'}>{roleLabel(info.row.original, t)}</StatusBadge>
+        )
+      },
+    }),
+    columnHelper.accessor('cj_amount', {
+      header: () => t('tx_history.column_amount'),
+      sortingFn: (a, b) => (a.original.cj_amount ?? 0) - (b.original.cj_amount ?? 0),
+      cell: (info) => <Balance valueString={String(info.getValue() ?? 0)} />,
+      meta: {
+        numeric: true,
+        align: 'right',
+      },
+    }),
+    columnHelper.accessor('net_fee', {
+      header: () => t('tx_history.column_net_fee'),
+      sortingFn: (a, b) => (a.original.net_fee ?? 0) - (b.original.net_fee ?? 0),
+      cell: (info) => <Balance valueString={String(info.getValue() ?? 0)} />,
+      meta: {
+        numeric: true,
+        align: 'right',
+      },
+    }),
+    columnHelper.accessor('confirmations', {
+      header: () => t('tx_history.column_confirmations'),
+      sortingFn: (a, b) => (a.original.confirmations ?? 0) - (b.original.confirmations ?? 0),
+      cell: (info) => <>{info.getValue() ?? 0}</>,
+      meta: {
+        numeric: true,
+        align: 'center',
+      },
+    }),
+    columnHelper.accessor('txid', {
+      header: () => t('tx_history.column_txid'),
+      cell: (info) => {
+        const txid = info.getValue() ?? ''
+        return txid ? (
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="min-w-0 font-mono text-xs slashed-zero select-all">{shortenStringMiddle(txid, 16)}</span>
+            <CopyButton
+              value={txid}
+              text={<CopyIcon />}
+              successText={<CheckIcon className="text-brand-success" />}
+              className={cn(buttonVariants({ variant: 'outline', size: 'icon-xs' }), 'shrink-0')}
+              onSuccess={() => toast.success(t('tx_history.copy_txid_success'))}
+              onError={() => toast.error(t('tx_history.copy_txid_error'))}
+            />
+          </div>
+        ) : (
+          ''
+        )
+      },
+      enableSorting: false,
+    }),
+    {
+      id: 'expand-col',
+      cell: ({ row }: CellContext<HistoryEntry, unknown>) => {
+        return row.getCanExpand() ? (
+          <Button size="sm" variant="outline" onClick={row.getToggleExpandedHandler()}>
+            {t('jar_details.utxo_list.row_button_details')}
+            <ChevronDownIcon
+              className={cn('text-muted-foreground size-4 transition-transform duration-200', {
+                'rotate-180': row.getIsExpanded(),
+              })}
+            />
+          </Button>
+        ) : (
+          ''
+        )
+      },
+      enableSorting: false,
+    },
+  ]
+}
+
+interface TxHistoryTableProps {
+  history: HistoryEntry[]
+  compact?: boolean
+}
+
+export const TxHistoryTable = ({ history, compact = false }: TxHistoryTableProps) => {
+  const { t } = useTranslation()
+  const [sorting, setSorting] = useState<SortingState>([{ id: 'timestamp', desc: true }])
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: compact ? 5 : ITEMS_PER_PAGE,
+  })
+
+  const columns = useMemo(() => txHistoryTableColumns(t), [t])
+
+  const table = useReactTable<HistoryEntry>({
+    data: history,
+    columns,
+    state: {
+      sorting,
+      pagination,
+    },
+    autoResetPageIndex: true,
+    getRowId: (row, index) => `${row.txid || 'notxid'}-${row.source_mixdepth ?? 0}-${row.timestamp}-${index}`,
+    onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowCanExpand: () => true,
+    getExpandedRowModel: getExpandedRowModel(),
+    paginateExpandedRows: false,
+  })
+
+  if (history.length === 0) {
+    return (
+      <Alert>
+        <AlertDescription>{t('tx_history.empty_history')}</AlertDescription>
+      </Alert>
+    )
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-2 overflow-hidden rounded-lg border shadow-lg">
+      <div className="flex-1 overflow-auto">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const canSort = header.column.getCanSort()
+                  const alignCenter = header.column.columnDef.meta?.align === 'center'
+                  const alignRight = header.column.columnDef.meta?.align === 'right'
+                  return (
+                    <TableHead
+                      key={header.id}
+                      className={cn({
+                        'cursor-pointer select-none': canSort,
+                        'text-center': alignCenter,
+                        'text-right': alignRight,
+                      })}
+                      onClick={canSort ? () => header.column.toggleSorting() : undefined}
+                    >
+                      <div
+                        className={cn('flex items-center gap-2', {
+                          'cursor-pointer select-none': canSort,
+                          'justify-center': alignCenter,
+                          'justify-end': alignRight,
+                          'font-bold': header.column.getIsSorted(),
+                          'text-muted-foreground': table.getState().sorting.length > 0 && !header.column.getIsSorted(),
+                        })}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {canSort ? <SortIcon className="size-4" column={header.column} /> : undefined}
+                      </div>
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody className=":bg-foreground [&>tr:nth-child(odd)]:bg-foreground/10 [&>tr]:hover:bg-foreground/20!">
+            {table.getRowModel().rows.map((row) => (
+              <TxHistoryTableRow key={row.id} row={row} />
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {!compact && (
+        <TablePagination
+          currentPage={table.getState().pagination.pageIndex + 1}
+          totalPages={table.getPageCount()}
+          itemsPerPage={pagination.pageSize}
+          totalItems={table.getFilteredRowModel().rows.length}
+          onPageChange={(page) => table.setPageIndex(page - 1)}
+          onItemsPerPageChange={(newItemsPerPage) => {
+            table.setPageSize(newItemsPerPage === -1 ? history.length || 1 : newItemsPerPage)
+            table.setPageIndex(0)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/hooks/useQueryWalletHistory.test.ts b/src/hooks/useQueryWalletHistory.test.ts
new file mode 100644
index 000000000..440e5fa8a
--- /dev/null
+++ b/src/hooks/useQueryWalletHistory.test.ts
@@ -0,0 +1,72 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import type { WalletFileName } from '@/lib/utils'
+import { useQueryWalletHistory } from './useQueryWalletHistory'
+
+const queryMock = vi.fn<(options: unknown) => unknown>()
+
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: (options: unknown) => queryMock(options),
+}))
+
+vi.mock('zustand', () => ({
+  useStore: () => ({ session: 'mock-session' }),
+}))
+
+vi.mock('@/hooks/useApiClient', () => ({
+  useApiClient: () => ({}),
+}))
+
+vi.mock('@/constants/debugFeatures', () => ({
+  isDevMode: () => false,
+}))
+
+vi.mock('@/lib/queryClient', () => ({
+  withQueryDelay: (function_: unknown) => function_,
+}))
+
+vi.mock('@/store/jmSessionStore', () => ({
+  jmSessionStore: {},
+}))
+
+vi.mock('@joinmarket-webui/joinmarket-ng-api-ts/@tanstack/react-query', () => ({
+  wallethistoryOptions: () => ({ queryKey: ['history'], queryFn: vi.fn() }),
+}))
+
+describe('useQueryWalletHistory', () => {
+  it('returns history and queryResult when data exists', () => {
+    const mockHistory = [{ txid: 'tx1', timestamp: '2026-07-28' }]
+    queryMock.mockReturnValue({ data: { history: mockHistory } })
+
+    const { result } = renderHook(() => useQueryWalletHistory({ walletFileName: 'wallet.jmdat' }))
+
+    expect(result.current.history).toEqual(mockHistory)
+    expect(result.current.queryResult.data?.history).toEqual(mockHistory)
+  })
+
+  it('returns empty array when data does not exist', () => {
+    queryMock.mockReturnValue({ data: null })
+
+    const { result } = renderHook(() => useQueryWalletHistory({ walletFileName: 'wallet.jmdat' }))
+
+    expect(result.current.history).toEqual([])
+  })
+
+  it('is not enabled if walletFileName is empty', () => {
+    queryMock.mockImplementation((options) => options)
+
+    const { result } = renderHook(() =>
+      useQueryWalletHistory({ walletFileName: undefined as unknown as WalletFileName }),
+    )
+
+    expect((result.current.queryResult as { enabled?: boolean }).enabled).toBe(false)
+  })
+
+  it('is not enabled if explicitly disabled', () => {
+    queryMock.mockImplementation((options) => options)
+
+    const { result } = renderHook(() => useQueryWalletHistory({ walletFileName: 'wallet.jmdat', enabled: false }))
+
+    expect((result.current.queryResult as { enabled?: boolean }).enabled).toBe(false)
+  })
+})
diff --git a/src/hooks/useQueryWalletHistory.ts b/src/hooks/useQueryWalletHistory.ts
new file mode 100644
index 000000000..119741ed6
--- /dev/null
+++ b/src/hooks/useQueryWalletHistory.ts
@@ -0,0 +1,53 @@
+import { wallethistoryOptions } from '@joinmarket-webui/joinmarket-ng-api-ts/@tanstack/react-query'
+import type { HistoryEntry, WalletHistoryResponse } from '@joinmarket-webui/joinmarket-ng-api-ts/jm'
+import { useQuery, type UseQueryResult } from '@tanstack/react-query'
+import { useStore } from 'zustand'
+import { isDevMode } from '@/constants/debugFeatures'
+import { useApiClient } from '@/hooks/useApiClient'
+import { withQueryDelay } from '@/lib/queryClient'
+import type { WalletFileName } from '@/lib/utils'
+import { jmSessionStore } from '@/store/jmSessionStore'
+
+export type { HistoryEntry } from '@joinmarket-webui/joinmarket-ng-api-ts/jm'
+
+export type UseQueryWalletHistoryResult = {
+  history: HistoryEntry[]
+  queryResult: UseQueryResult<WalletHistoryResponse, unknown>
+}
+
+interface UseQueryWalletHistoryProps {
+  walletFileName: WalletFileName
+  limit?: number
+  enabled?: boolean
+}
+
+const EMPTY_HISTORY: HistoryEntry[] = []
+
+export function useQueryWalletHistory({
+  walletFileName,
+  limit,
+  enabled = true,
+}: UseQueryWalletHistoryProps): UseQueryWalletHistoryResult {
+  const client = useApiClient()
+  const jmSession = useStore(jmSessionStore, (state) => state.state?.session)
+
+  const queryOptions = wallethistoryOptions({
+    client,
+    path: { walletname: walletFileName || '' },
+    query: { limit },
+  })
+
+  const queryResult = useQuery({
+    ...queryOptions,
+    queryFn: withQueryDelay(queryOptions.queryFn, {
+      // simulate slow mainnet responses in dev mode
+      throttle: isDevMode() ? 210 : 0,
+    }),
+    enabled: enabled && !!walletFileName && !!jmSession,
+  })
+
+  return {
+    history: queryResult.data?.history ?? EMPTY_HISTORY,
+    queryResult,
+  }
+}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index d9bf7c885..9b7e960ab 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -887,5 +887,26 @@
     "subtitle_one": "The selected UTXO is eligible for inclusion in the transaction.",
     "subtitle_other": "The selected UTXOs are eligible for inclusion in the transaction.",
     "text_subtitle_addon": "Unselected UTXOs will be frozen and can be unfrozen later anytime."
+  },
+  "tx_history": {
+    "section_title": "Recent Activity",
+    "overlay_title": "Transaction History",
+    "button_view_all": "View All",
+    "button_load_more": "Load More",
+    "empty_history": "No transactions found.",
+    "error_loading": "Failed to load transaction history.",
+    "copy_txid_success": "Transaction ID copied.",
+    "copy_txid_error": "Failed to copy transaction ID.",
+    "column_date": "Date",
+    "column_role": "Type",
+    "column_amount": "Amount",
+    "column_net_fee": "Net Fee",
+    "column_confirmations": "Confs.",
+    "column_txid": "Txid",
+    "role_maker": "Maker",
+    "role_taker": "CoinJoin",
+    "role_send": "Send",
+    "role_deposit": "Deposit",
+    "role_unknown": "Unknown"
   }
 }