diff --git a/frontend/src/components/gamification/WhaleTracker.tsx b/frontend/src/components/gamification/WhaleTracker.tsx
index 623548b..60c648b 100644
--- a/frontend/src/components/gamification/WhaleTracker.tsx
+++ b/frontend/src/components/gamification/WhaleTracker.tsx
@@ -48,40 +48,43 @@ export default function WhaleTracker() {
         <p className="text-gray-500 text-center py-4">No big bets yet... Be the first whale!</p>
       ) : (
         <div className="space-y-3">
-          {whales.map((whale: WhaleBet) => (
-            <div
-              key={whale.id}
-              className="bg-gradient-to-r from-green-50 to-transparent rounded-lg p-3 border-l-4 border-green-500"
-            >
-              <div className="flex items-start justify-between gap-2">
-                <div className="flex items-center gap-2 min-w-0">
-                  <span className="text-xl">{getWhaleEmoji(whale.amount)}</span>
-                  <div className="min-w-0">
-                    <p className="text-gray-900 font-medium text-sm truncate">
-                      {whale.display_name || whale.username}
+          {whales.map((whale: WhaleBet, index: number) => {
+            const amount = whale.amount ?? 0
+            return (
+              <div
+                key={whale.id ?? `whale-${index}`}
+                className="bg-gradient-to-r from-green-50 to-transparent rounded-lg p-3 border-l-4 border-green-500"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className="text-xl">{getWhaleEmoji(amount)}</span>
+                    <div className="min-w-0">
+                      <p className="text-gray-900 font-medium text-sm truncate">
+                        {whale.display_name || whale.username || 'Unknown'}
+                      </p>
+                      <p className={`text-xs ${TIER_COLORS[whale.tier_name] || 'text-gray-500'}`}>
+                        {whale.tier_name || 'Unranked'}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-green-600 font-bold">
+                      ${amount.toLocaleString()}
                     </p>
-                    <p className={`text-xs ${TIER_COLORS[whale.tier_name] || 'text-gray-500'}`}>
-                      {whale.tier_name}
+                    <p className="text-gray-500 text-xs">
+                      {whale.created_at ? formatDistanceToNow(new Date(whale.created_at), { addSuffix: true }) : 'Recently'}
                     </p>
                   </div>
                 </div>
-                <div className="text-right">
-                  <p className="text-green-600 font-bold">
-                    ${whale.amount.toLocaleString()}
-                  </p>
-                  <p className="text-gray-500 text-xs">
-                    {formatDistanceToNow(new Date(whale.created_at), { addSuffix: true })}
-                  </p>
+                <div className="mt-2 text-xs text-gray-600 truncate">
+                  <span className="text-gray-400">on</span> {whale.event_title || 'Unknown event'}
+                  <span className="ml-2 px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">
+                    {whale.side || '-'}
+                  </span>
                 </div>
               </div>
-              <div className="mt-2 text-xs text-gray-600 truncate">
-                <span className="text-gray-400">on</span> {whale.event_title}
-                <span className="ml-2 px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">
-                  {whale.side}
-                </span>
-              </div>
-            </div>
-          ))}
+            )
+          })}
         </div>
       )}
     </div>
diff --git a/frontend/src/pages/EventDetail.tsx b/frontend/src/pages/EventDetail.tsx
index 6d7324d..0578476 100644
--- a/frontend/src/pages/EventDetail.tsx
+++ b/frontend/src/pages/EventDetail.tsx
@@ -95,14 +95,14 @@ export const EventDetail = () => {
         </div>
 
         {/* Spread Grid - Visual betting grid */}
-        <div className="bg-white rounded-xl shadow-sm border p-6">
+        {/* <div className="bg-white rounded-xl shadow-sm border p-6">
           <h2 className="text-xl font-bold text-gray-900 mb-4">Spread Grid</h2>
           <SpreadGrid
             event={event}
             onBetCreated={handleBetCreated}
             onBetTaken={handleBetTaken}
           />
-        </div>
+        </div> */}
       </div>
     </div>
   )
diff --git a/frontend/test-results/event-detail.png b/frontend/test-results/event-detail.png
deleted file mode 100644
index 28d01b7..0000000
Binary files a/frontend/test-results/event-detail.png and /dev/null differ
diff --git a/frontend/test-results/rewards-page.png b/frontend/test-results/rewards-page.png
new file mode 100644
index 0000000..9e32277
Binary files /dev/null and b/frontend/test-results/rewards-page.png differ
diff --git a/frontend/tests/debug-trading-panel.spec.ts b/frontend/tests/debug-trading-panel.spec.ts
index 3983c3a..e5be3a6 100644
--- a/frontend/tests/debug-trading-panel.spec.ts
+++ b/frontend/tests/debug-trading-panel.spec.ts
@@ -1,46 +1,31 @@
 import { test } from '@playwright/test';
 
-test('capture trading panel screenshot', async ({ page }) => {
-  // Navigate to event detail
-  await page.goto('/events/1', { waitUntil: 'networkidle' });
+test('debug rewards page crash', async ({ page }) => {
+  const errors: string[] = [];
+
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      console.log('[error]', msg.text());
+      errors.push(msg.text());
+    }
+  });
+
+  page.on('pageerror', error => {
+    console.log('Page error:', error.message);
+    errors.push(error.message);
+  });
+
+  // Navigate to rewards page
+  console.log('Navigating to /rewards...');
+  await page.goto('/rewards', { waitUntil: 'domcontentloaded' });
   await page.waitForTimeout(3000);
 
   // Take screenshot
-  await page.screenshot({ path: 'test-results/event-detail.png', fullPage: true });
+  await page.screenshot({ path: 'test-results/rewards-page.png', fullPage: true });
 
-  // Check the spread values being used
-  const spreadInfo = await page.evaluate(() => {
-    // Look for the spread grid to understand the range
-    const spreadGridCells = document.querySelectorAll('.grid button');
-    const spreads: string[] = [];
-    spreadGridCells.forEach(cell => {
-      const text = cell.textContent;
-      if (text && (text.includes('+') || text.includes('-') || text.match(/^\\d/))) {
-        spreads.push(text.substring(0, 10));
-      }
-    });
+  // Check for content
+  const bodyText = await page.locator('body').innerText();
+  console.log('Body text (first 500 chars):', bodyText.substring(0, 500));
 
-    // Check order book sections
-    const orderBookContainer = document.querySelector('.col-span-3');
-    const aboveSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[0];
-    const belowSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[1];
-
-    // Count rows in each section
-    const aboveRows = aboveSection?.querySelectorAll('button').length || 0;
-    const belowRows = belowSection?.querySelectorAll('button').length || 0;
-
-    // Get the official spread from the header
-    const officialSpreadElement = document.querySelector('.text-3xl.font-bold');
-    const officialSpread = officialSpreadElement?.textContent;
-
-    return {
-      officialSpread,
-      aboveRowCount: aboveRows,
-      belowRowCount: belowRows,
-      aboveSectionHTML: aboveSection?.innerHTML?.substring(0, 500) || 'not found',
-      belowSectionHTML: belowSection?.innerHTML?.substring(0, 500) || 'not found',
-    };
-  });
-
-  console.log('Spread info:', JSON.stringify(spreadInfo, null, 2));
+  console.log('All errors:', errors);
 });