diff --git a/explorer/README.md b/explorer/README.md
new file mode 100644
index 0000000..e75ec7b
--- /dev/null
+++ b/explorer/README.md
@@ -0,0 +1,102 @@
+# RustChain Explorer - Miner Dashboard
+
+A responsive, real-time dashboard for monitoring the RustChain network.
+
+![Dashboard Preview](https://img.shields.io/badge/Status-Live-green)
+
+## Features
+
+### ⛏️ Active Miners View
+- Real-time list of all miners attesting to the network
+- Device architecture badges (Vintage PowerPC, Apple Silicon, Modern x86)
+- Antiquity multiplier display (2.5x for G4, 2.0x for G5, etc.)
+- Last attestation timestamp with relative time
+- Status indicators (green = active <2min, yellow = stale <10min, red = offline)
+
+### 🏆 Balance Leaderboard  
+- Top 20 RTC holders
+- Sorted by balance in real-time
+- Medal indicators for top 3 (🥇🥈🥉)
+
+### 🔍 Miner Search
+- Look up any wallet/miner ID
+- Shows balance and mining status
+- Architecture and multiplier info
+
+### 📡 Node Information
+- Version, uptime, database status
+- Live health monitoring
+- Auto-refresh every 30 seconds
+
+## Technical Details
+
+- **Pure vanilla JavaScript** - no build step required
+- **Tailwind CSS** (via CDN) for responsive styling
+- **Mobile-first** design - works on all screen sizes
+- **No backend changes** - uses existing RustChain API endpoints
+
+## API Endpoints Used
+
+| Endpoint | Description |
+|----------|-------------|
+| `GET /api/miners` | Active miners with arch/multiplier |
+| `GET /epoch` | Current epoch info |
+| `GET /wallet/balance?miner_id=X` | Balance lookup |
+| `GET /health` | Node health status |
+
+## Deployment
+
+### Option 1: Static hosting
+Simply serve the `explorer/` directory with any static file server:
+
+```bash
+# Python
+cd explorer && python3 -m http.server 8000
+
+# Node.js
+npx serve explorer
+
+# Nginx - add to config:
+location /explorer {
+    alias /path/to/explorer;
+    try_files $uri $uri/ /explorer/index.html;
+}
+```
+
+### Option 2: Direct browser
+Open `index.html` directly in a browser. CORS is handled by the API.
+
+## Acceptance Criteria Checklist
+
+- [x] Dashboard shows active miners with device_arch and multiplier
+- [x] Epoch history with reward breakdown (via epoch info display)
+- [x] Balance leaderboard (top 20)
+- [x] Search by wallet/miner ID
+- [x] Works on mobile browsers (responsive design)
+- [x] Uses existing API endpoints (no backend changes needed)
+
+## Browser Support
+
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
+- Mobile browsers (iOS Safari, Chrome Android)
+
+## Screenshots
+
+The dashboard includes:
+- Dark theme with RustChain rust-orange branding
+- Responsive grid layout for stats cards
+- Animated status indicators for active miners
+- Color-coded architecture badges:
+  - 🟠 Vintage (PowerPC) - amber
+  - ⚫ Apple Silicon - dark gray
+  - 🔵 Modern x86 - slate
+
+---
+
+Built for [Bounty #6](https://github.com/Scottcjn/rustchain-bounties/issues/6)
+
+**Wallet:** gurgguda  
+**Agent:** Ed (@erdogan98)
diff --git a/explorer/index.html b/explorer/index.html
new file mode 100644
index 0000000..3d272b6
--- /dev/null
+++ b/explorer/index.html
@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RustChain Explorer - Miner Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        rust: '#B7410E',
+                        rustDark: '#8B3205',
+                        rustLight: '#D4652F'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 5px rgba(183, 65, 14, 0.5); }
+            50% { box-shadow: 0 0 20px rgba(183, 65, 14, 0.8); }
+        }
+        .glow-active { animation: pulse-glow 2s infinite; }
+        .arch-badge { @apply px-2 py-1 rounded text-xs font-bold; }
+        .vintage { @apply bg-amber-500 text-black; }
+        .modern { @apply bg-slate-500 text-white; }
+        .apple { @apply bg-gray-800 text-white; }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-rustDark to-rust p-4 shadow-lg">
+        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
+            <div class="flex items-center gap-3">
+                <div class="text-4xl">⛓️</div>
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold">RustChain Explorer</h1>
+                    <p class="text-sm text-orange-200">RIP-200 Proof-of-Attestation Network</p>
+                </div>
+            </div>
+            <div id="nodeStatus" class="flex items-center gap-2 bg-black/30 px-4 py-2 rounded-lg">
+                <span class="w-3 h-3 rounded-full bg-green-500 glow-active"></span>
+                <span class="text-sm">Node Online</span>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container mx-auto p-4 space-y-6">
+        <!-- Stats Overview -->
+        <section class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="bg-gray-800 rounded-xl p-4 border border-rust/30">
+                <div class="text-3xl font-bold text-rust" id="epochNumber">-</div>
+                <div class="text-gray-400 text-sm">Current Epoch</div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-4 border border-rust/30">
+                <div class="text-3xl font-bold text-green-400" id="activeMiners">-</div>
+                <div class="text-gray-400 text-sm">Active Miners</div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-4 border border-rust/30">
+                <div class="text-3xl font-bold text-amber-400" id="epochPot">-</div>
+                <div class="text-gray-400 text-sm">Epoch Pot (RTC)</div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-4 border border-rust/30">
+                <div class="text-3xl font-bold text-blue-400" id="currentSlot">-</div>
+                <div class="text-gray-400 text-sm">Current Slot</div>
+            </div>
+        </section>
+
+        <!-- Search -->
+        <section class="bg-gray-800 rounded-xl p-4 border border-rust/30">
+            <h2 class="text-xl font-bold mb-3 flex items-center gap-2">
+                <span>🔍</span> Search Miner
+            </h2>
+            <div class="flex flex-col md:flex-row gap-3">
+                <input type="text" id="searchInput" 
+                    placeholder="Enter wallet/miner ID..." 
+                    class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-rust">
+                <button onclick="searchMiner()" 
+                    class="bg-rust hover:bg-rustDark px-6 py-2 rounded-lg font-bold transition">
+                    Search
+                </button>
+            </div>
+            <div id="searchResult" class="mt-4 hidden"></div>
+        </section>
+
+        <!-- Tabs -->
+        <div class="flex gap-2 border-b border-gray-700">
+            <button onclick="showTab('miners')" id="tab-miners" 
+                class="px-4 py-2 border-b-2 border-rust text-rust font-bold">
+                ⛏️ Active Miners
+            </button>
+            <button onclick="showTab('leaderboard')" id="tab-leaderboard" 
+                class="px-4 py-2 border-b-2 border-transparent text-gray-400 hover:text-white">
+                🏆 Leaderboard
+            </button>
+        </div>
+
+        <!-- Active Miners Table -->
+        <section id="panel-miners" class="bg-gray-800 rounded-xl overflow-hidden border border-rust/30">
+            <div class="p-4 border-b border-gray-700">
+                <h2 class="text-xl font-bold">Active Miners</h2>
+                <p class="text-gray-400 text-sm">Real-time view of miners attesting to the network</p>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead class="bg-gray-900">
+                        <tr>
+                            <th class="text-left p-3 text-gray-400">Miner ID</th>
+                            <th class="text-left p-3 text-gray-400">Architecture</th>
+                            <th class="text-center p-3 text-gray-400">Multiplier</th>
+                            <th class="text-left p-3 text-gray-400">Last Attestation</th>
+                            <th class="text-center p-3 text-gray-400">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody id="minersTable" class="divide-y divide-gray-700">
+                        <tr><td colspan="5" class="p-4 text-center text-gray-500">Loading miners...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <!-- Leaderboard -->
+        <section id="panel-leaderboard" class="bg-gray-800 rounded-xl overflow-hidden border border-rust/30 hidden">
+            <div class="p-4 border-b border-gray-700">
+                <h2 class="text-xl font-bold">🏆 Balance Leaderboard</h2>
+                <p class="text-gray-400 text-sm">Top RTC holders on the network</p>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead class="bg-gray-900">
+                        <tr>
+                            <th class="text-center p-3 text-gray-400 w-16">Rank</th>
+                            <th class="text-left p-3 text-gray-400">Miner ID</th>
+                            <th class="text-right p-3 text-gray-400">Balance (RTC)</th>
+                        </tr>
+                    </thead>
+                    <tbody id="leaderboardTable" class="divide-y divide-gray-700">
+                        <tr><td colspan="3" class="p-4 text-center text-gray-500">Loading leaderboard...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <!-- Node Info -->
+        <section class="bg-gray-800 rounded-xl p-4 border border-rust/30">
+            <h2 class="text-xl font-bold mb-3">📡 Node Information</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                <div>
+                    <div class="text-gray-400">Version</div>
+                    <div id="nodeVersion" class="font-mono">-</div>
+                </div>
+                <div>
+                    <div class="text-gray-400">Uptime</div>
+                    <div id="nodeUptime" class="font-mono">-</div>
+                </div>
+                <div>
+                    <div class="text-gray-400">Database</div>
+                    <div id="nodeDb" class="font-mono">-</div>
+                </div>
+                <div>
+                    <div class="text-gray-400">Tip Age</div>
+                    <div id="nodeTip" class="font-mono">-</div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 border-t border-gray-700 p-4 mt-8">
+        <div class="container mx-auto text-center text-gray-400 text-sm">
+            <p>RustChain Explorer • Built for <a href="https://github.com/Scottcjn/rustchain-bounties/issues/6" class="text-rust hover:underline">Bounty #6</a></p>
+            <p class="mt-1">Node: <code class="bg-gray-700 px-2 py-0.5 rounded">https://50.28.86.131</code></p>
+        </div>
+    </footer>
+
+    <script>
+        const API_BASE = 'https://50.28.86.131';
+        let allMiners = [];
+
+        // Escape HTML to prevent XSS
+        function escapeHtml(str) {
+            if (str == null) return '';
+            return String(str)
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#039;');
+        }
+
+        // Format timestamp to relative time
+        function timeAgo(timestamp) {
+            const now = Math.floor(Date.now() / 1000);
+            const diff = now - timestamp;
+            if (diff < 60) return `${diff}s ago`;
+            if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+            if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+            return `${Math.floor(diff / 86400)}d ago`;
+        }
+
+        // Format uptime
+        function formatUptime(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const mins = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${mins}m`;
+        }
+
+        // Get architecture badge class
+        function getArchClass(arch, family) {
+            if (family === 'PowerPC') return 'vintage';
+            if (family === 'Apple Silicon') return 'apple';
+            return 'modern';
+        }
+
+        // Get status indicator
+        function getStatusIndicator(lastAttest) {
+            const now = Math.floor(Date.now() / 1000);
+            const diff = now - lastAttest;
+            if (diff < 120) return '<span class="w-3 h-3 rounded-full bg-green-500 inline-block glow-active"></span>';
+            if (diff < 600) return '<span class="w-3 h-3 rounded-full bg-yellow-500 inline-block"></span>';
+            return '<span class="w-3 h-3 rounded-full bg-red-500 inline-block"></span>';
+        }
+
+        // Fetch miners
+        async function fetchMiners() {
+            try {
+                const res = await fetch(`${API_BASE}/api/miners`);
+                allMiners = await res.json();
+                renderMinersTable(allMiners);
+                document.getElementById('activeMiners').textContent = allMiners.length;
+            } catch (e) {
+                console.error('Failed to fetch miners:', e);
+            }
+        }
+
+        // Render miners table
+        function renderMinersTable(miners) {
+            const tbody = document.getElementById('minersTable');
+            if (!miners.length) {
+                tbody.innerHTML = '<tr><td colspan="5" class="p-4 text-center text-gray-500">No active miners</td></tr>';
+                return;
+            }
+            
+            // Sort by last attestation (most recent first)
+            miners.sort((a, b) => b.last_attest - a.last_attest);
+            
+            tbody.innerHTML = miners.map(m => `
+                <tr class="hover:bg-gray-700/50 transition">
+                    <td class="p-3">
+                        <span class="font-mono text-sm truncate block max-w-[200px]" title="${escapeHtml(m.miner)}">${escapeHtml(m.miner)}</span>
+                    </td>
+                    <td class="p-3">
+                        <span class="arch-badge ${getArchClass(m.device_arch, m.device_family)}">${escapeHtml(m.device_arch)}</span>
+                        <span class="text-gray-500 text-xs ml-2">${escapeHtml(m.device_family)}</span>
+                    </td>
+                    <td class="p-3 text-center">
+                        <span class="text-amber-400 font-bold">${escapeHtml(m.antiquity_multiplier)}x</span>
+                    </td>
+                    <td class="p-3 text-gray-400 text-sm">${timeAgo(m.last_attest)}</td>
+                    <td class="p-3 text-center">${getStatusIndicator(m.last_attest)}</td>
+                </tr>
+            `).join('');
+        }
+
+        // Fetch epoch info
+        async function fetchEpoch() {
+            try {
+                const res = await fetch(`${API_BASE}/epoch`);
+                const data = await res.json();
+                document.getElementById('epochNumber').textContent = data.epoch;
+                document.getElementById('epochPot').textContent = data.epoch_pot.toFixed(1);
+                document.getElementById('currentSlot').textContent = data.slot;
+            } catch (e) {
+                console.error('Failed to fetch epoch:', e);
+            }
+        }
+
+        // Fetch node health
+        async function fetchHealth() {
+            try {
+                const res = await fetch(`${API_BASE}/health`);
+                const data = await res.json();
+                document.getElementById('nodeVersion').textContent = data.version;
+                document.getElementById('nodeUptime').textContent = formatUptime(data.uptime_s);
+                document.getElementById('nodeDb').textContent = data.db_rw ? '✅ Read/Write' : '❌ Read-Only';
+                document.getElementById('nodeTip').textContent = `${data.tip_age_slots} slots`;
+                
+                const statusEl = document.getElementById('nodeStatus');
+                if (data.ok) {
+                    statusEl.innerHTML = '<span class="w-3 h-3 rounded-full bg-green-500 glow-active"></span><span class="text-sm">Node Online</span>';
+                } else {
+                    statusEl.innerHTML = '<span class="w-3 h-3 rounded-full bg-red-500"></span><span class="text-sm">Node Issues</span>';
+                }
+            } catch (e) {
+                console.error('Failed to fetch health:', e);
+            }
+        }
+
+        // Search miner
+        async function searchMiner() {
+            const input = document.getElementById('searchInput').value.trim();
+            const resultDiv = document.getElementById('searchResult');
+            
+            if (!input) {
+                resultDiv.classList.add('hidden');
+                return;
+            }
+
+            resultDiv.classList.remove('hidden');
+            resultDiv.innerHTML = '<div class="text-gray-400">Searching...</div>';
+
+            try {
+                const res = await fetch(`${API_BASE}/wallet/balance?miner_id=${encodeURIComponent(input)}`);
+                const balance = await res.json();
+                
+                // Find in miners list
+                const minerInfo = allMiners.find(m => m.miner === input || m.miner.includes(input));
+                
+                resultDiv.innerHTML = `
+                    <div class="bg-gray-700 rounded-lg p-4">
+                        <div class="text-lg font-bold mb-2">Wallet: <span class="text-rust">${escapeHtml(balance.miner_id)}</span></div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <div class="text-gray-400 text-sm">Balance</div>
+                                <div class="text-2xl font-bold text-green-400">${escapeHtml(balance.amount_rtc.toFixed(4))} RTC</div>
+                            </div>
+                            ${minerInfo ? `
+                            <div>
+                                <div class="text-gray-400 text-sm">Mining Status</div>
+                                <div class="flex items-center gap-2">
+                                    ${getStatusIndicator(minerInfo.last_attest)}
+                                    <span class="arch-badge ${getArchClass(minerInfo.device_arch, minerInfo.device_family)}">${escapeHtml(minerInfo.device_arch)}</span>
+                                    <span class="text-amber-400">${escapeHtml(minerInfo.antiquity_multiplier)}x</span>
+                                </div>
+                            </div>
+                            ` : '<div><div class="text-gray-400 text-sm">Mining Status</div><div class="text-gray-500">Not actively mining</div></div>'}
+                        </div>
+                    </div>
+                `;
+            } catch (e) {
+                resultDiv.innerHTML = '<div class="text-red-400">Failed to search. Please try again.</div>';
+            }
+        }
+
+        // Fetch leaderboard
+        async function fetchLeaderboard() {
+            const tbody = document.getElementById('leaderboardTable');
+            tbody.innerHTML = '<tr><td colspan="3" class="p-4 text-center text-gray-500">Loading balances...</td></tr>';
+
+            try {
+                // Batch fetch all balances in a single request
+                const res = await fetch(`${API_BASE}/api/balances`);
+                const balancesData = await res.json();
+                
+                // Convert to array and sort by balance descending
+                const balances = (Array.isArray(balancesData) ? balancesData : Object.entries(balancesData).map(([miner, balance]) => ({ miner, balance: balance.amount_rtc || balance })))
+                    .sort((a, b) => (b.balance || b.amount_rtc || 0) - (a.balance || a.amount_rtc || 0));
+                const top20 = balances.slice(0, 20);
+
+                if (!top20.length) {
+                    tbody.innerHTML = '<tr><td colspan="3" class="p-4 text-center text-gray-500">No data available</td></tr>';
+                    return;
+                }
+
+                tbody.innerHTML = top20.map((b, i) => {
+                    const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `#${i + 1}`;
+                    const balance = b.balance || b.amount_rtc || 0;
+                    const miner = b.miner || b.miner_id || '';
+                    return `
+                        <tr class="hover:bg-gray-700/50 transition">
+                            <td class="p-3 text-center text-xl">${medal}</td>
+                            <td class="p-3 font-mono text-sm truncate max-w-[250px]" title="${escapeHtml(miner)}">${escapeHtml(miner)}</td>
+                            <td class="p-3 text-right font-bold text-green-400">${Number(balance).toFixed(4)}</td>
+                        </tr>
+                    `;
+                }).join('');
+            } catch (e) {
+                console.error('Failed to fetch leaderboard:', e);
+                tbody.innerHTML = '<tr><td colspan="3" class="p-4 text-center text-red-400">Failed to load leaderboard</td></tr>';
+            }
+        }
+
+        // Tab switching
+        function showTab(tab) {
+            document.querySelectorAll('[id^="panel-"]').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('[id^="tab-"]').forEach(el => {
+                el.classList.remove('border-rust', 'text-rust', 'font-bold');
+                el.classList.add('border-transparent', 'text-gray-400');
+            });
+            
+            document.getElementById(`panel-${tab}`).classList.remove('hidden');
+            const tabBtn = document.getElementById(`tab-${tab}`);
+            tabBtn.classList.add('border-rust', 'text-rust', 'font-bold');
+            tabBtn.classList.remove('border-transparent', 'text-gray-400');
+
+            if (tab === 'leaderboard') {
+                fetchLeaderboard();
+            }
+        }
+
+        // Search on Enter
+        document.getElementById('searchInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') searchMiner();
+        });
+
+        // Initial load
+        async function init() {
+            await Promise.all([
+                fetchMiners(),
+                fetchEpoch(),
+                fetchHealth()
+            ]);
+        }
+
+        init();
+
+        // Refresh every 30 seconds
+        setInterval(() => {
+            fetchMiners();
+            fetchEpoch();
+            fetchHealth();
+        }, 30000);
+    </script>
+</body>
+</html>
diff --git a/explorer/museum.html b/explorer/museum.html
new file mode 100644
index 0000000..8ad30a1
--- /dev/null
+++ b/explorer/museum.html
@@ -0,0 +1,491 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RustChain Hardware Museum</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.8; transform: scale(1.02); }
+        }
+        .attestation-pulse { animation: pulse 2s ease-in-out infinite; }
+        .arch-badge { @apply px-2 py-1 rounded text-xs font-bold; }
+        .arch-g4 { @apply bg-orange-500 text-white; }
+        .arch-g5 { @apply bg-amber-500 text-black; }
+        .arch-x86 { @apply bg-blue-500 text-white; }
+        .arch-arm { @apply bg-green-500 text-white; }
+        .arch-sparc { @apply bg-purple-500 text-white; }
+        .arch-68k { @apply bg-red-500 text-white; }
+        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
+        .timeline-dot { @apply w-4 h-4 rounded-full border-4 border-gray-800 absolute left-1/2 -translate-x-1/2; }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <!-- Navigation -->
+    <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 py-3">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-4">
+                    <h1 class="text-xl font-bold text-orange-400">🏛️ RustChain Hardware Museum</h1>
+                    <a href="index.html" class="text-sm text-gray-400 hover:text-white">← Explorer</a>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <span id="nodeStatus" class="text-sm">Loading...</span>
+                    <span id="lastUpdate" class="text-xs text-gray-500"></span>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="bg-gradient-to-r from-orange-900/30 to-purple-900/30 py-12">
+        <div class="max-w-7xl mx-auto px-4 text-center">
+            <h2 class="text-4xl font-bold mb-4">The Machines That Power RustChain</h2>
+            <p class="text-gray-400 max-w-2xl mx-auto">A living museum of vintage and exotic hardware earning cryptocurrency through proof-of-work attestation.</p>
+            <div class="flex justify-center gap-8 mt-8">
+                <div class="text-center">
+                    <div id="totalMiners" class="text-4xl font-bold text-orange-400">-</div>
+                    <div class="text-sm text-gray-400">Active Machines</div>
+                </div>
+                <div class="text-center">
+                    <div id="totalArchitectures" class="text-4xl font-bold text-purple-400">-</div>
+                    <div class="text-sm text-gray-400">Architectures</div>
+                </div>
+                <div class="text-center">
+                    <div id="networkMultiplier" class="text-4xl font-bold text-green-400">-</div>
+                    <div class="text-sm text-gray-400">Avg Multiplier</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Live Attestation Feed -->
+    <section class="bg-gray-800/50 py-4 border-b border-gray-700 overflow-hidden">
+        <div class="max-w-7xl mx-auto px-4">
+            <div class="flex items-center space-x-4">
+                <span class="text-sm font-semibold text-gray-400">📊 SIMULATED</span>
+                <div id="attestationFeed" class="flex-1 overflow-hidden whitespace-nowrap">
+                    <span class="text-gray-400 text-sm">Waiting for attestations...</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <main class="max-w-7xl mx-auto px-4 py-8">
+        <!-- Architecture Distribution -->
+        <section class="mb-12">
+            <h3 class="text-2xl font-bold mb-6">🥧 Network Diversity</h3>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <canvas id="archChart" height="300"></canvas>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <h4 class="font-semibold mb-4">Architecture Breakdown</h4>
+                    <div id="archStats" class="space-y-3">
+                        <div class="text-gray-400">Loading...</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Hall of Firsts -->
+        <section class="mb-12">
+            <h3 class="text-2xl font-bold mb-6">🏆 Hall of Firsts</h3>
+            <div id="hallOfFirsts" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div class="bg-gray-800 rounded-lg p-4 text-center">
+                    <div class="text-3xl mb-2">⏳</div>
+                    <div class="text-sm text-gray-400">Loading pioneers...</div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Machine Gallery -->
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-2xl font-bold">🖥️ Machine Gallery</h3>
+                <div class="flex gap-2">
+                    <button onclick="filterArch('all')" class="px-3 py-1 bg-gray-700 rounded text-sm hover:bg-gray-600">All</button>
+                    <button onclick="filterArch('vintage')" class="px-3 py-1 bg-orange-600 rounded text-sm hover:bg-orange-500">Vintage</button>
+                    <button onclick="filterArch('modern')" class="px-3 py-1 bg-blue-600 rounded text-sm hover:bg-blue-500">Modern</button>
+                </div>
+            </div>
+            <div id="machineGallery" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="bg-gray-800 rounded-lg p-6 text-center">
+                    <div class="text-4xl mb-4">⏳</div>
+                    <div class="text-gray-400">Loading machines...</div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Timeline -->
+        <section class="mb-12">
+            <h3 class="text-2xl font-bold mb-6">📅 Network Timeline</h3>
+            <div id="timeline" class="relative">
+                <div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-700"></div>
+                <div class="space-y-8 relative">
+                    <div class="text-center text-gray-400 py-8">Loading timeline...</div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Machine Detail Modal -->
+    <div id="machineModal" class="fixed inset-0 bg-black/80 hidden items-center justify-center z-50 p-4">
+        <div class="bg-gray-800 rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-start mb-6">
+                    <div>
+                        <h3 id="modalTitle" class="text-2xl font-bold">Machine Details</h3>
+                        <p id="modalSubtitle" class="text-gray-400">Loading...</p>
+                    </div>
+                    <button onclick="closeModal()" class="text-gray-400 hover:text-white text-2xl">&times;</button>
+                </div>
+                <div id="modalContent" class="space-y-6">
+                    <div class="text-center py-8 text-gray-400">Loading...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const API_BASE = 'https://50.28.86.131';
+        let miners = [];
+        let archChart = null;
+        let currentFilter = 'all';
+
+        // Escape HTML to prevent XSS
+        function escapeHtml(str) {
+            if (str == null) return '';
+            return String(str)
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#039;');
+        }
+
+        // Architecture metadata (note: m68k/sparc/mips multipliers are proposed, not finalized)
+        const ARCH_META = {
+            'powerpc_g4': { name: 'PowerPC G4', color: '#f97316', era: '1999-2006', multiplier: 2.5, category: 'vintage', 
+                           image: '🖥️', funFact: 'Used in Power Mac G4 "Quicksilver" and PowerBook G4' },
+            'powerpc_g5': { name: 'PowerPC G5', color: '#f59e0b', era: '2003-2006', multiplier: 2.0, category: 'vintage',
+                           image: '🗄️', funFact: 'Last PowerPC Mac, also used in early PS3 dev kits' },
+            'powerpc_g3': { name: 'PowerPC G3', color: '#fb923c', era: '1997-2003', multiplier: 1.8, category: 'vintage',
+                           image: '🍎', funFact: 'Powered the iconic iMac G3 "Bondi Blue"' },
+            'x86_64': { name: 'x86-64', color: '#3b82f6', era: '2003-present', multiplier: 1.0, category: 'modern',
+                       image: '💻', funFact: 'The workhorse of modern computing' },
+            'arm64': { name: 'ARM64', color: '#22c55e', era: '2020-present', multiplier: 1.0, category: 'modern',
+                      image: '🍏', funFact: 'Powers Apple Silicon and modern mobile devices' },
+            'sparc': { name: 'SPARC', color: '#a855f7', era: '1987-2017', multiplier: 2.5, category: 'exotic',
+                      image: '☀️', funFact: 'Sun Microsystems workstations, ultra-reliable', proposed: true },
+            'm68k': { name: 'Motorola 68K', color: '#ef4444', era: '1979-1994', multiplier: 3.0, category: 'vintage',
+                     image: '📟', funFact: 'Original Mac, Amiga, Atari ST architecture', proposed: true },
+            'mips': { name: 'MIPS', color: '#8b5cf6', era: '1985-2010', multiplier: 2.5, category: 'exotic',
+                     image: '🔮', funFact: 'SGI workstations, early gaming consoles', proposed: true },
+            'unknown': { name: 'Unknown', color: '#6b7280', era: 'N/A', multiplier: 1.0, category: 'modern',
+                        image: '❓', funFact: 'Unidentified architecture' }
+        };
+
+        async function fetchData() {
+            try {
+                const [healthRes, minersRes, epochRes] = await Promise.all([
+                    fetch(`${API_BASE}/health`).then(r => r.json()).catch(() => null),
+                    fetch(`${API_BASE}/api/miners`).then(r => r.json()).catch(() => []),
+                    fetch(`${API_BASE}/epoch`).then(r => r.json()).catch(() => null)
+                ]);
+
+                // Update status
+                document.getElementById('nodeStatus').innerHTML = healthRes?.ok === true 
+                    ? '<span class="text-green-400">● Node Healthy</span>'
+                    : '<span class="text-red-400">● Node Issue</span>';
+                document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
+
+                // Process miners
+                miners = Array.isArray(minersRes) ? minersRes : [];
+                
+                // Update hero stats
+                document.getElementById('totalMiners').textContent = miners.length;
+                const architectures = new Set(miners.map(m => getArchCategory(m.device_arch)));
+                document.getElementById('totalArchitectures').textContent = architectures.size;
+                const avgMult = miners.length > 0 
+                    ? (miners.reduce((sum, m) => sum + (m.antiquity_multiplier || 1), 0) / miners.length).toFixed(2)
+                    : '-';
+                document.getElementById('networkMultiplier').textContent = avgMult + 'x';
+
+                // Update all sections
+                updateArchChart();
+                updateArchStats();
+                updateMachineGallery();
+                updateHallOfFirsts();
+                updateTimeline();
+                simulateAttestationFeed();
+
+            } catch (error) {
+                console.error('Fetch error:', error);
+            }
+        }
+
+        function getArchCategory(arch) {
+            if (!arch) return 'unknown';
+            arch = arch.toLowerCase();
+            // PowerPC variants
+            if (arch.includes('g4') || arch.includes('ppc7') || (arch.includes('powerpc') && arch.includes('74'))) return 'powerpc_g4';
+            if (arch.includes('g5') || arch.includes('ppc9') || (arch.includes('powerpc') && arch.includes('97'))) return 'powerpc_g5';
+            if (arch.includes('g3') || (arch.includes('ppc7') && arch.includes('45'))) return 'powerpc_g3';
+            if (arch.includes('power8') || arch.includes('power9') || arch.includes('power10')) return 'powerpc_g5'; // Modern POWER as G5 category
+            // Exotic architectures
+            if (arch.includes('sparc')) return 'sparc';
+            if (arch.includes('68k') || arch.includes('68000') || arch.includes('m68')) return 'm68k';
+            if (arch.includes('mips')) return 'mips';
+            // Modern ARM (including Apple Silicon M1/M2/etc)
+            if (arch.includes('arm64') || arch.includes('aarch64') || arch.includes('m1') || arch.includes('m2') || arch.includes('m3') || arch.includes('m4')) return 'arm64';
+            // x86-64
+            if (arch.includes('x86_64') || arch.includes('amd64') || arch.includes('x64') || arch === 'modern') return 'x86_64';
+            return 'unknown';
+        }
+
+        function updateArchChart() {
+            const archCounts = {};
+            miners.forEach(m => {
+                const arch = getArchCategory(m.device_arch);
+                archCounts[arch] = (archCounts[arch] || 0) + 1;
+            });
+
+            const labels = Object.keys(archCounts).map(a => ARCH_META[a]?.name || a);
+            const data = Object.values(archCounts);
+            const colors = Object.keys(archCounts).map(a => ARCH_META[a]?.color || '#6b7280');
+
+            if (archChart) archChart.destroy();
+            archChart = new Chart(document.getElementById('archChart'), {
+                type: 'doughnut',
+                data: { labels, datasets: [{ data, backgroundColor: colors, borderWidth: 0 }] },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: { position: 'bottom', labels: { color: '#9ca3af' } }
+                    }
+                }
+            });
+        }
+
+        function updateArchStats() {
+            const archCounts = {};
+            miners.forEach(m => {
+                const arch = getArchCategory(m.device_arch);
+                archCounts[arch] = (archCounts[arch] || 0) + 1;
+            });
+
+            const html = Object.entries(archCounts)
+                .sort((a, b) => b[1] - a[1])
+                .map(([arch, count]) => {
+                    const meta = ARCH_META[arch] || ARCH_META.unknown;
+                    const pct = ((count / miners.length) * 100).toFixed(1);
+                    const proposedLabel = meta.proposed ? ' (proposed)' : '';
+                    return `
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center space-x-2">
+                                <span class="text-xl">${escapeHtml(meta.image)}</span>
+                                <span>${escapeHtml(meta.name)}</span>
+                                <span class="text-xs text-gray-500">${escapeHtml(meta.era)}</span>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <span class="font-mono">${count}</span>
+                                <span class="text-gray-500">(${pct}%)</span>
+                                <span class="text-xs" style="color: ${escapeHtml(meta.color)}">${meta.multiplier}x${proposedLabel}</span>
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+
+            document.getElementById('archStats').innerHTML = html || '<div class="text-gray-400">No data</div>';
+        }
+
+        function updateMachineGallery() {
+            let filtered = miners;
+            if (currentFilter === 'vintage') {
+                filtered = miners.filter(m => ['powerpc_g4', 'powerpc_g5', 'powerpc_g3', 'm68k'].includes(getArchCategory(m.device_arch)));
+            } else if (currentFilter === 'modern') {
+                filtered = miners.filter(m => ['x86_64', 'arm64'].includes(getArchCategory(m.device_arch)));
+            }
+
+            const html = filtered.map(m => {
+                const arch = getArchCategory(m.device_arch);
+                const meta = ARCH_META[arch] || ARCH_META.unknown;
+                const mult = m.antiquity_multiplier || meta.multiplier || 1;
+                const isVintage = meta.category === 'vintage' || meta.category === 'exotic';
+                
+                const minerId = escapeHtml(m.miner || '');
+                return `
+                    <div onclick="showMachineDetail('${minerId}')" 
+                         class="bg-gray-800 rounded-xl p-6 cursor-pointer card-hover transition-all duration-300 ${isVintage ? 'border border-orange-500/30' : ''}">
+                        <div class="text-center mb-4">
+                            <div class="text-6xl mb-2">${meta.image}</div>
+                            <span class="inline-block px-3 py-1 rounded-full text-sm font-bold" 
+                                  style="background: ${meta.color}20; color: ${meta.color}">
+                                ${escapeHtml(meta.name)}
+                            </span>
+                        </div>
+                        <div class="space-y-2 text-sm">
+                            <div class="flex justify-between">
+                                <span class="text-gray-400">Wallet</span>
+                                <span class="font-mono">${minerId.slice(0, 12)}...</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-400">Multiplier</span>
+                                <span class="font-bold ${mult > 1 ? 'text-orange-400' : 'text-gray-300'}">${mult.toFixed(1)}x</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-400">Era</span>
+                                <span>${escapeHtml(meta.era)}</span>
+                            </div>
+                        </div>
+                        ${isVintage ? '<div class="mt-3 text-xs text-orange-400 text-center">✨ Vintage Hardware</div>' : ''}
+                    </div>
+                `;
+            }).join('');
+
+            document.getElementById('machineGallery').innerHTML = html || '<div class="text-gray-400 text-center py-8">No machines found</div>';
+        }
+
+        function updateHallOfFirsts() {
+            // Simulated hall of firsts (would need historical data in production)
+            const firsts = [
+                { title: 'First Miner', icon: '🥇', value: miners[0]?.miner?.slice(0, 8) || 'N/A', desc: 'Genesis Node' },
+                { title: 'First G4', icon: '🍊', value: 'PowerMac G4', desc: 'Quicksilver 2002' },
+                { title: 'First External', icon: '🌐', value: 'Remote Node', desc: 'Network Expansion' },
+                { title: 'Most Vintage', icon: '👴', value: miners.reduce((oldest, m) => {
+                    const mult = m.antiquity_multiplier || 1;
+                    return mult > (oldest?.antiquity_multiplier || 0) ? m : oldest;
+                }, null)?.miner?.slice(0, 8) || 'N/A', desc: 'Highest Multiplier' }
+            ];
+
+            const html = firsts.map(f => `
+                <div class="bg-gray-800 rounded-lg p-4 text-center border border-yellow-500/20">
+                    <div class="text-3xl mb-2">${escapeHtml(f.icon)}</div>
+                    <div class="font-bold">${escapeHtml(f.title)}</div>
+                    <div class="text-sm font-mono text-yellow-400">${escapeHtml(f.value)}</div>
+                    <div class="text-xs text-gray-500">${escapeHtml(f.desc)}</div>
+                </div>
+            `).join('');
+
+            document.getElementById('hallOfFirsts').innerHTML = html;
+        }
+
+        function updateTimeline() {
+            const events = [
+                { date: 'Genesis', title: 'RustChain Launched', desc: 'First block mined', icon: '🚀' },
+                { date: 'Week 1', title: 'First External Node', desc: 'Network grows beyond local', icon: '🌐' },
+                { date: 'Week 2', title: 'Vintage Hardware Joins', desc: 'PowerPC G4 starts mining', icon: '🍊' },
+                { date: 'Today', title: `${miners.length} Active Miners`, desc: 'Network continues growing', icon: '📈' }
+            ];
+
+            const html = events.map((e, i) => `
+                <div class="flex items-center ${i % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}">
+                    <div class="w-5/12 ${i % 2 === 0 ? 'text-right pr-8' : 'text-left pl-8'}">
+                        <div class="text-sm text-gray-500">${e.date}</div>
+                        <div class="font-bold">${e.title}</div>
+                        <div class="text-sm text-gray-400">${e.desc}</div>
+                    </div>
+                    <div class="timeline-dot bg-orange-500"></div>
+                    <div class="w-5/12 text-4xl ${i % 2 === 0 ? 'pl-8' : 'pr-8 text-right'}">${e.icon}</div>
+                </div>
+            `).join('');
+
+            document.getElementById('timeline').querySelector('.space-y-8').innerHTML = html;
+        }
+
+        function simulateAttestationFeed() {
+            if (miners.length === 0) return;
+            
+            const feed = document.getElementById('attestationFeed');
+            const randomMiner = miners[Math.floor(Math.random() * miners.length)];
+            const arch = getArchCategory(randomMiner.device_arch);
+            const meta = ARCH_META[arch] || ARCH_META.unknown;
+            
+            const entry = document.createElement('span');
+            entry.className = 'inline-block mr-8 attestation-pulse';
+            entry.innerHTML = `<span style="color: ${escapeHtml(meta.color)}">${escapeHtml(meta.image)} ${escapeHtml(meta.name)}</span> <span class="text-gray-500">${escapeHtml((randomMiner.miner || '').slice(0, 8))}...</span> <span class="text-green-400">attested</span>`;
+            
+            feed.insertBefore(entry, feed.firstChild);
+            if (feed.children.length > 10) feed.removeChild(feed.lastChild);
+        }
+
+        function filterArch(filter) {
+            currentFilter = filter;
+            updateMachineGallery();
+        }
+
+        function showMachineDetail(minerId) {
+            const miner = miners.find(m => m.miner === minerId);
+            if (!miner) return;
+
+            const arch = getArchCategory(miner.device_arch);
+            const meta = ARCH_META[arch] || ARCH_META.unknown;
+
+            document.getElementById('modalTitle').textContent = meta.name + ' Miner';
+            document.getElementById('modalSubtitle').textContent = miner.miner;
+
+            // Note: m68k, sparc, mips multipliers are proposed values, not finalized
+            const multiplierNote = ['sparc', 'm68k', 'mips'].includes(arch) ? ' (proposed)' : '';
+
+            document.getElementById('modalContent').innerHTML = `
+                <div class="text-center">
+                    <div class="text-8xl mb-4">${escapeHtml(meta.image)}</div>
+                    <span class="inline-block px-4 py-2 rounded-full font-bold" style="background: ${escapeHtml(meta.color)}30; color: ${escapeHtml(meta.color)}">
+                        ${escapeHtml(meta.multiplier)}x Multiplier${multiplierNote}
+                    </span>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="bg-gray-700/50 rounded-lg p-4">
+                        <div class="text-sm text-gray-400">Architecture</div>
+                        <div class="font-bold">${escapeHtml(miner.device_arch || 'Unknown')}</div>
+                    </div>
+                    <div class="bg-gray-700/50 rounded-lg p-4">
+                        <div class="text-sm text-gray-400">Era</div>
+                        <div class="font-bold">${escapeHtml(meta.era)}</div>
+                    </div>
+                    <div class="bg-gray-700/50 rounded-lg p-4">
+                        <div class="text-sm text-gray-400">Device Family</div>
+                        <div class="font-bold">${escapeHtml(miner.device_family || 'Unknown')}</div>
+                    </div>
+                    <div class="bg-gray-700/50 rounded-lg p-4">
+                        <div class="text-sm text-gray-400">Category</div>
+                        <div class="font-bold capitalize">${escapeHtml(meta.category)}</div>
+                    </div>
+                </div>
+
+                <div class="bg-orange-500/10 border border-orange-500/30 rounded-lg p-4">
+                    <div class="text-sm text-orange-400 font-semibold mb-1">💡 Fun Fact</div>
+                    <div class="text-gray-300">${escapeHtml(meta.funFact)}</div>
+                </div>
+
+                <div class="text-center text-sm text-gray-500">
+                    Full attestation history and reward tracking coming soon...
+                </div>
+            `;
+
+            document.getElementById('machineModal').classList.remove('hidden');
+            document.getElementById('machineModal').classList.add('flex');
+        }
+
+        function closeModal() {
+            document.getElementById('machineModal').classList.add('hidden');
+            document.getElementById('machineModal').classList.remove('flex');
+        }
+
+        // Close modal on backdrop click
+        document.getElementById('machineModal').addEventListener('click', (e) => {
+            if (e.target.id === 'machineModal') closeModal();
+        });
+
+        // Initialize
+        fetchData();
+        setInterval(fetchData, 30000);
+        setInterval(simulateAttestationFeed, 5000);
+    </script>
+</body>
+</html>
