diff --git a/src/lib/utils/formatting.test.ts b/src/lib/utils/formatting.test.ts
index bc9a849..7f96d15 100644
--- a/src/lib/utils/formatting.test.ts
+++ b/src/lib/utils/formatting.test.ts
@@ -10,7 +10,7 @@ import {
   formatCurrency, 
   formatEventPrice, 
   formatWalletBalance 
-} from './formatting'
+} from './formatting.js'
 
 // Test data
 const testNumbers = [
diff --git a/test-formatting.html b/test-formatting.html
new file mode 100644
index 0000000..72d6829
--- /dev/null
+++ b/test-formatting.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Formatting Functions Test</title>
+    <style>
+        body {
+            font-family: monospace;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            margin: 20px 0;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .test-result {
+            background: #f8f9fa;
+            padding: 10px;
+            margin: 5px 0;
+            border-left: 4px solid #007bff;
+            font-size: 14px;
+        }
+        .test-result.success {
+            border-left-color: #28a745;
+        }
+        .test-result.error {
+            border-left-color: #dc3545;
+        }
+        h1, h2 {
+            color: #333;
+        }
+        .summary {
+            background: #e9ecef;
+            padding: 15px;
+            border-radius: 5px;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>Formatting Functions Test</h1>
+    <p>This page tests the formatting utility functions for thousand separators and currency formatting.</p>
+    
+    <div class="summary">
+        <h3>Test Summary</h3>
+        <div id="summary"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Number Formatting Tests</h2>
+        <div id="number-tests"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Satoshi Formatting Tests</h2>
+        <div id="sats-tests"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Millisatoshi Formatting Tests</h2>
+        <div id="msats-tests"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Currency Formatting Tests</h2>
+        <div id="currency-tests"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Event Price Formatting Tests</h2>
+        <div id="event-price-tests"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Wallet Balance Formatting Tests</h2>
+        <div id="wallet-balance-tests"></div>
+    </div>
+
+    <script type="module">
+        // Import our formatting functions
+        import { 
+            formatNumber, 
+            formatSats, 
+            formatMsats, 
+            formatCurrency, 
+            formatEventPrice, 
+            formatWalletBalance 
+        } from './src/lib/utils/formatting.js';
+
+        // Test data
+        const testNumbers = [
+            0, 1, 999, 1000, 1001, 9999, 10000, 10001, 99999, 100000, 100001, 999999, 1000000, 1000001, 1234567, 9999999, 10000000
+        ];
+
+        const testSats = [
+            0, 1, 999, 1000, 1001, 9999, 10000, 10001, 99999, 100000, 100001, 999999, 1000000, 1000001, 1234567, 9999999, 10000000
+        ];
+
+        const testMsats = [
+            0, 1000, 999000, 1000000, 1001000, 9999000, 10000000, 10001000, 99999000, 100000000, 100001000, 999999000, 1000000000, 1000001000, 1234567000, 9999999000, 10000000000
+        ];
+
+        const testCurrencies = [
+            { amount: 0, currency: 'USD' },
+            { amount: 1.99, currency: 'USD' },
+            { amount: 999.99, currency: 'USD' },
+            { amount: 1000, currency: 'USD' },
+            { amount: 1001.50, currency: 'USD' },
+            { amount: 9999.99, currency: 'USD' },
+            { amount: 10000, currency: 'USD' },
+            { amount: 0, currency: 'EUR' },
+            { amount: 1.99, currency: 'EUR' },
+            { amount: 999.99, currency: 'EUR' },
+            { amount: 1000, currency: 'EUR' }
+        ];
+
+        const testEventPrices = [
+            { price: 0, currency: 'sats' },
+            { price: 1, currency: 'sats' },
+            { price: 999, currency: 'sats' },
+            { price: 1000, currency: 'sats' },
+            { price: 1001, currency: 'sats' },
+            { price: 9999, currency: 'sats' },
+            { price: 10000, currency: 'sats' },
+            { price: 0, currency: 'USD' },
+            { price: 1.99, currency: 'USD' },
+            { price: 999.99, currency: 'USD' },
+            { price: 1000, currency: 'USD' },
+            { price: 0, currency: 'EUR' },
+            { price: 1.99, currency: 'EUR' },
+            { price: 999.99, currency: 'EUR' },
+            { price: 1000, currency: 'EUR' }
+        ];
+
+        let totalTests = 0;
+        let passedTests = 0;
+        let failedTests = 0;
+
+        function addTestResult(containerId, input, output, expectedPattern) {
+            totalTests++;
+            const container = document.getElementById(containerId);
+            const resultDiv = document.createElement('div');
+            resultDiv.className = 'test-result';
+            
+            // Check if output matches expected pattern (has commas for thousands)
+            const hasCommas = output.includes(',');
+            const isSuccess = hasCommas;
+            
+            if (isSuccess) {
+                passedTests++;
+                resultDiv.classList.add('success');
+            } else {
+                failedTests++;
+                resultDiv.classList.add('error');
+            }
+            
+            resultDiv.innerHTML = `
+                <strong>${input}</strong> → <code>${output}</code>
+                ${isSuccess ? '✅' : '❌'} ${hasCommas ? 'Has thousand separators' : 'Missing thousand separators'}
+            `;
+            
+            container.appendChild(resultDiv);
+        }
+
+        function testFormatNumber() {
+            const container = document.getElementById('number-tests');
+            container.innerHTML = '';
+            
+            testNumbers.forEach(num => {
+                try {
+                    const formatted = formatNumber(num);
+                    addTestResult('number-tests', `${num}`, formatted, /,/);
+                } catch (error) {
+                    addTestResult('number-tests', `${num}`, `ERROR: ${error.message}`, /,/);
+                }
+            });
+        }
+
+        function testFormatSats() {
+            const container = document.getElementById('sats-tests');
+            container.innerHTML = '';
+            
+            testSats.forEach(sats => {
+                try {
+                    const formatted = formatSats(sats);
+                    addTestResult('sats-tests', `${sats} sats`, formatted, /,/);
+                } catch (error) {
+                    addTestResult('sats-tests', `${sats} sats`, `ERROR: ${error.message}`, /,/);
+                }
+            });
+        }
+
+        function testFormatMsats() {
+            const container = document.getElementById('msats-tests');
+            container.innerHTML = '';
+            
+            testMsats.forEach(msats => {
+                try {
+                    const formatted = formatMsats(msats);
+                    addTestResult('msats-tests', `${msats} msats`, formatted, /,/);
+                } catch (error) {
+                    addTestResult('msats-tests', `${msats} msats`, `ERROR: ${error.message}`, /,/);
+                }
+            });
+        }
+
+        function testFormatCurrency() {
+            const container = document.getElementById('currency-tests');
+            container.innerHTML = '';
+            
+            testCurrencies.forEach(({ amount, currency }) => {
+                try {
+                    const formatted = formatCurrency(amount, currency);
+                    addTestResult('currency-tests', `${amount} ${currency}`, formatted, /,/);
+                } catch (error) {
+                    addTestResult('currency-tests', `${amount} ${currency}`, `ERROR: ${error.message}`, /,/);
+                }
+            });
+        }
+
+        function testFormatEventPrice() {
+            const container = document.getElementById('event-price-tests');
+            container.innerHTML = '';
+            
+            testEventPrices.forEach(({ price, currency }) => {
+                try {
+                    const formatted = formatEventPrice(price, currency);
+                    addTestResult('event-price-tests', `${price} ${currency}`, formatted, /,/);
+                } catch (error) {
+                    addTestResult('event-price-tests', `${price} ${currency}`, `ERROR: ${error.message}`, /,/);
+                }
+            });
+        }
+
+        function testFormatWalletBalance() {
+            const container = document.getElementById('wallet-balance-tests');
+            container.innerHTML = '';
+            
+            testMsats.forEach(msats => {
+                try {
+                    const formatted = formatWalletBalance(msats);
+                    addTestResult('wallet-balance-tests', `${msats} msats`, formatted, /,/);
+                } catch (error) {
+                    addTestResult('wallet-balance-tests', `${msats} msats`, `ERROR: ${error.message}`, /,/);
+                }
+            });
+        }
+
+        function updateSummary() {
+            const summaryDiv = document.getElementById('summary');
+            summaryDiv.innerHTML = `
+                <strong>Total Tests:</strong> ${totalTests}<br>
+                <strong>Passed:</strong> <span style="color: #28a745;">${passedTests}</span><br>
+                <strong>Failed:</strong> <span style="color: #dc3545;">${failedTests}</span><br>
+                <strong>Success Rate:</strong> ${totalTests > 0 ? Math.round((passedTests / totalTests) * 100) : 0}%
+            `;
+        }
+
+        function runAllTests() {
+            console.log('Running formatting function tests...');
+            
+            testFormatNumber();
+            testFormatSats();
+            testFormatMsats();
+            testFormatCurrency();
+            testFormatEventPrice();
+            testFormatWalletBalance();
+            
+            updateSummary();
+            
+            console.log('Tests completed!');
+            console.log(`Total: ${totalTests}, Passed: ${passedTests}, Failed: ${failedTests}`);
+        }
+
+        // Run tests when page loads
+        window.addEventListener('load', () => {
+            runAllTests();
+        });
+
+        // Make functions available globally for console testing
+        window.formattingTests = {
+            runAllTests,
+            testFormatNumber,
+            testFormatSats,
+            testFormatMsats,
+            testFormatCurrency,
+            testFormatEventPrice,
+            testFormatWalletBalance
+        };
+    </script>
+</body>
+</html>
