diff --git a/src/api/MinersDashboardApi.ts b/src/api/MinersDashboardApi.ts
new file mode 100644
index 0000000..1f80532
--- /dev/null
+++ b/src/api/MinersDashboardApi.ts
@@ -0,0 +1,122 @@
+import { useApiQuery } from './ApiUtils';
+import { SSE_FALLBACK_INTERVAL } from './constants';
+import type {
+  ActiveSwap,
+  CrownHistoryRow,
+  CrownRateHistoryRow,
+  CurrentCrownMap,
+  DiagnosticRow,
+  Direction,
+  HaltState,
+  LeaderboardRow,
+  MinerRateHistoryRow,
+  MinerStats,
+  NetworkOverview,
+  Range,
+} from './models';
+
+const CROWN_REFRESH_MS = 12_000;
+
+export const useCurrentCrown = () =>
+  useApiQuery<CurrentCrownMap>('crown', '/crown', CROWN_REFRESH_MS);
+
+export const useCrownHistory = (params: {
+  direction: Direction;
+  fromBlock?: number;
+  toBlock?: number;
+}) =>
+  useApiQuery<CrownHistoryRow[]>(
+    'crown-history',
+    '/crown/history',
+    CROWN_REFRESH_MS,
+    {
+      direction: params.direction,
+      fromBlock: params.fromBlock,
+      toBlock: params.toBlock,
+    },
+  );
+
+export const useCrownRateHistory = (params: {
+  direction: Direction;
+  fromBlock?: number;
+  toBlock?: number;
+}) =>
+  useApiQuery<CrownRateHistoryRow[]>(
+    'crown-rate-history',
+    '/crown/rate-history',
+    CROWN_REFRESH_MS,
+    {
+      direction: params.direction,
+      fromBlock: params.fromBlock,
+      toBlock: params.toBlock,
+    },
+  );
+
+export const useMinerLeaderboard = (range: Range = '30d') =>
+  useApiQuery<LeaderboardRow[]>(
+    'miners-leaderboard',
+    '/miners/leaderboard',
+    SSE_FALLBACK_INTERVAL,
+    {
+      range,
+    },
+  );
+
+export const useMinerStats = (hotkey: string, range: Range = '30d') =>
+  useApiQuery<MinerStats>(
+    'miner-stats',
+    `/miners/${hotkey}/stats`,
+    SSE_FALLBACK_INTERVAL,
+    { range },
+    !!hotkey,
+  );
+
+export const useMinerDiagnostic = (hotkey: string) =>
+  useApiQuery<DiagnosticRow[]>(
+    'miner-diagnostic',
+    `/miners/${hotkey}/diagnostic`,
+    SSE_FALLBACK_INTERVAL,
+    undefined,
+    !!hotkey,
+  );
+
+export const useMinerSwaps = (
+  hotkey: string,
+  params: { limit?: number; offset?: number; status?: string } = {},
+) =>
+  useApiQuery<{ rows: ActiveSwap[]; totalCount: number }>(
+    'miner-swaps',
+    `/miners/${hotkey}/swaps`,
+    SSE_FALLBACK_INTERVAL,
+    params,
+    !!hotkey,
+  );
+
+export const useMinerRateHistory = (
+  hotkey: string,
+  params: { fromBlock?: number; toBlock?: number } = {},
+) =>
+  useApiQuery<MinerRateHistoryRow[]>(
+    'miner-rate-history',
+    `/miners/${hotkey}/rate-history`,
+    SSE_FALLBACK_INTERVAL,
+    params,
+    !!hotkey,
+  );
+
+export const useNetworkOverview = (range: Range = '30d') =>
+  useApiQuery<NetworkOverview>(
+    'network-overview',
+    '/network/overview',
+    SSE_FALLBACK_INTERVAL,
+    {
+      range,
+    },
+  );
+
+export const useHaltState = () =>
+  useApiQuery<HaltState>(
+    'network-halt-state',
+    '/network/halt-state',
+    CROWN_REFRESH_MS,
+  );
diff --git a/src/api/index.ts b/src/api/index.ts
index 236c127..f4e9e92 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,7 @@
 export * from './ApiUtils';
 export * from './EventsApi';
 export * from './MinersApi';
+export * from './MinersDashboardApi';
 export * from './ProtocolApi';
 export * from './ReservationsApi';
 export * from './StatsApi';
diff --git a/src/api/models/MinersDashboard.ts b/src/api/models/MinersDashboard.ts
new file mode 100644
index 0000000..ea361c3
--- /dev/null
+++ b/src/api/models/MinersDashboard.ts
@@ -0,0 +1,86 @@
+export type Direction = 'BTC-TAO' | 'TAO-BTC';
+export type Range = '24h' | '7d' | '30d' | '90d' | 'all';
+
+export type CurrentCrown = {
+  uid: number | null;
+  hotkey: string | null;
+  rate: number | null;
+  sinceBlock: number | null;
+};
+
+export type CurrentCrownMap = Record<Direction, CurrentCrown>;
+
+export type CrownHistoryRow = {
+  block: number;
+  hotkey: string;
+  uid: number | null;
+  rate: number;
+  credit: number;
+};
+
+export type CrownRateHistoryRow = {
+  block: number;
+  rate: number;
+  holderHotkey: string;
+  holderUid: number | null;
+};
+
+export type LeaderboardRow = {
+  uid: number;
+  hotkey: string;
+  crownShare: number;
+  successRate: number;
+  completedSwaps: number;
+  timedOutSwaps: number;
+  volumeTao: string;
+  isActive: boolean;
+  currentCrownDirections: Direction[];
+};
+
+export type MinerStats = {
+  successRate: number;
+  totalSwaps: number;
+  completedSwaps: number;
+  timedOutSwaps: number;
+  volumeTao: string;
+  avgFulfillSec: number | null;
+  avgCompleteSec: number | null;
+  crownShare: number;
+  isActive: boolean;
+  collateralRao: string;
+  activatedAt: number | null;
+};
+
+export type DiagnosticAction = {
+  kind: 'cli-command' | 'link';
+  label: string;
+  value: string;
+};
+
+export type DiagnosticRow = {
+  severity: 'fail' | 'warn' | 'ok';
+  code: string;
+  headline: string;
+  detail: string;
+  action?: DiagnosticAction;
+};
+
+export type MinerRateHistoryRow = {
+  block: number;
+  rate: number;
+  fromChain: string;
+  toChain: string;
+};
+
+export type PairMix = { pair: string; pct: number };
+
+export type NetworkOverview = {
+  volumeTao: string;
+  totalSwaps: number;
+  networkSuccessRate: number;
+  activeMiners: number;
+  registeredMiners: number;
+  pairMix: PairMix[];
+};
+
+export type HaltState = { halted: boolean; asOfBlock: number };
diff --git a/src/api/models/index.ts b/src/api/models/index.ts
index efcc34c..7c2b4fd 100644
--- a/src/api/models/index.ts
+++ b/src/api/models/index.ts
@@ -1,5 +1,6 @@
 export * from './Events';
 export * from './Miners';
+export * from './MinersDashboard';
 export * from './Protocol';
 export * from './Reservations';
 export * from './Stats';
diff --git a/src/components/index.ts b/src/components/index.ts
index d634208..455221f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,4 +15,5 @@ export * from './nav';
 export * from './animated';
 export * from './landing';
 export * from './agents';
+export * from './miners';
 export * from './swap';
diff --git a/src/components/miners/CrownHistoryGrid.tsx b/src/components/miners/CrownHistoryGrid.tsx
new file mode 100644
index 0000000..bab7338
--- /dev/null
+++ b/src/components/miners/CrownHistoryGrid.tsx
@@ -0,0 +1,385 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  Stack,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material';
+import {
+  useCrownHistory,
+  type CrownHistoryRow,
+  type Direction,
+} from '../../api';
+import { FONTS } from '../../theme';
+
+const ROW_BLOCKS = 60;
+const RANGE_BLOCKS: Record<string, number> = {
+  '1h': 300,
+  '2h': 600,
+  '4h': 1200,
+};
+// Subtensor scoring cadence in blocks. The validator sets weights once per
+// SCORING_WINDOW, so the 2h grid snaps to multiples of this value to show
+// "the actual chunk the validator scored on" rather than a rolling trail.
+// Mirrors SCORING_WINDOW_BLOCKS in allways/constants.py.
+const SCORING_WINDOW_BLOCKS = 600;
+const TIER_PALETTE = ['#0052ff', '#4d7dff', '#7f9eff', '#aebeff', '#d2dafe'];
+const OTHER_COLOR = 'rgba(255,255,255,0.18)';
+const EMPTY_COLOR = 'rgba(255,255,255,0.05)';
+
+type CrownRange = '1h' | '2h' | '4h';
+
+type CellState = {
+  block: number;
+  holderHotkey: string | null;
+  holderUid: number | null;
+  rate: number;
+  isTie: boolean;
+};
+
+const buildCells = (
+  rows: CrownHistoryRow[],
+  lo: number,
+  hi: number,
+): CellState[] => {
+  // Group rows by block. When >1 holder, mark as tie and pick the
+  // alphabetically-first as the visible representative.
+  const byBlock = new Map<number, CrownHistoryRow[]>();
+  for (const row of rows) {
+    const arr = byBlock.get(row.block) ?? [];
+    arr.push(row);
+    byBlock.set(row.block, arr);
+  }
+  const cells: CellState[] = [];
+  for (let b = lo; b <= hi; b++) {
+    const here = byBlock.get(b) ?? [];
+    here.sort((a, b) => a.hotkey.localeCompare(b.hotkey));
+    const winner = here[0];
+    cells.push({
+      block: b,
+      holderHotkey: winner?.hotkey ?? null,
+      holderUid: winner?.uid ?? null,
+      rate: winner?.rate ?? 0,
+      isTie: here.length > 1,
+    });
+  }
+  return cells;
+};
+
+const buildTiers = (cells: CellState[]): Map<string, string> => {
+  const counts = new Map<string, number>();
+  for (const cell of cells) {
+    if (cell.holderHotkey) {
+      counts.set(cell.holderHotkey, (counts.get(cell.holderHotkey) ?? 0) + 1);
+    }
+  }
+  const sorted = Array.from(counts.entries()).sort((a, b) => b[1] - a[1]);
+  const map = new Map<string, string>();
+  sorted.forEach(([hotkey], idx) => {
+    map.set(hotkey, TIER_PALETTE[idx] ?? OTHER_COLOR);
+  });
+  return map;
+};
+
+const CrownHistoryGrid: React.FC<{
+  direction: Direction;
+  onDirectionChange: (d: Direction) => void;
+  range: CrownRange;
+  onRangeChange: (r: CrownRange) => void;
+  pan: number;
+  onPanChange: (next: number) => void;
+}> = ({
+  direction,
+  onDirectionChange,
+  range,
+  onRangeChange,
+  pan,
+  onPanChange,
+}) => {
+  const [uidSearch, setUidSearch] = useState('');
+  const span = RANGE_BLOCKS[range];
+
+  const { data } = useCrownHistory({
+    direction,
+    // The API resolves missing bounds to "last DEFAULT blocks", so we only
+    // pass explicit bounds when panning.
+    toBlock: pan > 0 ? undefined : undefined,
+    fromBlock: undefined,
+  });
+
+  const rows = useMemo(() => data ?? [], [data]);
+  const maxBlock = useMemo(
+    () => (rows.length ? Math.max(...rows.map((r) => r.block)) : 0),
+    [rows],
+  );
+  // 2h snaps to the validator's scoring boundary so the grid renders the
+  // actual chunk weights were set on. 1h and 4h stay as rolling windows.
+  let hi: number;
+  let lo: number;
+  if (range === '2h') {
+    const anchor =
+      Math.floor(maxBlock / SCORING_WINDOW_BLOCKS) * SCORING_WINDOW_BLOCKS;
+    const windowsBack = Math.floor(pan / SCORING_WINDOW_BLOCKS);
+    lo = Math.max(0, anchor - windowsBack * SCORING_WINDOW_BLOCKS);
+    hi = lo + SCORING_WINDOW_BLOCKS - 1;
+  } else {
+    hi = maxBlock - pan;
+    lo = Math.max(0, hi - span + 1);
+  }
+  const cells = useMemo(() => buildCells(rows, lo, hi), [rows, lo, hi]);
+  const tiers = useMemo(() => buildTiers(cells), [cells]);
+
+  const rowsCount = Math.ceil(cells.length / ROW_BLOCKS);
+  const search = uidSearch.replace(/[^0-9]/g, '');
+  const focused = search.length > 0;
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'surface.light',
+        border: '1px solid',
+        borderColor: 'divider',
+        p: 2.5,
+        mb: 3,
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ mb: 2 }}
+      >
+        <Typography
+          variant="monoSmall"
+          sx={{
+            fontSize: '0.7rem',
+            letterSpacing: '0.22em',
+            color: 'text.secondary',
+          }}
+        >
+          Crown History · per block
+        </Typography>
+        <Stack direction="row" spacing={1.5} alignItems="center">
+          <ToggleButtonGroup
+            exclusive
+            size="small"
+            value={direction}
+            onChange={(_e, v) => v && onDirectionChange(v)}
+            sx={{ '& .MuiToggleButton-root': { borderColor: 'divider' } }}
+          >
+            <ToggleButton
+              value="BTC-TAO"
+              sx={{ fontFamily: FONTS.mono, fontSize: '0.7rem' }}
+            >
+              BTC → TAO
+            </ToggleButton>
+            <ToggleButton
+              value="TAO-BTC"
+              sx={{ fontFamily: FONTS.mono, fontSize: '0.7rem' }}
+            >
+              TAO → BTC
+            </ToggleButton>
+          </ToggleButtonGroup>
+          <ToggleButtonGroup
+            exclusive
+            size="small"
+            value={range}
+            onChange={(_e, v) => v && onRangeChange(v)}
+          >
+            <ToggleButton
+              value="1h"
+              sx={{ fontFamily: FONTS.mono, fontSize: '0.7rem' }}
+            >
+              1h
+            </ToggleButton>
+            <ToggleButton
+              value="2h"
+              sx={{ fontFamily: FONTS.mono, fontSize: '0.7rem' }}
+            >
+              2h
+            </ToggleButton>
+            <ToggleButton
+              value="4h"
+              sx={{ fontFamily: FONTS.mono, fontSize: '0.7rem' }}
+            >
+              4h
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Stack>
+      </Stack>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{
+          mb: 1.5,
+          fontFamily: FONTS.mono,
+          fontSize: '0.7rem',
+          color: 'text.disabled',
+        }}
+      >
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={() =>
+              onPanChange(pan + (range === '2h' ? SCORING_WINDOW_BLOCKS : span))
+            }
+            sx={{ fontFamily: FONTS.mono, fontSize: '0.65rem' }}
+          >
+            ← earlier
+          </Button>
+          {range === '2h' && pan > 0 && (
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => onPanChange(0)}
+              sx={{ fontFamily: FONTS.mono, fontSize: '0.65rem' }}
+            >
+              latest →
+            </Button>
+          )}
+        </Stack>
+        <Typography
+          component="div"
+          variant="mono"
+          sx={{ fontSize: '0.7rem', color: 'text.secondary' }}
+        >
+          {range === '2h' ? (
+            <>
+              scoring window · block #{lo.toLocaleString()} — #
+              {hi.toLocaleString()}
+              {pan === 0 && (
+                <Box component="span" sx={{ color: 'primary.main', ml: 0.5 }}>
+                  · current
+                </Box>
+              )}
+            </>
+          ) : (
+            <>
+              block #{lo.toLocaleString()} — #{hi.toLocaleString()} · last{' '}
+              {span} blocks · {range}
+            </>
+          )}
+        </Typography>
+        <TextField
+          size="small"
+          placeholder="highlight uid…"
+          value={uidSearch}
+          onChange={(e) => setUidSearch(e.target.value)}
+          inputProps={{
+            style: {
+              fontFamily: FONTS.mono,
+              fontSize: '0.75rem',
+              padding: '6px 10px',
+            },
+          }}
+          sx={{ width: 180, '& fieldset': { borderColor: 'divider' } }}
+        />
+      </Stack>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: `72px repeat(${ROW_BLOCKS}, 1fr)`,
+          gridAutoRows: '12px',
+          gap: '2px',
+          opacity: focused ? 1 : 1,
+        }}
+      >
+        {Array.from({ length: rowsCount }).map((_, r) => {
+          const rowStart = lo + r * ROW_BLOCKS;
+          const rowCells = cells.slice(r * ROW_BLOCKS, (r + 1) * ROW_BLOCKS);
+          return (
+            <React.Fragment key={r}>
+              <Box
+                sx={{
+                  fontFamily: FONTS.mono,
+                  fontSize: '0.58rem',
+                  color: 'text.disabled',
+                  letterSpacing: '0.04em',
+                  textAlign: 'right',
+                  pr: 1,
+                  lineHeight: '12px',
+                }}
+              >
+                #{rowStart.toLocaleString()}
+              </Box>
+              {rowCells.map((cell) => {
+                const isCurrent = cell.block === maxBlock;
+                const color = cell.holderHotkey
+                  ? (tiers.get(cell.holderHotkey) ?? OTHER_COLOR)
+                  : EMPTY_COLOR;
+                const matchesSearch =
+                  focused &&
+                  cell.holderUid != null &&
+                  String(cell.holderUid) === search;
+                const dimmed = focused && !matchesSearch;
+                return (
+                  <Box
+                    key={cell.block}
+                    title={
+                      cell.holderHotkey
+                        ? `block #${cell.block.toLocaleString()} · uid ${cell.holderUid ?? '?'} @ ${cell.rate}${cell.isTie ? ' · tied' : ''}`
+                        : `block #${cell.block.toLocaleString()} · no holder`
+                    }
+                    sx={{
+                      background: isCurrent
+                        ? 'repeating-linear-gradient(45deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.22) 2px, rgba(255,255,255,0.22) 4px)'
+                        : matchesSearch
+                          ? 'primary.main'
+                          : color,
+                      outline: matchesSearch ? '1px solid' : 'none',
+                      outlineColor: 'primary.main',
+                      opacity: dimmed ? 0.18 : cell.isTie ? 0.7 : 1,
+                      transition: 'transform 0.06s',
+                      cursor: 'pointer',
+                      '&:hover': {
+                        outline: '1px solid',
+                        outlineColor: 'text.primary',
+                        transform: 'scale(1.4)',
+                        zIndex: 5,
+                        position: 'relative',
+                      },
+                    }}
+                  />
+                );
+              })}
+            </React.Fragment>
+          );
+        })}
+      </Box>
+      {cells.length > 0 && cells.every((c) => c.holderHotkey === null) && (
+        <Typography
+          component="div"
+          variant="mono"
+          sx={{
+            fontSize: '0.62rem',
+            color: 'text.disabled',
+            mt: 1.5,
+          }}
+        >
+          no rate activity in this window
+        </Typography>
+      )}
+      <Typography
+        component="div"
+        variant="mono"
+        sx={{
+          fontSize: '0.58rem',
+          letterSpacing: '0.15em',
+          textTransform: 'uppercase',
+          color: 'text.disabled',
+          mt: 2,
+        }}
+      >
+        as of #{maxBlock.toLocaleString()} · each cell = 1 block (12s) · each
+        row = 60 blocks (12m)
+      </Typography>
+    </Box>
+  );
+};
+
+export default CrownHistoryGrid;
diff --git a/src/components/miners/CrownIcon.tsx b/src/components/miners/CrownIcon.tsx
new file mode 100644
index 0000000..18c910e
--- /dev/null
+++ b/src/components/miners/CrownIcon.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box, type SxProps, type Theme } from '@mui/material';
+
+/**
+ * Outline-only crown glyph. Inherits the surrounding text color via
+ * currentColor so callers can tint it (e.g. BTC-orange) without prop drilling.
+ */
+const CrownIcon: React.FC<{
+  size?: number;
+  color?: string;
+  sx?: SxProps<Theme>;
+}> = ({ size = 12, color, sx }) => (
+  <Box
+    component="span"
+    sx={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      verticalAlign: '-1px',
+      mr: 0.5,
+      color: color ?? 'asset.btc',
+      ...sx,
+    }}
+    aria-hidden
+  >
+    <svg
+      width={size}
+      height={(size * 10) / 12}
+      viewBox="0 0 14 11"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.4"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    >
+      <path d="M1 8 L2 2 L5 5 L7 1 L9 5 L12 2 L13 8 L1 8" />
+      <line x1="1" y1="10" x2="13" y2="10" />
+    </svg>
+  </Box>
+);
+
+export default CrownIcon;
diff --git a/src/components/miners/CrownRateChart.tsx b/src/components/miners/CrownRateChart.tsx
new file mode 100644
index 0000000..12301d2
--- /dev/null
+++ b/src/components/miners/CrownRateChart.tsx
@@ -0,0 +1,380 @@
+import React, { useMemo, useRef, useState } from 'react';
+import {
+  Box,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material';
+import {
+  useCrownRateHistory,
+  useMinerRateHistory,
+  type CrownRateHistoryRow,
+  type Direction,
+  type MinerRateHistoryRow,
+} from '../../api';
+import { FONTS } from '../../theme';
+
+const W = 800;
+const H = 200;
+const ML = 56;
+const MR = 84;
+const MT = 14;
+const MB = 26;
+const INNER_W = W - ML - MR;
+const INNER_H = H - MT - MB;
+
+type CrownRange = '1h' | '4h' | '24h' | '7d';
+
+const RANGE_BLOCKS: Record<CrownRange, number> = {
+  '1h': 300,
+  '4h': 1200,
+  '24h': 7200,
+  '7d': 50_400,
+};
+
+const niceTicks = (lo: number, hi: number, count = 5): number[] => {
+  if (hi === lo) return [lo];
+  const step = (hi - lo) / (count - 1);
+  return Array.from({ length: count }, (_, i) => lo + i * step);
+};
+
+const CrownRateChart: React.FC<{
+  direction: Direction;
+  range: CrownRange;
+  onRangeChange: (r: CrownRange) => void;
+  minerHotkey?: string;
+}> = ({ direction, range, onRangeChange, minerHotkey }) => {
+  const blocks = RANGE_BLOCKS[range];
+  const { data } = useCrownRateHistory({ direction });
+  const { data: minerRates } = useMinerRateHistory(minerHotkey ?? '', {});
+
+  const points = useMemo(() => data ?? [], [data]);
+  const head = points.length ? Math.max(...points.map((p) => p.block)) : 0;
+  const lo = Math.max(0, head - blocks + 1);
+  const windowPoints = useMemo<CrownRateHistoryRow[]>(
+    () => points.filter((p) => p.block >= lo && p.block <= head),
+    [points, lo, head],
+  );
+
+  const minerOverlay = useMemo<MinerRateHistoryRow[]>(() => {
+    if (!minerHotkey) return [];
+    return (minerRates ?? []).filter(
+      (r) =>
+        r.fromChain === (direction === 'BTC-TAO' ? 'btc' : 'tao') &&
+        r.toChain === (direction === 'BTC-TAO' ? 'tao' : 'btc') &&
+        r.block >= lo &&
+        r.block <= head,
+    );
+  }, [minerRates, minerHotkey, direction, lo, head]);
+
+  const allRates = useMemo(
+    () => [
+      ...windowPoints.map((p) => p.rate),
+      ...minerOverlay.map((m) => m.rate),
+    ],
+    [windowPoints, minerOverlay],
+  );
+  const yMin = allRates.length ? Math.min(...allRates) - 1 : 0;
+  const yMax = allRates.length ? Math.max(...allRates) + 1 : 1;
+
+  const mapX = (block: number) =>
+    head === lo ? ML : ML + ((block - lo) / (head - lo)) * INNER_W;
+  const mapY = (rate: number) =>
+    yMax === yMin
+      ? MT + INNER_H / 2
+      : MT + ((yMax - rate) / (yMax - yMin)) * INNER_H;
+
+  const crownPath = useMemo(() => {
+    if (!windowPoints.length) return '';
+    let d = `M ${mapX(windowPoints[0].block)} ${mapY(windowPoints[0].rate)}`;
+    for (let i = 1; i < windowPoints.length; i++) {
+      d += ` L ${mapX(windowPoints[i].block)} ${mapY(windowPoints[i - 1].rate)} L ${mapX(windowPoints[i].block)} ${mapY(windowPoints[i].rate)}`;
+    }
+    return d;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowPoints, head, lo, yMin, yMax]);
+
+  const minerPath = useMemo(() => {
+    if (!minerOverlay.length) return '';
+    let d = `M ${mapX(minerOverlay[0].block)} ${mapY(minerOverlay[0].rate)}`;
+    for (let i = 1; i < minerOverlay.length; i++) {
+      d += ` L ${mapX(minerOverlay[i].block)} ${mapY(minerOverlay[i - 1].rate)} L ${mapX(minerOverlay[i].block)} ${mapY(minerOverlay[i].rate)}`;
+    }
+    return d;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [minerOverlay, head, lo, yMin, yMax]);
+
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const [hover, setHover] = useState<{
+    x: number;
+    y: number;
+    pt: CrownRateHistoryRow;
+  } | null>(null);
+
+  const handleMove = (e: React.MouseEvent<SVGSVGElement>) => {
+    if (!svgRef.current || !windowPoints.length) return;
+    const rect = svgRef.current.getBoundingClientRect();
+    const viewX = ((e.clientX - rect.left) / rect.width) * W;
+    if (viewX < ML || viewX > W - MR) {
+      setHover(null);
+      return;
+    }
+    let closest = windowPoints[0];
+    let bestDist = Infinity;
+    for (const p of windowPoints) {
+      const dist = Math.abs(mapX(p.block) - viewX);
+      if (dist < bestDist) {
+        bestDist = dist;
+        closest = p;
+      }
+    }
+    setHover({ x: mapX(closest.block), y: mapY(closest.rate), pt: closest });
+  };
+
+  const yTicks = niceTicks(yMin, yMax, 5);
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        backgroundColor: 'surface.light',
+        border: '1px solid',
+        borderColor: 'divider',
+        p: 2.5,
+        mb: 3,
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ mb: 1 }}
+      >
+        <Typography
+          variant="monoSmall"
+          sx={{
+            fontSize: '0.7rem',
+            letterSpacing: '0.22em',
+            color: 'text.secondary',
+          }}
+        >
+          Crown Rate · {direction} · per block
+        </Typography>
+        <ToggleButtonGroup
+          exclusive
+          size="small"
+          value={range}
+          onChange={(_e, v) => v && onRangeChange(v)}
+        >
+          {(Object.keys(RANGE_BLOCKS) as CrownRange[]).map((r) => (
+            <ToggleButton
+              key={r}
+              value={r}
+              sx={{ fontFamily: FONTS.mono, fontSize: '0.7rem' }}
+            >
+              {r}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+      </Stack>
+      <Box sx={{ position: 'relative' }}>
+        <svg
+          ref={svgRef}
+          viewBox={`0 0 ${W} ${H}`}
+          preserveAspectRatio="none"
+          style={{
+            width: '100%',
+            height: 200,
+            display: 'block',
+            cursor: 'crosshair',
+          }}
+          onMouseMove={handleMove}
+          onMouseLeave={() => setHover(null)}
+        >
+          {yTicks.map((t) => (
+            <g key={t}>
+              <line
+                x1={ML}
+                y1={mapY(t)}
+                x2={W - MR}
+                y2={mapY(t)}
+                stroke="rgba(255,255,255,0.06)"
+                vectorEffect="non-scaling-stroke"
+              />
+              <text
+                x={ML - 10}
+                y={mapY(t) + 3}
+                textAnchor="end"
+                fontFamily="DM Mono"
+                fontSize="10"
+                fill="rgba(255,255,255,0.4)"
+              >
+                {t.toFixed(0)}
+              </text>
+            </g>
+          ))}
+          <text
+            x={ML}
+            y={H - 8}
+            fontFamily="DM Mono"
+            fontSize="10"
+            fill="rgba(255,255,255,0.4)"
+          >
+            #{lo.toLocaleString()}
+          </text>
+          <text
+            x={W - MR}
+            y={H - 8}
+            textAnchor="end"
+            fontFamily="DM Mono"
+            fontSize="10"
+            fill="rgba(255,255,255,0.4)"
+          >
+            #{head.toLocaleString()}
+          </text>
+          <line
+            x1={ML}
+            y1={MT + INNER_H}
+            x2={W - MR}
+            y2={MT + INNER_H}
+            stroke="rgba(255,255,255,0.18)"
+            vectorEffect="non-scaling-stroke"
+          />
+          {crownPath && (
+            <path
+              d={crownPath}
+              fill="none"
+              stroke="#0052ff"
+              strokeWidth="1.6"
+              vectorEffect="non-scaling-stroke"
+              strokeLinejoin="miter"
+            />
+          )}
+          {minerPath && (
+            <path
+              d={minerPath}
+              fill="none"
+              stroke="#90afff"
+              strokeWidth="1.4"
+              strokeDasharray="3,3"
+              vectorEffect="non-scaling-stroke"
+            />
+          )}
+          {hover && (
+            <g pointerEvents="none">
+              <line
+                x1={hover.x}
+                y1={MT}
+                x2={hover.x}
+                y2={MT + INNER_H}
+                stroke="rgba(255,255,255,0.35)"
+                strokeWidth="1"
+                strokeDasharray="2,3"
+                vectorEffect="non-scaling-stroke"
+              />
+              <circle
+                cx={hover.x}
+                cy={hover.y}
+                r="3.5"
+                fill="#0052ff"
+                stroke="#fff"
+                strokeWidth="1"
+              />
+            </g>
+          )}
+          {windowPoints.length > 0 && (
+            <text
+              x={W - MR + 8}
+              y={mapY(windowPoints[windowPoints.length - 1].rate) + 3}
+              fontFamily="DM Mono"
+              fontSize="10"
+              fill="#0052ff"
+            >
+              crown {windowPoints[windowPoints.length - 1].rate}
+            </text>
+          )}
+        </svg>
+        {hover && (
+          <Box
+            sx={{
+              position: 'absolute',
+              left: `${(hover.x / W) * 100}%`,
+              top: 0,
+              transform: 'translate(8px, 0)',
+              backgroundColor: 'surface.main',
+              border: '1px solid',
+              borderColor: 'divider',
+              p: 1,
+              fontFamily: FONTS.mono,
+              fontSize: '0.7rem',
+              pointerEvents: 'none',
+              zIndex: 5,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <div>
+              block <b>#{hover.pt.block.toLocaleString()}</b>
+            </div>
+            <div>
+              crown <b>uid {hover.pt.holderUid ?? '?'}</b> @ {hover.pt.rate}
+            </div>
+          </Box>
+        )}
+        {!windowPoints.length && (
+          <Typography
+            variant="mono"
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'text.disabled',
+              fontSize: '0.75rem',
+            }}
+          >
+            No rate history yet
+          </Typography>
+        )}
+      </Box>
+      {minerHotkey && (
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ mt: 1, fontFamily: FONTS.mono, fontSize: '0.7rem' }}
+        >
+          <span>
+            <Box
+              component="span"
+              sx={{
+                display: 'inline-block',
+                width: 14,
+                height: 2,
+                mr: 0.5,
+                backgroundColor: '#0052ff',
+              }}
+            />
+            crown rate
+          </span>
+          <span>
+            <Box
+              component="span"
+              sx={{
+                display: 'inline-block',
+                width: 14,
+                height: 2,
+                mr: 0.5,
+                backgroundColor: '#90afff',
+                borderTop: '1px dashed #90afff',
+              }}
+            />
+            miner rate
+          </span>
+        </Stack>
+      )}
+    </Box>
+  );
+};
+
+export default CrownRateChart;
diff --git a/src/components/miners/EarningDiagnostic.tsx b/src/components/miners/EarningDiagnostic.tsx
new file mode 100644
index 0000000..6e306d9
--- /dev/null
+++ b/src/components/miners/EarningDiagnostic.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { useMinerDiagnostic, type DiagnosticRow } from '../../api';
+import { FONTS } from '../../theme';
+
+const SEVERITY_COLOR: Record<DiagnosticRow['severity'], string> = {
+  fail: 'error.main',
+  warn: 'secondary.main',
+  ok: 'success.main',
+};
+
+const SEVERITY_ICON: Record<DiagnosticRow['severity'], string> = {
+  fail: '✕',
+  warn: '⚠',
+  ok: '✓',
+};
+
+export const EarningNowBanner: React.FC<{ hotkey: string }> = ({ hotkey }) => {
+  const { data } = useMinerDiagnostic(hotkey);
+  const rows = data ?? [];
+  const top =
+    rows.find((r) => r.severity === 'fail') ??
+    rows.find((r) => r.severity === 'warn');
+
+  const isOk = !top;
+  const headline = isOk
+    ? (rows.find((r) => r.severity === 'ok')?.headline ?? 'Earning normally')
+    : top!.headline;
+  const detail = isOk
+    ? (rows.find((r) => r.severity === 'ok')?.detail ?? '')
+    : top!.detail;
+  const action = isOk ? undefined : top!.action;
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      spacing={2}
+      sx={{
+        py: 2,
+        px: 2.5,
+        mb: 2.5,
+        backgroundColor: isOk ? 'rgba(21,128,61,0.06)' : 'rgba(185,28,28,0.06)',
+        border: '1px solid',
+        borderColor: isOk ? 'rgba(21,128,61,0.3)' : 'rgba(185,28,28,0.3)',
+      }}
+    >
+      <Typography
+        variant="monoSmall"
+        sx={{
+          fontSize: '0.65rem',
+          letterSpacing: '0.22em',
+          color: isOk ? 'success.main' : 'error.main',
+        }}
+      >
+        earning now
+      </Typography>
+      <Typography sx={{ flex: 1, fontSize: '0.9rem' }}>
+        <Box component="span" sx={{ fontWeight: 600 }}>
+          {isOk ? 'Earning.' : 'Not earning.'}
+        </Box>{' '}
+        {headline}
+        {detail && (
+          <Box component="span" sx={{ color: 'text.secondary', ml: 0.5 }}>
+            — {detail}
+          </Box>
+        )}
+      </Typography>
+      {action && (
+        <Button
+          variant="contained"
+          size="small"
+          onClick={() => {
+            if (action.kind === 'cli-command') {
+              navigator.clipboard
+                ?.writeText(action.value)
+                .catch(() => undefined);
+            } else if (action.kind === 'link') {
+              window.open(action.value, '_blank');
+            }
+          }}
+          sx={{
+            fontFamily: FONTS.mono,
+            fontSize: '0.65rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.12em',
+          }}
+        >
+          {action.label}
+        </Button>
+      )}
+    </Stack>
+  );
+};
+
+export const EarningDiagnostic: React.FC<{ hotkey: string }> = ({ hotkey }) => {
+  const { data } = useMinerDiagnostic(hotkey);
+  const rows = data ?? [];
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'surface.light',
+        border: '1px solid',
+        borderColor: 'divider',
+        p: 2.5,
+        mb: 3,
+      }}
+    >
+      <Typography
+        variant="monoSmall"
+        sx={{
+          fontSize: '0.7rem',
+          letterSpacing: '0.22em',
+          color: 'text.secondary',
+          mb: 1.5,
+        }}
+      >
+        Diagnostic
+      </Typography>
+      {rows.map((row, idx) => (
+        <Stack
+          key={row.code + idx}
+          direction="row"
+          spacing={2}
+          sx={{
+            py: 1.75,
+            borderBottom: idx === rows.length - 1 ? 'none' : '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <Box
+            sx={{
+              width: 18,
+              flexShrink: 0,
+              fontFamily: FONTS.mono,
+              fontSize: '1rem',
+              color: SEVERITY_COLOR[row.severity],
+              mt: 0.25,
+            }}
+          >
+            {SEVERITY_ICON[row.severity]}
+          </Box>
+          <Box sx={{ flex: 1, fontSize: '0.9rem', lineHeight: 1.4 }}>
+            <Box component="span" sx={{ fontWeight: 600 }}>
+              {row.headline}
+            </Box>
+            <Typography
+              sx={{
+                color: 'text.disabled',
+                fontSize: '0.8rem',
+                mt: 0.5,
+                fontFamily: FONTS.mono,
+              }}
+            >
+              {row.detail}
+            </Typography>
+          </Box>
+        </Stack>
+      ))}
+    </Box>
+  );
+};
diff --git a/src/components/miners/FilteredMinerSection.tsx b/src/components/miners/FilteredMinerSection.tsx
new file mode 100644
index 0000000..249d77f
--- /dev/null
+++ b/src/components/miners/FilteredMinerSection.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useRef } from 'react';
+import { Box, Stack, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useMinerStats, type Direction, type Range } from '../../api';
+import CrownRateChart from './CrownRateChart';
+import MinerSwapHistory from './MinerSwapHistory';
+import { EarningDiagnostic, EarningNowBanner } from './EarningDiagnostic';
+import { FONTS } from '../../theme';
+
+const HOTKEY_SHORT = (h: string) => `${h.slice(0, 4)}…${h.slice(-4)}`;
+
+const FilteredMinerSection: React.FC<{
+  hotkey: string;
+  direction: Direction;
+  rateRange: '1h' | '4h' | '24h' | '7d';
+  onRateRangeChange: (r: '1h' | '4h' | '24h' | '7d') => void;
+  range: Range;
+}> = ({ hotkey, direction, rateRange, onRateRangeChange, range }) => {
+  const navigate = useNavigate();
+  const { data: stats } = useMinerStats(hotkey, range);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [hotkey]);
+
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        mt: 7,
+        p: 3,
+        border: '1px solid',
+        borderColor: 'divider',
+        borderLeft: '2px solid',
+        borderLeftColor: 'primary.main',
+        backgroundColor: 'rgba(0,82,255,0.04)',
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="baseline"
+        sx={{
+          pb: 2,
+          mb: 2.5,
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Stack direction="row" alignItems="baseline" spacing={1.5}>
+          <Typography
+            sx={{
+              fontFamily: FONTS.mono,
+              fontSize: '0.8rem',
+              letterSpacing: '0.12em',
+              textTransform: 'uppercase',
+            }}
+          >
+            Filtered ·{' '}
+            <Box
+              component="span"
+              sx={{ color: 'primary.main', fontWeight: 500 }}
+            >
+              uid {stats ? '' : '?'}
+            </Box>
+          </Typography>
+          <Typography
+            variant="mono"
+            sx={{ fontSize: '0.7rem', color: 'text.disabled' }}
+          >
+            {HOTKEY_SHORT(hotkey)}
+            {stats?.collateralRao &&
+              ` · collateral ${(Number(stats.collateralRao) / 1e9).toFixed(2)} TAO`}
+            {stats?.activatedAt != null &&
+              ` · activated #${stats.activatedAt.toLocaleString()}`}
+          </Typography>
+        </Stack>
+        <Typography
+          component="button"
+          onClick={() => navigate('/miners')}
+          sx={{
+            fontFamily: FONTS.mono,
+            fontSize: '0.7rem',
+            color: 'text.secondary',
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            '&:hover': { color: 'text.primary' },
+          }}
+        >
+          clear ✕
+        </Typography>
+      </Stack>
+
+      <EarningNowBanner hotkey={hotkey} />
+      <EarningDiagnostic hotkey={hotkey} />
+
+      <Stack direction={{ xs: 'column', md: 'row' }} spacing={3}>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <CrownRateChart
+            direction={direction}
+            range={rateRange}
+            onRangeChange={onRateRangeChange}
+            minerHotkey={hotkey}
+          />
+        </Box>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <MinerSwapHistory hotkey={hotkey} />
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export default FilteredMinerSection;
diff --git a/src/components/miners/MinerLeaderboard.tsx b/src/components/miners/MinerLeaderboard.tsx
new file mode 100644
index 0000000..c90121b
--- /dev/null
+++ b/src/components/miners/MinerLeaderboard.tsx
@@ -0,0 +1,236 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import {
+  useMinerLeaderboard,
+  type LeaderboardRow,
+  type Range,
+} from '../../api';
+import CrownIcon from './CrownIcon';
+import { FONTS } from '../../theme';
+
+const RANGES: Range[] = ['24h', '7d', '30d', '90d', 'all'];
+
+const HOTKEY_SHORT = (h: string) => `${h.slice(0, 4)}…${h.slice(-4)}`;
+
+const formatVolume = (raw: string): string => {
+  const v = parseFloat(raw);
+  if (!Number.isFinite(v) || v === 0) return '0.00 TAO';
+  return `${v.toFixed(2)} TAO`;
+};
+
+const formatSuccess = (row: LeaderboardRow): string => {
+  const total = row.completedSwaps + row.timedOutSwaps;
+  if (total === 0) return '— / 0';
+  return `${row.completedSwaps} / ${total}`;
+};
+
+const TIER_COLORS = [
+  'primary.main',
+  '#4d7dff',
+  '#7f9eff',
+  '#aebeff',
+  '#d2dafe',
+];
+
+const MinerLeaderboard: React.FC<{
+  activeHotkey?: string;
+  range: Range;
+  onRangeChange: (r: Range) => void;
+}> = ({ activeHotkey, range, onRangeChange }) => {
+  const navigate = useNavigate();
+  const { data, isLoading } = useMinerLeaderboard(range);
+  const rows = data ?? [];
+  const topShare = rows[0]?.crownShare ?? 0;
+
+  const handleRowClick = (row: LeaderboardRow) => {
+    navigate(`/miners/${row.hotkey}`);
+    try {
+      const RAW = localStorage.getItem('allways.recentMiners');
+      const parsed: { uid: number; hotkey: string; viewedAt: number }[] = RAW
+        ? JSON.parse(RAW)
+        : [];
+      const next = [
+        { uid: row.uid, hotkey: row.hotkey, viewedAt: Date.now() },
+        ...parsed.filter((m) => m.hotkey !== row.hotkey),
+      ].slice(0, 5);
+      localStorage.setItem('allways.recentMiners', JSON.stringify(next));
+    } catch {
+      /* ignore — storage disabled */
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'surface.light',
+        border: '1px solid',
+        borderColor: 'divider',
+        p: 2.5,
+        mb: 4,
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ mb: 1.5 }}
+      >
+        <Typography
+          variant="monoSmall"
+          sx={{
+            fontSize: '0.7rem',
+            letterSpacing: '0.22em',
+            color: 'text.secondary',
+          }}
+        >
+          Miner Leaderboard
+        </Typography>
+        <Stack direction="row" spacing={0.5}>
+          {RANGES.map((r) => (
+            <Button
+              key={r}
+              size="small"
+              variant={r === range ? 'contained' : 'outlined'}
+              onClick={() => onRangeChange(r)}
+              sx={{
+                minWidth: 0,
+                px: 1.25,
+                py: 0.5,
+                fontFamily: FONTS.mono,
+                fontSize: '0.65rem',
+                letterSpacing: '0.06em',
+                textTransform: 'uppercase',
+                borderColor: 'divider',
+              }}
+            >
+              {r}
+            </Button>
+          ))}
+        </Stack>
+      </Stack>
+      <Table size="small" sx={{ '& th, & td': { borderColor: 'divider' } }}>
+        <TableHead>
+          <TableRow>
+            <TableCell sx={{ width: 22, p: 0, pl: 1.5 }} />
+            <TableCell>#</TableCell>
+            <TableCell>uid</TableCell>
+            <TableCell>hotkey</TableCell>
+            <TableCell>crown share</TableCell>
+            <TableCell>success</TableCell>
+            <TableCell>volume</TableCell>
+            <TableCell>active</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.length === 0 && !isLoading && (
+            <TableRow>
+              <TableCell
+                colSpan={8}
+                sx={{ textAlign: 'center', color: 'text.disabled' }}
+              >
+                No miners registered yet
+              </TableCell>
+            </TableRow>
+          )}
+          {rows.map((row, idx) => {
+            const highlight = activeHotkey === row.hotkey;
+            const sharePct =
+              topShare > 0 ? Math.round((row.crownShare / topShare) * 100) : 0;
+            const tierColor =
+              TIER_COLORS[Math.min(idx, TIER_COLORS.length - 1)];
+            const successColor =
+              row.completedSwaps === 0 && row.timedOutSwaps > 0
+                ? 'error.main'
+                : 'text.primary';
+            const wearsCrown = row.currentCrownDirections.length > 0;
+            return (
+              <TableRow
+                key={row.hotkey}
+                onClick={() => handleRowClick(row)}
+                hover
+                sx={{
+                  cursor: 'pointer',
+                  backgroundColor: highlight
+                    ? 'rgba(0,82,255,0.07)'
+                    : 'transparent',
+                  '&:hover td': { backgroundColor: 'surface.elevated' },
+                  '& td:first-of-type': highlight
+                    ? { boxShadow: 'inset 2px 0 0 var(--color-primary)' }
+                    : undefined,
+                }}
+              >
+                <TableCell
+                  sx={{ width: 22, p: 0, pl: 1.5, textAlign: 'center' }}
+                >
+                  {wearsCrown && <CrownIcon />}
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>{idx + 1}</TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>{row.uid}</TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  {HOTKEY_SHORT(row.hotkey)}
+                </TableCell>
+                <TableCell>
+                  <Stack direction="row" alignItems="center" spacing={1.25}>
+                    <Box
+                      sx={{
+                        display: 'inline-block',
+                        width: 80,
+                        height: 6,
+                        backgroundColor: 'rgba(255,255,255,0.05)',
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          height: '100%',
+                          width: `${sharePct}%`,
+                          backgroundColor: tierColor,
+                        }}
+                      />
+                    </Box>
+                    <Typography
+                      sx={{ fontFamily: FONTS.mono, fontSize: '0.85rem' }}
+                    >
+                      {(row.crownShare * 100).toFixed(0)}%
+                    </Typography>
+                  </Stack>
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono, color: successColor }}>
+                  {formatSuccess(row)}
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  {formatVolume(row.volumeTao)}
+                </TableCell>
+                <TableCell>
+                  <Box
+                    sx={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      backgroundColor: row.isActive
+                        ? 'status.active'
+                        : 'text.disabled',
+                      display: 'inline-block',
+                    }}
+                  />
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+};
+
+export default MinerLeaderboard;
diff --git a/src/components/miners/MinerSwapHistory.tsx b/src/components/miners/MinerSwapHistory.tsx
new file mode 100644
index 0000000..88d70cb
--- /dev/null
+++ b/src/components/miners/MinerSwapHistory.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import { useMinerSwaps } from '../../api';
+import { FONTS } from '../../theme';
+
+const STATUS_COLOR: Record<string, string> = {
+  COMPLETED: 'success.main',
+  TIMED_OUT: 'error.main',
+  FULFILLED: 'status.fulfilled',
+  ACTIVE: 'status.active',
+};
+
+const PILL_BORDER: Record<string, string> = {
+  COMPLETED: 'rgba(21,128,61,0.5)',
+  TIMED_OUT: 'rgba(185,28,28,0.5)',
+};
+
+const fmtDate = (raw: string | null): string => {
+  if (!raw) return '—';
+  const d = new Date(raw);
+  return d.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+const fmtDuration = (
+  initiated: string | null,
+  resolved: string | null,
+): string => {
+  if (!initiated || !resolved) return '—';
+  const ms = new Date(resolved).getTime() - new Date(initiated).getTime();
+  if (!Number.isFinite(ms) || ms < 0) return '—';
+  const mins = Math.round(ms / 60_000);
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  return `${hrs}h ${mins % 60}m`;
+};
+
+const MinerSwapHistory: React.FC<{ hotkey: string }> = ({ hotkey }) => {
+  const { data } = useMinerSwaps(hotkey, { limit: 25 });
+  const rows = data?.rows ?? [];
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'surface.light',
+        border: '1px solid',
+        borderColor: 'divider',
+        p: 2.5,
+      }}
+    >
+      <Typography
+        variant="monoSmall"
+        sx={{
+          fontSize: '0.7rem',
+          letterSpacing: '0.22em',
+          color: 'text.secondary',
+          mb: 1.5,
+        }}
+      >
+        Swap History
+      </Typography>
+      <Table size="small" sx={{ '& th, & td': { borderColor: 'divider' } }}>
+        <TableHead>
+          <TableRow>
+            <TableCell>swap</TableCell>
+            <TableCell>initiated</TableCell>
+            <TableCell>status</TableCell>
+            <TableCell>amount</TableCell>
+            <TableCell>dir</TableCell>
+            <TableCell>dur</TableCell>
+            <TableCell>ext</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.length === 0 && (
+            <TableRow>
+              <TableCell
+                colSpan={7}
+                sx={{ textAlign: 'center', color: 'text.disabled' }}
+              >
+                <Box
+                  sx={{
+                    fontFamily: FONTS.mono,
+                    fontSize: '0.75rem',
+                    color: 'text.disabled',
+                    p: 1.5,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    mt: 1,
+                  }}
+                >
+                  No swaps yet — post a competitive rate to attract them
+                </Box>
+              </TableCell>
+            </TableRow>
+          )}
+          {rows.map((row) => {
+            const taoAmount = row.taoAmount
+              ? parseFloat(row.taoAmount).toFixed(4)
+              : '—';
+            return (
+              <TableRow key={row.swapId}>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  #{row.swapId}
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  {fmtDate(row.initiatedAt)}
+                </TableCell>
+                <TableCell>
+                  <Box
+                    component="span"
+                    sx={{
+                      display: 'inline-block',
+                      px: 1.25,
+                      py: 0.25,
+                      fontFamily: FONTS.mono,
+                      fontSize: '0.65rem',
+                      letterSpacing: '0.08em',
+                      textTransform: 'uppercase',
+                      border: '1px solid',
+                      borderColor: PILL_BORDER[row.status] ?? 'divider',
+                      color: STATUS_COLOR[row.status] ?? 'text.primary',
+                    }}
+                  >
+                    {row.status.replace('_', ' ').toLowerCase()}
+                  </Box>
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  {taoAmount} TAO
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  {row.sourceChain?.toUpperCase()}→
+                  {row.destChain?.toUpperCase()}
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  {fmtDuration(row.initiatedAt, row.resolvedAt)}
+                </TableCell>
+                <TableCell sx={{ fontFamily: FONTS.mono }}>
+                  {row.timeoutExtensionsUsed}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+};
+
+export default MinerSwapHistory;
diff --git a/src/components/miners/NetworkOverviewStats.tsx b/src/components/miners/NetworkOverviewStats.tsx
new file mode 100644
index 0000000..648811a
--- /dev/null
+++ b/src/components/miners/NetworkOverviewStats.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { useNetworkOverview, type Range } from '../../api';
+import { FONTS } from '../../theme';
+
+interface Tile {
+  label: string;
+  value: string;
+  sub: string;
+}
+
+const StatTile: React.FC<{ tile: Tile }> = ({ tile }) => (
+  <Box
+    sx={{
+      backgroundColor: 'surface.light',
+      px: 2.5,
+      py: 2,
+      height: '100%',
+    }}
+  >
+    <Typography
+      variant="monoSmall"
+      sx={{
+        fontSize: '0.6rem',
+        letterSpacing: '0.22em',
+        color: 'text.secondary',
+        mb: 1,
+      }}
+    >
+      {tile.label}
+    </Typography>
+    <Typography
+      sx={{
+        fontFamily: FONTS.mono,
+        fontSize: '1.6rem',
+        fontWeight: 500,
+        lineHeight: 1,
+      }}
+    >
+      {tile.value}
+    </Typography>
+    <Typography
+      sx={{
+        fontFamily: FONTS.mono,
+        fontSize: '0.72rem',
+        color: 'text.disabled',
+        mt: 0.75,
+      }}
+    >
+      {tile.sub}
+    </Typography>
+  </Box>
+);
+
+/**
+ * 4-up network stat tiles. Border lines come from each tile's right/bottom
+ * border (not a parent-bg-as-divider trick) so a shorter tile never reveals
+ * a grey strip beneath the row.
+ */
+const NetworkOverviewStats: React.FC<{ range?: Range }> = ({
+  range = '30d',
+}) => {
+  const { data } = useNetworkOverview(range);
+
+  const volume = data?.volumeTao ? parseFloat(data.volumeTao).toFixed(1) : '—';
+  const swaps =
+    data?.totalSwaps != null ? data.totalSwaps.toLocaleString() : '—';
+  const successPct =
+    data?.networkSuccessRate != null
+      ? (data.networkSuccessRate * 100).toFixed(1)
+      : '—';
+  const activeMiners =
+    data?.activeMiners != null ? `${data.activeMiners}` : '—';
+  const registeredMiners =
+    data?.registeredMiners != null ? `of ${data.registeredMiners} reg` : '';
+  const pairMix = data?.pairMix?.slice(0, 2) ?? [];
+  const pairValue = pairMix.length
+    ? pairMix.map((p) => Math.round(p.pct)).join(' / ')
+    : '—';
+  const pairSub = pairMix.length
+    ? pairMix.map((p) => p.pair).join(' / ')
+    : 'BTC→TAO / TAO→BTC';
+
+  const tiles: Tile[] = [
+    { label: `Volume ${range}`, value: volume, sub: 'TAO' },
+    { label: `Swaps ${range}`, value: swaps, sub: `${successPct}% success` },
+    { label: 'Active miners', value: activeMiners, sub: registeredMiners },
+    { label: `Pair mix ${range}`, value: pairValue, sub: pairSub },
+  ];
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'repeat(2, 1fr)',
+          md: 'repeat(4, 1fr)',
+        },
+        border: '1px solid',
+        borderColor: 'divider',
+        my: 2,
+        '& > *': {
+          borderRight: { sm: '1px solid' },
+          borderBottom: { xs: '1px solid', md: 'none' },
+          borderColor: 'divider',
+        },
+        // last cell in each row should not show a right border; bottom row
+        // shouldn't show a bottom border.
+        '& > *:nth-of-type(2n)': {
+          borderRight: { sm: 'none', md: '1px solid' },
+        },
+        '& > *:nth-of-type(4n)': { borderRight: { md: 'none' } },
+        '& > *:last-of-type': { borderBottom: 'none', borderRight: 'none' },
+        '& > *:nth-last-of-type(2)': { borderBottom: { md: 'none' } },
+      }}
+    >
+      {tiles.map((t) => (
+        <StatTile key={t.label} tile={t} />
+      ))}
+    </Box>
+  );
+};
+
+export default NetworkOverviewStats;
diff --git a/src/components/miners/StickyNetworkHeader.tsx b/src/components/miners/StickyNetworkHeader.tsx
new file mode 100644
index 0000000..21e19e9
--- /dev/null
+++ b/src/components/miners/StickyNetworkHeader.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { Box, Stack, Typography } from '@mui/material';
+import { BlockIndicator } from '../index';
+import { useCurrentCrown, useHaltState } from '../../api';
+import CrownIcon from './CrownIcon';
+import { FONTS } from '../../theme';
+
+const StickyNetworkHeader: React.FC = () => {
+  const { data: crown } = useCurrentCrown();
+  const { data: halt } = useHaltState();
+
+  const segments: React.ReactNode[] = [];
+  if (crown) {
+    for (const dir of ['BTC-TAO', 'TAO-BTC'] as const) {
+      const h = crown[dir];
+      const [from, to] = dir.split('-');
+      segments.push(
+        <Stack
+          key={dir}
+          direction="row"
+          spacing={0.5}
+          alignItems="center"
+          sx={{ color: 'text.secondary' }}
+        >
+          <CrownIcon />
+          <Typography variant="mono" sx={{ fontSize: '0.72rem' }}>
+            {from}
+            <Box component="span" sx={{ mx: 0.5, color: 'text.disabled' }}>
+              →
+            </Box>
+            {to}
+          </Typography>
+          {h.uid != null ? (
+            <Typography
+              variant="mono"
+              sx={{
+                fontSize: '0.72rem',
+                color: 'text.primary',
+                ml: 0.5,
+                fontWeight: 500,
+              }}
+            >
+              uid {h.uid}
+              {h.rate != null && <> @ {h.rate}</>}
+            </Typography>
+          ) : (
+            <Typography
+              variant="mono"
+              sx={{ fontSize: '0.72rem', color: 'text.disabled', ml: 0.5 }}
+            >
+              none
+            </Typography>
+          )}
+        </Stack>,
+      );
+    }
+  }
+
+  const halted = halt?.halted ?? false;
+
+  return (
+    <Box
+      sx={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 20,
+        backgroundColor: 'background.default',
+        borderBottom: '1px solid',
+        borderColor: 'divider',
+        py: 1.5,
+        px: { xs: 2, md: 4 },
+      }}
+    >
+      <Stack
+        direction="row"
+        spacing={3}
+        alignItems="center"
+        sx={{
+          maxWidth: 1400,
+          mx: 'auto',
+          fontFamily: FONTS.mono,
+          fontSize: '0.72rem',
+          color: 'text.secondary',
+          flexWrap: 'wrap',
+          gap: 2,
+        }}
+      >
+        <BlockIndicator />
+        <Stack direction="row" spacing={3} alignItems="center" sx={{ flex: 1 }}>
+          {segments}
+        </Stack>
+        <Stack direction="row" spacing={0.5} alignItems="center">
+          <Box
+            sx={{
+              width: 6,
+              height: 6,
+              borderRadius: '50%',
+              backgroundColor: halted ? 'error.main' : 'status.active',
+            }}
+          />
+          <Typography variant="mono" sx={{ fontSize: '0.72rem' }}>
+            {halted ? 'halted' : 'healthy'}
+          </Typography>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export default StickyNetworkHeader;
diff --git a/src/components/miners/index.ts b/src/components/miners/index.ts
new file mode 100644
index 0000000..9039d07
--- /dev/null
+++ b/src/components/miners/index.ts
@@ -0,0 +1,9 @@
+export { default as CrownIcon } from './CrownIcon';
+export { default as StickyNetworkHeader } from './StickyNetworkHeader';
+export { default as NetworkOverviewStats } from './NetworkOverviewStats';
+export { default as MinerLeaderboard } from './MinerLeaderboard';
+export { default as CrownHistoryGrid } from './CrownHistoryGrid';
+export { default as CrownRateChart } from './CrownRateChart';
+export { default as MinerSwapHistory } from './MinerSwapHistory';
+export { default as FilteredMinerSection } from './FilteredMinerSection';
+export { EarningDiagnostic, EarningNowBanner } from './EarningDiagnostic';
diff --git a/src/components/nav/TopNav.tsx b/src/components/nav/TopNav.tsx
index 0dd43b8..762155d 100644
--- a/src/components/nav/TopNav.tsx
+++ b/src/components/nav/TopNav.tsx
@@ -67,6 +67,9 @@ const TopNav: React.FC = () => {
         location.pathname.startsWith('/swap/')
       );
     }
+    if (to === '/miners') {
+      return location.pathname.startsWith('/miners');
+    }
     return location.pathname === to;
   };
 
diff --git a/src/components/nav/links.ts b/src/components/nav/links.ts
index 227d887..d58a9c9 100644
--- a/src/components/nav/links.ts
+++ b/src/components/nav/links.ts
@@ -18,6 +18,7 @@ export const docsUrl = (): string =>
 
 export const NAV_ITEMS: NavItem[] = [
   { label: 'Dashboard', to: '/dashboard' },
+  { label: 'Miners', to: '/miners' },
   { label: 'Exchange', to: '/swap' },
   { label: 'Agents', to: '/agents' },
 ];
diff --git a/src/pages/MinersPage.tsx b/src/pages/MinersPage.tsx
new file mode 100644
index 0000000..28ad359
--- /dev/null
+++ b/src/pages/MinersPage.tsx
@@ -0,0 +1,108 @@
+import React, { useCallback } from 'react';
+import { Stack } from '@mui/material';
+import { useParams, useSearchParams } from 'react-router-dom';
+import {
+  CrownHistoryGrid,
+  CrownRateChart,
+  FilteredMinerSection,
+  MinerLeaderboard,
+  NetworkOverviewStats,
+  Page,
+  SEO,
+  StickyNetworkHeader,
+} from '../components';
+import type { Direction, Range } from '../api';
+
+const isDirection = (v: string | null): v is Direction =>
+  v === 'BTC-TAO' || v === 'TAO-BTC';
+
+const isRange = (v: string | null): v is Range =>
+  ['24h', '7d', '30d', '90d', 'all'].includes(v ?? '');
+
+const isCrownRange = (v: string | null): v is '1h' | '4h' =>
+  v === '1h' || v === '4h';
+
+const isRateRange = (v: string | null): v is '1h' | '4h' | '24h' | '7d' =>
+  ['1h', '4h', '24h', '7d'].includes(v ?? '');
+
+const MinersPage: React.FC = () => {
+  const { hotkey } = useParams<{ hotkey?: string }>();
+  const [params, setParams] = useSearchParams();
+
+  const range: Range = isRange(params.get('range'))
+    ? (params.get('range') as Range)
+    : '30d';
+  const direction: Direction = isDirection(params.get('pair'))
+    ? (params.get('pair') as Direction)
+    : 'BTC-TAO';
+  const crownRange = isCrownRange(params.get('crownRange'))
+    ? (params.get('crownRange') as '1h' | '4h')
+    : '1h';
+  const rateRange = isRateRange(params.get('rateRange'))
+    ? (params.get('rateRange') as '1h' | '4h' | '24h' | '7d')
+    : '1h';
+  const pan = Number(params.get('pan') ?? '0') || 0;
+
+  const setParam = useCallback(
+    (key: string, value: string | undefined) => {
+      const next = new URLSearchParams(params);
+      if (value === undefined || value === '') {
+        next.delete(key);
+      } else {
+        next.set(key, value);
+      }
+      setParams(next, { replace: true });
+    },
+    [params, setParams],
+  );
+
+  return (
+    <Page title="Miners">
+      <SEO
+        title="Miners"
+        description="Public miner dashboard for Allways — crown share, success rate, and diagnostic detail"
+      />
+      <StickyNetworkHeader />
+      <Stack
+        sx={{
+          px: { xs: 1.5, sm: 2, md: 4 },
+          py: { xs: 2, sm: 3, md: 4 },
+          maxWidth: 1400,
+          mx: 'auto',
+          width: '100%',
+        }}
+      >
+        <NetworkOverviewStats range={range} />
+        <MinerLeaderboard
+          activeHotkey={hotkey}
+          range={range}
+          onRangeChange={(r) => setParam('range', r)}
+        />
+        <CrownHistoryGrid
+          direction={direction}
+          onDirectionChange={(d) => setParam('pair', d)}
+          range={crownRange}
+          onRangeChange={(r) => setParam('crownRange', r)}
+          pan={pan}
+          onPanChange={(p) => setParam('pan', p === 0 ? undefined : String(p))}
+        />
+        <CrownRateChart
+          direction={direction}
+          range={rateRange}
+          onRangeChange={(r) => setParam('rateRange', r)}
+        />
+        {hotkey && (
+          <FilteredMinerSection
+            hotkey={hotkey}
+            direction={direction}
+            rateRange={rateRange}
+            onRateRangeChange={(r) => setParam('rateRange', r)}
+            range={range}
+          />
+        )}
+      </Stack>
+    </Page>
+  );
+};
+
+export default MinersPage;
diff --git a/src/routes.tsx b/src/routes.tsx
index 9601e63..741fb39 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -8,6 +8,7 @@ export type AppRoute = Omit<PathRouteProps, 'path'> & {
 
 const LandingPage = React.lazy(() => import('./pages/LandingPage'));
 const DashboardPage = React.lazy(() => import('./pages/DashboardPage'));
+const MinersPage = React.lazy(() => import('./pages/MinersPage'));
 const SwapPage = React.lazy(() => import('./pages/SwapPage'));
 const SwapDetailPage = React.lazy(() => import('./pages/SwapDetailPage'));
 const ReservationDetailPage = React.lazy(
@@ -22,6 +23,8 @@ const NotFoundPage = React.lazy(() => import('./pages/NotFoundPage'));
 const routesArray: AppRoute[] = [
   { name: 'landing', path: '/', element: <LandingPage /> },
   { name: 'dashboard', path: '/dashboard', element: <DashboardPage /> },
+  { name: 'miners', path: '/miners', element: <MinersPage /> },
+  { name: 'miner-detail', path: '/miners/:hotkey', element: <MinersPage /> },
   { name: 'swap', path: '/swap', element: <SwapPage /> },
   { name: 'swap-detail', path: '/swap/:swapId', element: <SwapDetailPage /> },
   {