diff --git a/app/(dashboard)/activity-timeline-demo/page.tsx b/app/(dashboard)/activity-timeline-demo/page.tsx
index d4956a98..94a7d822 100644
--- a/app/(dashboard)/activity-timeline-demo/page.tsx
+++ b/app/(dashboard)/activity-timeline-demo/page.tsx
@@ -363,7 +363,7 @@ export default function MyPage() {
                   </tr>
                   <tr>
                     <td className="py-3 px-4 text-gray-700">onLoadMore</td>
-                    <td className="py-3 px-4 text-gray-700">{"() => void"}</td>
+                    <td className="py-3 px-4 text-gray-700">{'() => void'}</td>
                     <td className="py-3 px-4 text-gray-500">undefined</td>
                     <td className="py-3 px-4 text-gray-600">Callback when user clicks load more</td>
                   </tr>
diff --git a/app/(dashboard)/disputes/page.tsx b/app/(dashboard)/disputes/page.tsx
index 69c67562..76d31091 100644
--- a/app/(dashboard)/disputes/page.tsx
+++ b/app/(dashboard)/disputes/page.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react"
 import { AlertTriangle, CheckCircle, Filter, Search } from "lucide-react"
 import { DisputePanel } from "@/components/disputes/DisputePanel"
+import { DisputeEvidencePreview } from "@/components/disputes/DisputeEvidencePreview"
 import { mockDisputesByState } from "@/components/disputes/mock-data"
 import type { DisputeData, DisputeState } from "@/types/disputes"
 import { Button } from "@/components/ui/button"
@@ -25,21 +26,21 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { ExternalLink } from "@/components/ExternalLink"
 
-// Type for local disputes mock data
-interface LocalDispute {
-  id: string
-  eventId: string
-  eventTitle: string
-  category: string
-  submittedBy: string
-  submittedDate: string
-  reason: string
-  status: string
-  priority: string
-  evidence: string
-}
+type DisputePriority = "high" | "medium" | "low";
+
+type PendingDispute = {
+  id: string;
+  eventId: string;
+  eventTitle: string;
+  category: string;
+  submittedBy: string;
+  submittedDate: string;
+  reason: string;
+  status: string;
+  priority: DisputePriority;
+  evidence: string;
+};
 
 // Mock data for disputes
 const disputes = [
@@ -123,7 +124,7 @@ export default function DisputesPage() {
   const [searchQuery, setSearchQuery] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
   const [priorityFilter, setPriorityFilter] = useState("all")
-  const [selectedDispute, setSelectedDispute] = useState<LocalDispute | null>(null)
+  const [selectedDispute, setSelectedDispute] = useState<PendingDispute | null>(null)
   const [resolution, setResolution] = useState("")
   const [resolutionNotes, setResolutionNotes] = useState("")
   const [selectedDisputeData, setSelectedDisputeData] = useState<DisputeData>(mockDisputesByState.none)
@@ -141,7 +142,7 @@ export default function DisputesPage() {
     return matchesSearch && matchesStatus && matchesPriority
   })
 
-  const getPriorityBadge = (priority: string) => {
+  const getPriorityBadge = (priority: DisputePriority | string) => {
     switch (priority) {
       case "high":
         return <Badge className="bg-red-500">High</Badge>
@@ -155,9 +156,11 @@ export default function DisputesPage() {
   }
 
   const handleResolve = () => {
+    if (!selectedDispute) return;
+
     // In a real app, you would send this data to your API
     console.log({
-      disputeId: selectedDispute?.id,
+      disputeId: selectedDispute.id,
       resolution,
       notes: resolutionNotes,
     })
@@ -275,13 +278,7 @@ export default function DisputesPage() {
 
                               <div className="space-y-2">
                                 <Label>Evidence</Label>
-                                <div className="flex items-center gap-2">
-                                  <Button variant="outline" size="sm" asChild>
-                                    <ExternalLink href={selectedDispute.evidence}>
-                                      View Evidence
-                                    </ExternalLink>
-                                  </Button>
-                                </div>
+                                <DisputeEvidencePreview evidence={selectedDispute.evidence} />
                               </div>
 
                               <div className="space-y-2">
diff --git a/app/(dashboard)/events/new/page.tsx b/app/(dashboard)/events/new/page.tsx
index 2d469f45..c20027b2 100644
--- a/app/(dashboard)/events/new/page.tsx
+++ b/app/(dashboard)/events/new/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react"
+import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { CalendarIcon, Plus, Trash2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -20,7 +20,7 @@ export default function NewEventPage() {
   const [title, setTitle] = useState("")
   const [description, setDescription] = useState("")
   const [category, setCategory] = useState("")
-  const [deadline, setDeadline] = useState<Date | undefined>(undefined)
+  const [deadline, setDeadline] = useState<Date | null>(null)
   const [options, setOptions] = useState([{ text: "", probability: "" }])
   const [newOption, setNewOption] = useState("")
   const [isPublic, setIsPublic] = useState(true)
@@ -39,7 +39,7 @@ export default function NewEventPage() {
     setOptions(updatedOptions)
   }
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     // In a real app, you would send this data to your API
     console.log({
@@ -64,20 +64,86 @@ export default function NewEventPage() {
 
       <form onSubmit={handleSubmit} className="space-y-8">
         <div className="grid gap-6 md:grid-cols-2">
-          {/* Row 1 Left: Title */}
-          <div className="space-y-2 md:col-start-1 md:row-start-1">
-            <Label htmlFor="title">Event Title</Label>
-            <Input
-              id="title"
-              placeholder="Enter event title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              required
-            />
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="title">Event Title</Label>
+              <Input
+                id="title"
+                placeholder="Enter event title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                placeholder="Describe the prediction event"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                className="min-h-[120px]"
+                required
+              />
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="category">Category</Label>
+                <Select value={category} onValueChange={setCategory} required>
+                  <SelectTrigger id="category">
+                    <SelectValue placeholder="Select category" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Sports">Sports</SelectItem>
+                    <SelectItem value="Finance">Finance</SelectItem>
+                    <SelectItem value="Entertainment">Entertainment</SelectItem>
+                    <SelectItem value="Politics">Politics</SelectItem>
+                    <SelectItem value="Technology">Technology</SelectItem>
+                    <SelectItem value="Other">Other</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="deadline">Deadline</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" className="w-full justify-start text-left font-normal" id="deadline">
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {deadline ? format(deadline, "PPP") : "Select deadline"}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <Calendar mode="single" selected={deadline ?? undefined} onSelect={(date) => setDeadline(date ?? null)} initialFocus />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="visibility">Event Visibility</Label>
+                <Switch id="visibility" checked={isPublic} onCheckedChange={setIsPublic} />
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {isPublic ? "Public - Visible to all users" : "Private - Visible to selected users only"}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="featured">Featured Event</Label>
+                <Switch id="featured" checked={featuredEvent} onCheckedChange={setFeaturedEvent} />
+              </div>
+              <p className="text-sm text-muted-foreground">
+                Featured events appear on the homepage and receive more visibility
+              </p>
+            </div>
           </div>
 
-          {/* Row 1 Right: Outcomes (spans multiple rows) */}
-          <div className="space-y-4 md:col-start-2 md:row-start-1 md:row-span-6">
+          <div className="space-y-4">
             <div>
               <Label>Prediction Options</Label>
               <p className="text-sm text-muted-foreground mb-4">Add the possible outcomes for this prediction event</p>
@@ -148,79 +214,9 @@ export default function NewEventPage() {
               </div>
             </div>
           </div>
-
-          {/* Row 2 Left: Description */}
-          <div className="space-y-2 md:col-start-1 md:row-start-2">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              placeholder="Describe the prediction event"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              className="min-h-[120px]"
-              required
-            />
-          </div>
-
-          {/* Row 3 Left: Category and Deadline */}
-          <div className="grid gap-4 md:grid-cols-2 md:col-start-1 md:row-start-3">
-            <div className="space-y-2">
-              <Label htmlFor="category">Category</Label>
-              <Select value={category} onValueChange={setCategory} required>
-                <SelectTrigger id="category">
-                  <SelectValue placeholder="Select category" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Sports">Sports</SelectItem>
-                  <SelectItem value="Finance">Finance</SelectItem>
-                  <SelectItem value="Entertainment">Entertainment</SelectItem>
-                  <SelectItem value="Politics">Politics</SelectItem>
-                  <SelectItem value="Technology">Technology</SelectItem>
-                  <SelectItem value="Other">Other</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="deadline">Deadline</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" className="w-full justify-start text-left font-normal" id="deadline">
-                    <CalendarIcon className="mr-2 h-4 w-4" />
-                    {deadline ? format(deadline, "PPP") : "Select deadline"}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Calendar mode="single" selected={deadline} onSelect={setDeadline} initialFocus />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-
-          {/* Row 4 Left: Visibility */}
-          <div className="space-y-2 md:col-start-1 md:row-start-4">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="visibility">Event Visibility</Label>
-              <Switch id="visibility" checked={isPublic} onCheckedChange={setIsPublic} />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              {isPublic ? "Public - Visible to all users" : "Private - Visible to selected users only"}
-            </p>
-          </div>
-
-          {/* Row 5 Left: Featured */}
-          <div className="space-y-2 md:col-start-1 md:row-start-5">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="featured">Featured Event</Label>
-              <Switch id="featured" checked={featuredEvent} onCheckedChange={setFeaturedEvent} />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Featured events appear on the homepage and receive more visibility
-            </p>
-          </div>
         </div>
 
-        <div className="flex items-center justify-end gap-4 mt-8">
+        <div className="flex items-center justify-end gap-4">
           <Button type="button" variant="outline" onClick={() => router.push("/events")}>
             Cancel
           </Button>
diff --git a/app/(dashboard)/finances/page.tsx b/app/(dashboard)/finances/page.tsx
index ffee0214..a6cca63b 100644
--- a/app/(dashboard)/finances/page.tsx
+++ b/app/(dashboard)/finances/page.tsx
@@ -1,281 +1,281 @@
-"use client"
-
-import { useState } from "react"
-import type { DateRange } from "react-day-picker"
-import { ArrowDownRight, ArrowUpRight, Calendar, CreditCard, DollarSign, Download, TrendingUp } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { usePrivacy } from '@/context/PrivacyContext';
-import { maskAmount } from '@/utils/maskAmount';
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { Calendar as CalendarComponent } from "@/components/ui/calendar"
-import { MechanicHelp } from "@/components/patterns/MechanicHelp"
-import { platformFeesHelp } from "@/components/patterns/mechanic-help-content"
-import { format } from "date-fns"
-
-// Mock data for financial overview
-const financialData = {
-  totalFees: 42567.89,
-  monthlyFees: 8432.15,
-  weeklyFees: 2145.67,
-  dailyFees: 345.21,
-  feeGrowth: 12.5,
-  transactions: [
-    {
-      id: "1",
-      date: "2023-04-15",
-      eventTitle: "Super Bowl Winner 2023",
-      amount: 1245.67,
-      type: "platform_fee",
-      status: "completed",
-    },
-    {
-      id: "2",
-      date: "2023-04-14",
-      eventTitle: "Oscar Best Picture 2023",
-      amount: 876.32,
-      type: "platform_fee",
-      status: "completed",
-    },
-    {
-      id: "3",
-      date: "2023-04-13",
-      eventTitle: "Bitcoin Price on Jan 1, 2023",
-      amount: 1543.21,
-      type: "platform_fee",
-      status: "completed",
-    },
-    {
-      id: "4",
-      date: "2023-04-12",
-      eventTitle: "UK Prime Minister by End of 2022",
-      amount: 654.87,
-      type: "platform_fee",
-      status: "completed",
-    },
-    {
-      id: "5",
-      date: "2023-04-11",
-      eventTitle: "French Open Men's Singles Winner 2023",
-      amount: 987.65,
-      type: "platform_fee",
-      status: "completed",
-    },
-  ],
-  feeDistribution: [
-    { category: "Sports", percentage: 35, amount: 14898.76 },
-    { category: "Finance", percentage: 25, amount: 10641.97 },
-    { category: "Politics", percentage: 20, amount: 8513.58 },
-    { category: "Entertainment", percentage: 15, amount: 6385.18 },
-    { category: "Technology", percentage: 5, amount: 2128.4 },
-  ],
-}
-
-export default function FinancesPage() {
-  const { hideBalances } = usePrivacy();
-  const [date, setDate] = useState<DateRange | undefined>({
-    from: new Date(2023, 3, 1),
-    to: new Date(2023, 3, 30),
-  })
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold tracking-tight">Financial Overview</h1>
-        <div className="flex items-center gap-2">
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" className="flex items-center gap-2">
-                <Calendar className="h-4 w-4" />
-                {date?.from ? (
-                  date.to ? (
-                    <>
-                      {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
-                    </>
-                  ) : (
-                    format(date.from, "LLL dd, y")
-                  )
-                ) : (
-                  "Select date range"
-                )}
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="end">
-              <CalendarComponent
-                initialFocus
-                mode="range"
-                defaultMonth={date?.from}
-                selected={date}
-                onSelect={(range) => setDate(range)}
-                numberOfMonths={2}
-              />
-            </PopoverContent>
-          </Popover>
-          <Button variant="outline">
-            <Download className="mr-2 h-4 w-4" />
-            Export
-          </Button>
-        </div>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <div className="flex items-center gap-2">
-              <CardTitle className="text-sm font-medium">Total Platform Fees</CardTitle>
-              <MechanicHelp content={platformFeesHelp} />
-            </div>
-            <DollarSign className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div data-numeric="true" className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.totalFees) : financialData.totalFees.toLocaleString()}</div>
-            <div className="flex items-center pt-1 text-xs text-muted-foreground">
-              <TrendingUp className="mr-1 h-3.5 w-3.5 text-green-500" />
-              <span className="text-green-500 tabular-nums">{financialData.feeGrowth}%</span>
-              <span className="ml-1">from last month</span>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Monthly Fees</CardTitle>
-            <CreditCard className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div data-numeric="true" className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.monthlyFees) : financialData.monthlyFees.toLocaleString()}</div>
-            <div className="flex items-center pt-1 text-xs text-muted-foreground">
-              <ArrowUpRight className="mr-1 h-3.5 w-3.5 text-green-500" />
-              <span>April 2023</span>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Weekly Fees</CardTitle>
-            <CreditCard className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div data-numeric="true" className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.weeklyFees) : financialData.weeklyFees.toLocaleString()}</div>
-            <div className="flex items-center pt-1 text-xs text-muted-foreground">
-              <ArrowDownRight className="mr-1 h-3.5 w-3.5 text-red-500" />
-              <span className="text-red-500 tabular-nums">3.2%</span>
-              <span className="ml-1">from last week</span>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Daily Fees</CardTitle>
-            <CreditCard className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div data-numeric="true" className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.dailyFees) : financialData.dailyFees.toLocaleString()}</div>
-            <div className="flex items-center pt-1 text-xs text-muted-foreground">
-              <TrendingUp className="mr-1 h-3.5 w-3.5 text-green-500" />
-              <span className="text-green-500 tabular-nums">8.4%</span>
-              <span className="ml-1">from yesterday</span>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Tabs defaultValue="overview" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="transactions">Transactions</TabsTrigger>
-          <TabsTrigger value="distribution">Fee Distribution</TabsTrigger>
-        </TabsList>
-        <TabsContent value="overview" className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-            <Card className="col-span-4">
-              <CardHeader>
-                <CardTitle>Revenue Over Time</CardTitle>
-                <CardDescription>Platform fee earnings over the selected period</CardDescription>
-              </CardHeader>
-              <CardContent className="pl-2">
-                <div className="h-[300px] w-full bg-muted/25 rounded-md flex items-center justify-center text-muted-foreground">
-                  Revenue Chart Placeholder
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="col-span-3">
-              <CardHeader>
-                <CardTitle>Fee Distribution</CardTitle>
-                <CardDescription>Breakdown by category</CardDescription>
-              </CardHeader>
-              <CardContent className="pl-2">
-                <div className="h-[300px] w-full bg-muted/25 rounded-md flex items-center justify-center text-muted-foreground">
-                  Distribution Chart Placeholder
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-        <TabsContent value="transactions" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent Transactions</CardTitle>
-              <CardDescription>Platform fee transactions for the selected period</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Date</TableHead>
-                    <TableHead>Event</TableHead>
-                    <TableHead>Type</TableHead>
-                    <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {financialData.transactions.map((transaction) => (
-                    <TableRow key={transaction.id}>
-                      <TableCell>{new Date(transaction.date).toLocaleDateString()}</TableCell>
-                      <TableCell className="font-medium">{transaction.eventTitle}</TableCell>
-                      <TableCell>{transaction.type === "platform_fee" ? "Platform Fee" : transaction.type}</TableCell>
-                      <TableCell className="text-right tabular-nums">{hideBalances ? maskAmount(transaction.amount) : transaction.amount.toLocaleString()}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="distribution" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <div className="flex items-center gap-2">
-                <CardTitle>Fee Distribution by Category</CardTitle>
-                <MechanicHelp content={platformFeesHelp} />
-              </div>
-              <CardDescription>Breakdown of platform fees by prediction category</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Category</TableHead>
-                    <TableHead>Percentage</TableHead>
-                    <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {financialData.feeDistribution.map((item) => (
-                    <TableRow key={item.category}>
-                      <TableCell className="font-medium">{item.category}</TableCell>
-                      <TableCell className="tabular-nums">{item.percentage}%</TableCell>
-                      <TableCell className="text-right tabular-nums">${item.amount.toLocaleString()}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
-
+"use client"
+
+import { useState } from "react"
+import type { DateRange } from "react-day-picker"
+import { ArrowDownRight, ArrowUpRight, Calendar, CreditCard, DollarSign, Download, TrendingUp } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { usePrivacy } from '@/context/PrivacyContext';
+import { maskAmount } from '@/utils/maskAmount';
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Calendar as CalendarComponent } from "@/components/ui/calendar"
+import { MechanicHelp } from "@/components/patterns/MechanicHelp"
+import { platformFeesHelp } from "@/components/patterns/mechanic-help-content"
+import { format } from "date-fns"
+
+// Mock data for financial overview
+const financialData = {
+  totalFees: 42567.89,
+  monthlyFees: 8432.15,
+  weeklyFees: 2145.67,
+  dailyFees: 345.21,
+  feeGrowth: 12.5,
+  transactions: [
+    {
+      id: "1",
+      date: "2023-04-15",
+      eventTitle: "Super Bowl Winner 2023",
+      amount: 1245.67,
+      type: "platform_fee",
+      status: "completed",
+    },
+    {
+      id: "2",
+      date: "2023-04-14",
+      eventTitle: "Oscar Best Picture 2023",
+      amount: 876.32,
+      type: "platform_fee",
+      status: "completed",
+    },
+    {
+      id: "3",
+      date: "2023-04-13",
+      eventTitle: "Bitcoin Price on Jan 1, 2023",
+      amount: 1543.21,
+      type: "platform_fee",
+      status: "completed",
+    },
+    {
+      id: "4",
+      date: "2023-04-12",
+      eventTitle: "UK Prime Minister by End of 2022",
+      amount: 654.87,
+      type: "platform_fee",
+      status: "completed",
+    },
+    {
+      id: "5",
+      date: "2023-04-11",
+      eventTitle: "French Open Men's Singles Winner 2023",
+      amount: 987.65,
+      type: "platform_fee",
+      status: "completed",
+    },
+  ],
+  feeDistribution: [
+    { category: "Sports", percentage: 35, amount: 14898.76 },
+    { category: "Finance", percentage: 25, amount: 10641.97 },
+    { category: "Politics", percentage: 20, amount: 8513.58 },
+    { category: "Entertainment", percentage: 15, amount: 6385.18 },
+    { category: "Technology", percentage: 5, amount: 2128.4 },
+  ],
+}
+
+export default function FinancesPage() {
+  const { hideBalances } = usePrivacy();
+  const [date, setDate] = useState<DateRange>({
+    from: new Date(2023, 3, 1),
+    to: new Date(2023, 3, 30),
+  })
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight">Financial Overview</h1>
+        <div className="flex items-center gap-2">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" className="flex items-center gap-2">
+                <Calendar className="h-4 w-4" />
+                {date?.from ? (
+                  date.to ? (
+                    <>
+                      {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
+                    </>
+                  ) : (
+                    format(date.from, "LLL dd, y")
+                  )
+                ) : (
+                  "Select date range"
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="end">
+              <CalendarComponent
+                initialFocus
+                mode="range"
+                defaultMonth={date?.from}
+                selected={date}
+                onSelect={(range) => setDate(range ?? { from: new Date(2023, 3, 1), to: new Date(2023, 3, 30) })}
+                numberOfMonths={2}
+              />
+            </PopoverContent>
+          </Popover>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            Export
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <div className="flex items-center gap-2">
+              <CardTitle className="text-sm font-medium">Total Platform Fees</CardTitle>
+              <MechanicHelp content={platformFeesHelp} />
+            </div>
+            <DollarSign className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.totalFees) : financialData.totalFees.toLocaleString()}</div>
+            <div className="flex items-center pt-1 text-xs text-muted-foreground">
+              <TrendingUp className="mr-1 h-3.5 w-3.5 text-green-500" />
+              <span className="text-green-500">{financialData.feeGrowth}%</span>
+              <span className="ml-1">from last month</span>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Monthly Fees</CardTitle>
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.monthlyFees) : financialData.monthlyFees.toLocaleString()}</div>
+            <div className="flex items-center pt-1 text-xs text-muted-foreground">
+              <ArrowUpRight className="mr-1 h-3.5 w-3.5 text-green-500" />
+              <span>April 2023</span>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Weekly Fees</CardTitle>
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.weeklyFees) : financialData.weeklyFees.toLocaleString()}</div>
+            <div className="flex items-center pt-1 text-xs text-muted-foreground">
+              <ArrowDownRight className="mr-1 h-3.5 w-3.5 text-red-500" />
+              <span className="text-red-500">3.2%</span>
+              <span className="ml-1">from last week</span>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Daily Fees</CardTitle>
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.dailyFees) : financialData.dailyFees.toLocaleString()}</div>
+            <div className="flex items-center pt-1 text-xs text-muted-foreground">
+              <TrendingUp className="mr-1 h-3.5 w-3.5 text-green-500" />
+              <span className="text-green-500">8.4%</span>
+              <span className="ml-1">from yesterday</span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="transactions">Transactions</TabsTrigger>
+          <TabsTrigger value="distribution">Fee Distribution</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+            <Card className="col-span-4">
+              <CardHeader>
+                <CardTitle>Revenue Over Time</CardTitle>
+                <CardDescription>Platform fee earnings over the selected period</CardDescription>
+              </CardHeader>
+              <CardContent className="pl-2">
+                <div className="h-[300px] w-full bg-muted/25 rounded-md flex items-center justify-center text-muted-foreground">
+                  Revenue Chart Placeholder
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="col-span-3">
+              <CardHeader>
+                <CardTitle>Fee Distribution</CardTitle>
+                <CardDescription>Breakdown by category</CardDescription>
+              </CardHeader>
+              <CardContent className="pl-2">
+                <div className="h-[300px] w-full bg-muted/25 rounded-md flex items-center justify-center text-muted-foreground">
+                  Distribution Chart Placeholder
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+        <TabsContent value="transactions" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Transactions</CardTitle>
+              <CardDescription>Platform fee transactions for the selected period</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Event</TableHead>
+                    <TableHead>Type</TableHead>
+                    <TableHead className="text-right">Amount</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {financialData.transactions.map((transaction) => (
+                    <TableRow key={transaction.id}>
+                      <TableCell>{new Date(transaction.date).toLocaleDateString()}</TableCell>
+                      <TableCell className="font-medium">{transaction.eventTitle}</TableCell>
+                      <TableCell>{transaction.type === "platform_fee" ? "Platform Fee" : transaction.type}</TableCell>
+                      <TableCell className="text-right">{hideBalances ? maskAmount(transaction.amount) : transaction.amount.toLocaleString()}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="distribution" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <CardTitle>Fee Distribution by Category</CardTitle>
+                <MechanicHelp content={platformFeesHelp} />
+              </div>
+              <CardDescription>Breakdown of platform fees by prediction category</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Category</TableHead>
+                    <TableHead>Percentage</TableHead>
+                    <TableHead className="text-right">Amount</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {financialData.feeDistribution.map((item) => (
+                    <TableRow key={item.category}>
+                      <TableCell className="font-medium">{item.category}</TableCell>
+                      <TableCell>{item.percentage}%</TableCell>
+                      <TableCell className="text-right">${item.amount.toLocaleString()}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index c993452c..c665c551 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 import { usePathname } from "next/navigation";
 import { Navbar } from "@/components/navbar/Navbar";
 import { Breadcrumbs } from "@/components/navbar/Breadcrumbs";
+import { MobileBottomTabs } from "@/components/navbar/MobileBottomTabs";
 import { ConnectWalletModal } from "@/components/connect-wallet-modal";
 import { getBreadcrumbsForPath } from "@/lib/breadcrumbs";
 import { MobileBottomTabs } from "@/components/navbar/MobileBottomTabs";
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
index 3b231b45..7539e76a 100644
--- a/app/(dashboard)/settings/page.tsx
+++ b/app/(dashboard)/settings/page.tsx
@@ -1,25 +1,16 @@
 "use client"
 
-import { type SyntheticEvent, useMemo, useState, useEffect } from "react"
-import Link from "next/link"
+import { type SyntheticEvent, useMemo, useState } from "react"
 import {
   Bell,
   Eye,
   LayoutGrid,
   ShieldCheck,
   Sparkles,
-  User,
   Wallet,
   Table2,
   LayoutList,
-  Pin,
-  ArrowUp,
-  ArrowDown,
-  AlertCircle,
 } from "lucide-react"
-import { getPinnedActions, savePinnedActions, ALL_AVAILABLE_ACTIONS } from "@/lib/command-palette/pins"
-import { DEFAULT_QUIET_HOURS, useQuietHours, type QuietHoursSettings } from "@/lib/quiet-hours"
-
 
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Badge } from "@/components/ui/badge"
@@ -37,9 +28,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Separator } from "@/components/ui/separator"
 import { Switch } from "@/components/ui/switch"
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { useDensity, densityTokens, type Density, type DensityTokens } from "@/hooks/useDensity"
+import { useDensity, densityTokens, type Density } from "@/hooks/useDensity"
 import { useSoundEnabled } from "@/hooks/useSoundEnabled"
-import { usePrivacy } from '@/context/PrivacyContext';
 import { cn } from "@/lib/utils"
 
 type TimeFormat = "local-12h" | "local-24h" | "utc"
@@ -85,7 +75,7 @@ const densityOptions: Array<{
   label: string
   description: string
   icon: React.ElementType
-  tokens: DensityTokens[keyof DensityTokens]
+  tokens: (typeof densityTokens)[Density]
 }> = [
   {
     value: "cozy",
@@ -111,8 +101,7 @@ const densityOptions: Array<{
 ]
 
 export default function SettingsPage() {
-  const [saveState, setSaveState] = useState<"idle" | "saving" | "saved">("idle")
-  const [saveError, setSaveError] = useState<string | null>(null)
+  const [saveState, setSaveState] = useState<"idle" | "saved">("idle")
   
   // Density from global hook
   const { density, setDensity, tokens: densityTokensCurrent } = useDensity()
@@ -123,50 +112,15 @@ export default function SettingsPage() {
   const [reduceMotion, setReduceMotion] = useState(false)
   const [showNetPayouts, setShowNetPayouts] = useState(true)
   const [showWalletBadge, setShowWalletBadge] = useState(true)
+  const [publicActivity, setPublicActivity] = useState(false)
   const [disputeAlerts, setDisputeAlerts] = useState(true)
   const [oracleDelayAlerts, setOracleDelayAlerts] = useState(true)
   const [priceMovementAlerts, setPriceMovementAlerts] = useState(false)
   const [weeklyDigest, setWeeklyDigest] = useState(true)
   const { hideBalances, setHideBalances } = usePrivacy();
-  const { settings: storedQuietHours, active: quietHoursActive, saveSettings: saveQuietHoursSettings } = useQuietHours()
-  const [quietHours, setQuietHours] = useState<QuietHoursSettings>(DEFAULT_QUIET_HOURS)
-  const [quietHoursDirty, setQuietHoursDirty] = useState(false)
   const [walletAlias, setWalletAlias] = useState(true)
   const [copyWarning, setCopyWarning] = useState(true)
   const { soundEnabled, setSoundEnabled } = useSoundEnabled()
-  const [forceHighContrast, setHighContrast] = useState(() => {
-    if (typeof window !== "undefined") {
-      return localStorage.getItem("force-high-contrast") === "true"
-    }
-    return false
-  })
-
-  useEffect(() => {
-    const root = window.document.documentElement
-    if (forceHighContrast) {
-      root.classList.add("high-contrast")
-    } else {
-      root.classList.remove("high-contrast")
-    }
-    localStorage.setItem("force-high-contrast", forceHighContrast.toString())
-  }, [forceHighContrast])
-
-  useEffect(() => {
-    if (!quietHoursDirty) {
-      setQuietHours(storedQuietHours)
-    }
-  }, [quietHoursDirty, storedQuietHours])
-
-  // Declare missing publicActivity state to resolve compilation reference error
-  const [publicActivity, setPublicActivity] = useState(false)
-
-  // Command palette pinned action configuration state
-  const [pinnedActionIds, setPinnedActionIds] = useState<string[]>([])
-
-  // Load pinned actions on mount
-  useEffect(() => {
-    setPinnedActionIds(getPinnedActions().map((p) => p.id))
-  }, [])
 
   const selectedDensity = useMemo(
     () => densityOptions.find((option) => option.value === density),
@@ -177,58 +131,16 @@ export default function SettingsPage() {
     [notificationPreset]
   )
 
-  const handleSave = async (event: SyntheticEvent) => {
+  const handleSave = (event: SyntheticEvent) => {
     event.preventDefault()
-    if (saveState === "saving") return
-
-    setSaveState("saving")
-    setSaveError(null)
-
-    let attempt = 0
-    const maxRetries = 3
-    let success = false
-
-    while (attempt < maxRetries && !success) {
-      try {
-        await new Promise((resolve, reject) => {
-          setTimeout(() => {
-            if (Math.random() < 0.1) {
-              reject(new Error("Network timeout"))
-            } else {
-              resolve(true)
-            }
-          }, 1000)
-        })
-
-        // Persist pinned actions configure
-        savePinnedActions(pinnedActionIds)
-        saveQuietHoursSettings(quietHours)
-        
-        success = true
-      } catch (err) {
-        attempt++
-        if (attempt >= maxRetries) {
-          setSaveError("Failed to save settings after multiple attempts. Please try again.")
-        } else {
-          await new Promise((r) => setTimeout(r, 1000 * attempt))
-        }
-      }
-    }
-
-    if (success) {
-      setQuietHoursDirty(false)
-      setSaveState("saved")
-      window.setTimeout(() => setSaveState("idle"), 2500)
-    } else {
-      setSaveState("idle")
-    }
+    setSaveState("saved")
+    window.setTimeout(() => setSaveState("idle"), 2500)
   }
 
-
   return (
     <form className="mx-auto flex w-full max-w-6xl flex-col gap-6" onSubmit={handleSave}>
       <div aria-live="polite" aria-atomic="true" className="sr-only">
-        {saveState === "saved" ? "Settings saved" : saveState === "saving" ? "Saving settings..." : ""}
+        {saveState === "saved" ? "Settings saved" : ""}
       </div>
       <div aria-live="polite" aria-atomic="true" className="sr-only" key={String(soundEnabled)}>
         {soundEnabled ? "Sound effects on" : "Sound effects off"}
@@ -239,13 +151,6 @@ export default function SettingsPage() {
           <TabsTrigger value="preferences">Preferences</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
           <TabsTrigger value="privacy">Privacy</TabsTrigger>
-          {/* Account tab links to the dedicated Settings → Account page */}
-          <TabsTrigger value="account" asChild>
-            <Link href="/settings/account" className="flex items-center gap-1">
-              <User className="h-4 w-4" aria-hidden="true" />
-              Account
-            </Link>
-          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="preferences">
@@ -289,12 +194,6 @@ export default function SettingsPage() {
               <AlertDescription>Your settings were saved. Safe defaults remain enabled for wallet privacy.</AlertDescription>
             </Alert>
           ) : null}
-          {saveError ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>{saveError}</AlertDescription>
-            </Alert>
-          ) : null}
 
           <div className="grid gap-6 xl:grid-cols-[1.55fr_1fr]">
             <div className="space-y-6">
@@ -408,114 +307,6 @@ export default function SettingsPage() {
                       checked={showWalletBadge}
                       onCheckedChange={setShowWalletBadge}
                     />
-                    <PreferenceSwitch
-                      id="force-high-contrast"
-                      label="Force high contrast"
-                      description="Overrides the current theme with a high-contrast palette for maximum readability. Recommended for visual impairments."
-                      checked={forceHighContrast}
-                      onCheckedChange={setHighContrast}
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card className="border-border/70">
-                <CardHeader className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <Pin className="h-4 w-4 text-muted-foreground" />
-                    <CardTitle className="text-xl">Command Palette Shortcuts</CardTitle>
-                  </div>
-                  <CardDescription>
-                    Configure and reorder the pinned actions displayed when opening the Command Palette (Cmd/Ctrl+K).
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label className="text-sm font-medium">Active Pinned Actions</Label>
-                    <p className="text-xs text-muted-foreground mb-3">
-                      Select which actions to pin, and use the arrows to define their display order.
-                    </p>
-                    
-                    <div className="space-y-2">
-                      {ALL_AVAILABLE_ACTIONS.map((action) => {
-                        const isPinned = pinnedActionIds.includes(action.id)
-                        const pinIndex = pinnedActionIds.indexOf(action.id)
-
-                        const handleToggle = (checked: boolean) => {
-                          if (checked) {
-                            setPinnedActionIds((prev) => [...prev, action.id])
-                          } else {
-                            setPinnedActionIds((prev) => prev.filter((id) => id !== action.id))
-                          }
-                        }
-
-                        const handleMoveUp = () => {
-                          if (pinIndex <= 0) return
-                          const updated = [...pinnedActionIds]
-                          const temp = updated[pinIndex]
-                          updated[pinIndex] = updated[pinIndex - 1]
-                          updated[pinIndex - 1] = temp
-                          setPinnedActionIds(updated)
-                        }
-
-                        const handleMoveDown = () => {
-                          if (pinIndex < 0 || pinIndex >= pinnedActionIds.length - 1) return
-                          const updated = [...pinnedActionIds]
-                          const temp = updated[pinIndex]
-                          updated[pinIndex] = updated[pinIndex + 1]
-                          updated[pinIndex + 1] = temp
-                          setPinnedActionIds(updated)
-                        }
-
-                        return (
-                          <div
-                            key={action.id}
-                            className="flex items-center justify-between gap-4 rounded-xl border border-border/70 bg-muted/20 p-3 hover:bg-muted/30 transition duration-150"
-                          >
-                            <div className="flex items-center gap-3">
-                              <Switch
-                                id={`pin-${action.id}`}
-                                checked={isPinned}
-                                onCheckedChange={handleToggle}
-                              />
-                              <Label htmlFor={`pin-${action.id}`} className="text-sm font-medium cursor-pointer">
-                                {action.label}
-                                <span className="block text-xs font-normal text-muted-foreground">
-                                  Navigates to {action.url}
-                                </span>
-                              </Label>
-                            </div>
-                            
-                            {isPinned && (
-                              <div className="flex items-center gap-1.5">
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  size="icon"
-                                  className="h-8 w-8"
-                                  disabled={pinIndex === 0}
-                                  onClick={handleMoveUp}
-                                  aria-label={`Move ${action.label} up`}
-                                >
-                                  <ArrowUp className="h-4 w-4" />
-                                </Button>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  size="icon"
-                                  className="h-8 w-8"
-                                  disabled={pinIndex === pinnedActionIds.length - 1}
-                                  onClick={handleMoveDown}
-                                  aria-label={`Move ${action.label} down`}
-                                >
-                                  <ArrowDown className="h-4 w-4" />
-                                </Button>
-                              </div>
-                            )}
-                          </div>
-                        )
-                      })}
-                    </div>
                   </div>
                 </CardContent>
               </Card>
@@ -531,64 +322,6 @@ export default function SettingsPage() {
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-6">
-                  <div className="rounded-2xl border border-border/70 bg-muted/20 p-4">
-                    <div className="flex flex-wrap items-start justify-between gap-3">
-                      <div className="space-y-1">
-                        <Label className="text-sm font-medium">Quiet hours</Label>
-                        <p className="max-w-2xl text-sm leading-relaxed text-muted-foreground">
-                          Suppresses non-critical toasts and pauses ambient motion between these local times. Wallet errors, claim failures, disputes, and actionable warnings still appear.
-                        </p>
-                      </div>
-                      <Badge variant={quietHoursActive ? "secondary" : "outline"}>
-                        {quietHoursActive ? "Active now" : "Inactive now"}
-                      </Badge>
-                    </div>
-
-                    <div className="mt-4 grid gap-4 sm:grid-cols-[1fr_1fr_1.1fr]">
-                      <QuietHoursTimeField
-                        id="quiet-hours-start"
-                        label="Start"
-                        value={quietHours.start}
-                        onChange={(start) => {
-                          setQuietHoursDirty(true)
-                          setQuietHours((current) => ({ ...current, start }))
-                        }}
-                      />
-                      <QuietHoursTimeField
-                        id="quiet-hours-end"
-                        label="End"
-                        value={quietHours.end}
-                        onChange={(end) => {
-                          setQuietHoursDirty(true)
-                          setQuietHours((current) => ({ ...current, end }))
-                        }}
-                      />
-                      <div className="space-y-2">
-                        <Label htmlFor="quiet-hours-timezone">Timezone</Label>
-                        <Select
-                          value={quietHours.tz}
-                          onValueChange={(tz) => {
-                            setQuietHoursDirty(true)
-                            setQuietHours((current) => ({ ...current, tz }))
-                          }}
-                        >
-                          <SelectTrigger id="quiet-hours-timezone">
-                            <SelectValue placeholder="Choose timezone" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="auto">Auto from device</SelectItem>
-                            <SelectItem value="UTC">UTC</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <p className="text-xs leading-relaxed text-muted-foreground">
-                          Stored as {`{ start: "${quietHours.start}", end: "${quietHours.end}", tz: "${quietHours.tz}" }`}.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-
-                  <Separator />
-
                   <div className="space-y-3">
                     <Label>Notification intensity</Label>
                     <div className="grid gap-3 md:grid-cols-3">
@@ -767,8 +500,8 @@ export default function SettingsPage() {
                   </div>
                 </CardContent>
                 <CardFooter>
-                  <Button type="submit" className="w-full sm:w-auto" disabled={saveState === "saving"}>
-                    {saveState === "saving" ? "Saving..." : "Save settings"}
+                  <Button type="submit" className="w-full sm:w-auto">
+                    Save settings
                   </Button>
                 </CardFooter>
               </Card>
@@ -869,31 +602,7 @@ function PreferenceSwitch({
   )
 }
 
-function QuietHoursTimeField({
-  id,
-  label,
-  value,
-  onChange,
-}: {
-  id: string
-  label: string
-  value: string
-  onChange: (value: string) => void
-}) {
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={id}>{label}</Label>
-      <input
-        id={id}
-        type="time"
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-      />
-    </div>
-  )
-}
-
+import { usePrivacy } from '@/context/PrivacyContext';
 function PreferenceSelect({
   id,
   label,
diff --git a/components/disputes/DisputeEvidencePreview.tsx b/components/disputes/DisputeEvidencePreview.tsx
new file mode 100644
index 00000000..03b40b48
--- /dev/null
+++ b/components/disputes/DisputeEvidencePreview.tsx
@@ -0,0 +1,41 @@
+import { ExternalLink, ShieldAlert } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { normalizeDisputeEvidence, type DisputeEvidenceInput } from '@/lib/dispute-evidence';
+
+interface DisputeEvidencePreviewProps {
+  evidence?: DisputeEvidenceInput;
+  fallbackMessage?: string;
+}
+
+export function DisputeEvidencePreview({
+  evidence,
+  fallbackMessage = 'No verified evidence link available.',
+}: DisputeEvidencePreviewProps) {
+  const items = normalizeDisputeEvidence(evidence);
+
+  if (!items.length) {
+    return <p className="text-sm text-muted-foreground">{fallbackMessage}</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {items.map((item) => (
+        <div key={item.id} className="rounded-md border border-border bg-muted/30 p-3">
+          <div className="mb-2 flex items-center justify-between gap-2">
+            <span className="text-sm font-medium text-foreground">
+              {item.isPrivate ? 'Private evidence preview' : item.label}
+            </span>
+            {item.isPrivate && <ShieldAlert className="h-4 w-4 text-amber-500" aria-label="Private evidence" />}
+          </div>
+
+          <Button variant="outline" size="sm" asChild>
+            <a href={item.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2">
+              {item.isPrivate ? 'View evidence' : item.label}
+              <ExternalLink className="h-3.5 w-3.5" />
+            </a>
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/components/disputes/states/ExecutedState.tsx b/components/disputes/states/ExecutedState.tsx
index 4bf602e0..74b6c111 100644
--- a/components/disputes/states/ExecutedState.tsx
+++ b/components/disputes/states/ExecutedState.tsx
@@ -1,8 +1,9 @@
+import { ExternalLink } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
 import { TallyBar } from '@/components/disputes/shared/TallyBar';
 import { DetailsAccordion } from '@/components/disputes/shared/DetailsAccordion';
-import { OutcomeChip } from '@/components/ui/OutcomeChip';
 import type { DisputeData, DisputeState } from '@/types/disputes';
-import { ExternalLink } from '@/components/ExternalLink';
+import { normalizeDisputeEvidence } from '@/lib/dispute-evidence';
 
 interface ExecutedStateProps {
   data: DisputeData;
@@ -16,9 +17,9 @@ export function ExecutedState({ data }: ExecutedStateProps) {
       {data.outcome && (
         <div className="flex items-center gap-2">
           <span className="text-sm font-medium">Final outcome:</span>
-          <OutcomeChip variant="positive" className="text-sm px-3 py-1">
+          <Badge className="border-transparent bg-green-600 text-white text-sm px-3 py-1">
             {data.outcome}
-          </OutcomeChip>
+          </Badge>
         </div>
       )}
 
@@ -40,15 +41,17 @@ export function ExecutedState({ data }: ExecutedStateProps) {
             Audit references
           </p>
           <ul className="flex flex-col gap-1">
-            {data.auditRefs.map((ref) => (
-              <li key={ref.url}>
-                <ExternalLink
+            {normalizeDisputeEvidence(data.auditRefs).map((ref) => (
+              <li key={ref.id}>
+                <a
                   href={ref.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className="flex items-center gap-1 text-sm text-blue-500 hover:underline"
-                  iconClassName="h-3 w-3"
                 >
                   {ref.label}
-                </ExternalLink>
+                  <ExternalLink className="h-3 w-3 shrink-0" />
+                </a>
               </li>
             ))}
           </ul>
diff --git a/components/events/events-table.tsx b/components/events/events-table.tsx
index 726b55a7..f20b3a02 100644
--- a/components/events/events-table.tsx
+++ b/components/events/events-table.tsx
@@ -3,8 +3,7 @@
 import * as React from "react"
 import Link from "next/link"
 /* NEW: Added lucide icons for row actions and compare */
-import { Edit, MoreHorizontal, Trash2, Users, Calendar, Trophy, Building2, CircleDollarSign, LineChart, TrendingUp, GitCompareArrows, ShieldCheck, Clock, AlertTriangle } from "lucide-react"
-import { HoverTooltip } from "@/components/HoverTooltip"
+import { Edit, MoreHorizontal, Trash2, Users, Calendar, Trophy, Building2, CircleDollarSign, LineChart, TrendingUp, GitCompareArrows } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Badge } from "@/components/ui/badge"
@@ -31,11 +30,6 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog"
 import { EventsTableSkeleton } from "./events-table-skeleton"
-import { NoMatchEmptyState } from "./NoMatchEmptyState"
-/* NEW: GrantFox FWC26 / Stellar Wave themed empty state for the "no events at
- * all" scenario (distinct from NoMatchEmptyState which handles active-filter
- * zero-result cases). */
-import { EventsEmptyState } from "./EventsEmptyState"
 import { useEventsStore, formatTimeRemaining, getTimeRemainingColor } from "@/lib/events-store"
 import { useCompareStore, MAX_COMPARE } from "@/lib/compare-store"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -94,19 +88,10 @@ function TimeRemainingProgress({ event }: { event: Event }) {
     return () => clearInterval(interval)
   }, [])
 
-  if (typeof event.timeRemainingMs !== "number" || !Number.isFinite(event.timeRemainingMs)) {
+  if (!event.timeRemainingMs) {
     return <span className="text-muted-foreground">-</span>
   }
 
-  if (event.timeRemainingMs <= 0) {
-    return (
-      <span className="inline-flex items-center gap-1.5 text-body-sm font-medium text-muted-foreground">
-        <Calendar className="h-3.5 w-3.5" aria-hidden="true" />
-        Ended
-      </span>
-    )
-  }
-
   const color = getTimeRemainingColor(event.timeRemainingMs)
   const timeString = formatTimeRemaining(event.timeRemainingMs)
 
@@ -115,43 +100,27 @@ function TimeRemainingProgress({ event }: { event: Event }) {
   const currentDays = event.timeRemainingMs / (24 * 60 * 60 * 1000)
   const progressValue = Math.max(0, Math.min(100, (currentDays / maxDays) * 100))
 
-  const urgencyLabels: Record<string, string> = {
-    green: "Low urgency",
-    orange: "Medium urgency",
-    red: "High urgency",
-  }
-  const urgencyLabel = urgencyLabels[color] ?? "Unknown urgency"
-  const urgencyIcons: Record<string, React.ReactNode> = {
-    green: <ShieldCheck className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />,
-    orange: <Clock className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />,
-    red: <AlertTriangle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />,
-  }
+  const urgencyLabel = { green: "Low urgency", orange: "Medium urgency", red: "High urgency" }[color]
 
-  const progressColorClasses: Record<string, string> = {
+  const progressColorClass = {
     green: "bg-[#16DB30]",
     orange: "bg-[#FFBB00]",
     red: "bg-[#FF5858]",
-  }
-  const progressColorClass = progressColorClasses[color] ?? "bg-gray-200"
+  }[color]
 
-  const textColorClasses: Record<string, string> = {
+  const textColorClass = {
     green: "text-[#16DB30]",
     orange: "text-[#FFBB00]",
     red: "text-[#FF5858]",
-  }
-  const textColorClass = textColorClasses[color] ?? "text-muted-foreground"
+  }[color]
 
   const progressValueRounded = Math.round(progressValue)
 
   return (
     <div className="space-y-2 min-w-[120px]">
-      <div className={cn("text-body-sm font-medium", textColorClass)}>
+      <div className={cn("text-sm font-medium", textColorClass)}>
         {timeString}
-        {/* Visible urgency icon and text keep status independent of color. */}
-        <span className="ml-1 inline-flex items-center gap-1 text-muted-foreground">
-          {urgencyIcons[color]}
-          <span>{urgencyLabel}</span>
-        </span>
+        <span className="sr-only"> — {urgencyLabel}</span>
       </div>
       <div
         role="progressbar"
@@ -159,7 +128,6 @@ function TimeRemainingProgress({ event }: { event: Event }) {
         aria-valuemin={0}
         aria-valuemax={100}
         aria-label={`Time remaining: ${timeString} (${urgencyLabel})`}
-        aria-valuetext={`${timeString} (${urgencyLabel})`}
         className="w-full bg-gray-200 rounded-full h-2"
       >
         <div
@@ -171,163 +139,9 @@ function TimeRemainingProgress({ event }: { event: Event }) {
   )
 }
 
-/** Sub-component so useEffect is called at the top level of a component, not inside a map. */
-interface EventRowProps {
-  event: Event
-  index: number
-  isLast: boolean
-  animationReady: boolean
-  prefersReduced: boolean
-  seenIds: React.MutableRefObject<Set<string>>
-  selectedIds: string[]
-  toggle: (id: string) => void
-  setDeleteTarget: (event: Event) => void
-}
-
-function EventRow({
-  event,
-  index,
-  isLast,
-  animationReady,
-  prefersReduced,
-  seenIds,
-  selectedIds,
-  toggle,
-  setDeleteTarget,
-}: EventRowProps) {
-  // Mark row as seen after initial render (valid hook placement inside a component)
-  React.useEffect(() => {
-    seenIds.current.add(event.id)
-  }, [event.id, seenIds])
-
-  const isSeen = seenIds.current.has(event.id)
-
-  return (
-    <TableRow
-      className={cn(
-        "relative grid grid-cols-2 gap-x-3 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm transition-colors hover:bg-muted/50 xl:table-row xl:rounded-none xl:border-0 xl:bg-transparent xl:p-0 xl:shadow-none",
-        !isLast && "xl:border-b xl:border-border",
-        animationReady && !prefersReduced && !isSeen && index < 12 && "animate-in fade-in slide-in-from-bottom-2"
-      )}
-      style={
-        animationReady && !prefersReduced && !isSeen && index < 12
-          ? { transitionDelay: `${index * 30}ms`, animationFillMode: "both" }
-          : undefined
-      }
-    >
-      {/* Compare checkbox */}
-      <TableCell className="absolute left-4 top-5 w-10 p-0 xl:static xl:table-cell xl:px-6 xl:py-4">
-        <Checkbox
-          checked={selectedIds.includes(event.id)}
-          onCheckedChange={() => toggle(event.id)}
-          disabled={!selectedIds.includes(event.id) && selectedIds.length >= MAX_COMPARE}
-          aria-label={`Select ${event.title} for comparison`}
-          className="border-primary data-[state=checked]:border-primary data-[state=checked]:bg-primary"
-        />
-      </TableCell>
-
-      {/* Event title cell with hover-delayed tooltip showing key data */}
-      <TableCell className="col-span-2 block min-w-0 border-b border-border pb-3 pl-9 pr-0 pt-0 xl:table-cell xl:min-w-[200px] xl:border-0 xl:px-6 xl:py-4">
-        <HoverTooltip
-          content={
-            <div className="space-y-1.5 p-1 text-left">
-              <p className="font-bold text-xs uppercase tracking-wider text-purple-300">Event Details</p>
-              <div className="text-xs space-y-1 text-white/90">
-                <div><span className="text-white/50">Category:</span> {event.category}</div>
-                <div><span className="text-white/50">Odds:</span> <span className="tabular-nums">{event.odds}</span></div>
-                <div><span className="text-white/50">Participants:</span> <span className="tabular-nums">{event.participants.toLocaleString()}</span></div>
-                <div><span className="text-white/50">Ends:</span> {formatDate(new Date(event.endDate))}</div>
-              </div>
-            </div>
-          }
-        >
-          <div className="space-y-1 cursor-help">
-            <div className="text-label leading-tight text-white">{event.title}</div>
-            <div className="text-caption text-muted-foreground">#{event.txHash}</div>
-          </div>
-        </HoverTooltip>
-      </TableCell>
-
-      <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[100px] sm:min-w-0">
-        <Badge className={cn(getCategoryBadgeVariant(event.category), "inline-flex items-center gap-1 text-caption sm:text-body-sm px-2 py-1")}>
-          {getCategoryIcon(event.category)}
-          {event.category}
-        </Badge>
-      </TableCell>
-
-      <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[80px] sm:min-w-0">
-        <div className="text-label text-white tabular-nums">{event.odds}</div>
-      </TableCell>
-
-      <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[180px] sm:min-w-0 text-white">
-        <div className="text-caption sm:text-body-sm leading-tight">
-          <div className="sm:hidden">
-            <div>{formatDate(new Date(event.startDate))}</div>
-            <div>{formatDate(new Date(event.endDate))}</div>
-          </div>
-          <div className="hidden xl:block">
-            {formatDate(new Date(event.startDate))} - {formatDate(new Date(event.endDate))}
-          </div>
-        </div>
-      </TableCell>
-
-      <TableCell className="col-span-2 block min-w-0 px-0 pb-0 pt-3 xl:table-cell xl:min-w-[160px] xl:px-6 xl:py-4">
-        <span className="mb-1 block text-xs font-medium text-muted-foreground xl:hidden">Time remaining</span>
-        <TimeRemainingProgress event={event} />
-      </TableCell>
-
-      {/* Participants */}
-      <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[120px] sm:min-w-0">
-        <div className="flex items-center gap-1.5 text-body-sm text-muted-foreground">
-          <Users className="h-4 w-4" aria-hidden="true" />
-          <span className="text-label text-foreground tabular-nums">{event.participants.toLocaleString()}</span>
-        </div>
-      </TableCell>
-
-      {/* Actions */}
-      <TableCell className="block min-w-0 px-0 pb-0 pt-3 text-right xl:table-cell xl:min-w-[80px] xl:px-6 xl:py-4">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreHorizontal className="h-4 w-4" aria-hidden="true" />
-              <span className="sr-only">Open actions menu</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-44">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem asChild>
-              <Link href={`/events/${event.id}/edit`} className="flex items-center gap-2">
-                <Edit className="h-4 w-4" aria-hidden="true" />
-                Edit Event
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              className="flex items-center gap-2 text-red-600 focus:text-red-600 focus:bg-red-50"
-              onSelect={() => setDeleteTarget(event)}
-            >
-              <Trash2 className="h-4 w-4" aria-hidden="true" />
-              Delete Event
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </TableCell>
-    </TableRow>
-  )
-}
-
 export function EventsTable({ className }: EventsTableProps) {
   /* MODIFIED: Added deleteEvent from store */
-  const {
-    filteredEvents,
-    loading,
-    lastFetchTime,
-    pagination,
-    deleteEvent,
-    filters,
-    setFilters,
-    setSearch,
-  } = useEventsStore()
+  const { filteredEvents, loading, pagination, deleteEvent } = useEventsStore()
   /* Compare store */
   const { selectedIds, toggle } = useCompareStore()
 
@@ -337,7 +151,7 @@ export function EventsTable({ className }: EventsTableProps) {
   // Track rows that have already animated in
   const seenIds = React.useRef(new Set<string>())
   const [animationReady, setAnimationReady] = React.useState(false)
-  const prefersReduced = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false
+  const prefersReduced = typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false
 
   React.useEffect(() => {
     setAnimationReady(true)
@@ -348,55 +162,22 @@ export function EventsTable({ className }: EventsTableProps) {
   const endIndex = startIndex + pagination.pageSize
   const paginatedEvents = filteredEvents.slice(startIndex, endIndex)
 
-  // During a retry, preserve the last good page instead of replacing it with a
-  // skeleton. This avoids losing the user's position while live data is stale.
-  if (loading && (filteredEvents.length === 0 || lastFetchTime === null)) {
+  if (loading) {
     return <EventsTableSkeleton />
   }
 
-  /*
-   * MODIFIED: Split empty-state handling into two branches:
-   *
-   * 1. "True empty" — no events exist for the current status tab and no
-   *    filters are active.  Render the GrantFox FWC26 / Stellar Wave branded
-   *    EventsEmptyState with a "Create Your First Event" CTA.
-   *
-   * 2. "Filtered empty" — the user has active search/category/date filters
-   *    that produced zero results.  Render NoMatchEmptyState (existing) so the
-   *    user knows to adjust or clear their filters.
-   *
-   * The distinction matters: in case 1 we want to drive the user toward
-   * creating content; in case 2 we want to help them find existing content.
-   */
+  {/* NEW: Enhanced empty state with icon illustration and contextual messaging */}
   if (filteredEvents.length === 0) {
-    /** True when the user has at least one active filter in play */
-    const hasActiveFilters =
-      !!filters.search ||
-      filters.category.length > 0 ||
-      !!(filters.dateRange.from || filters.dateRange.to)
-
-    if (!hasActiveFilters) {
-      // No events and no filters → show the campaign-branded empty state
-      return <EventsEmptyState />
-    }
-
-    // Filters are active but matched nothing → help the user clear them
-    const handleClearFilters = () => {
-      setSearch("")
-      setFilters({
-        category: [],
-        oddsRange: [0, 10],
-        dateRange: { from: null, to: null },
-      })
-    }
-
     return (
-      <NoMatchEmptyState
-        hasSearch={!!filters.search}
-        hasCategories={filters.category.length > 0}
-        hasDateRange={!!(filters.dateRange.from || filters.dateRange.to)}
-        onClearFilters={handleClearFilters}
-      />
+      <div className="flex flex-col items-center bg-black text-white justify-center py-16 px-4">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-black text-white mb-4">
+          <Calendar className="h-8 w-8 text-[#540D8D]" />
+        </div>
+        <h3 className="text-lg font-semibold text-foreground mb-1">No events found</h3>
+        <p className="text-sm text-muted-foreground text-center max-w-sm">
+          {"There are no prediction events matching your current filters. Try adjusting your search or filter criteria."}
+        </p>
+      </div>
     )
   }
 
@@ -430,63 +211,143 @@ export function EventsTable({ className }: EventsTableProps) {
         </AlertDialogContent>
       </AlertDialog>
 
-      <div
-        className="rounded-lg bg-background text-foreground xl:overflow-hidden xl:border xl:border-border"
-        data-testid="events-responsive-layout"
-      >
-        {/* Rows become readable cards below lg without duplicating accessible content. */}
-        <div className="overflow-visible xl:overflow-x-auto">
-          <Table aria-label="Events" className="block w-full xl:table xl:min-w-[980px]">
-            <TableHeader className="sr-only xl:not-sr-only xl:table-header-group">
-              <TableRow className="border-b border-border bg-muted text-foreground hover:bg-muted">
+      <div className="rounded-lg border-b border-[#540D8D] overflow-hidden bg-black text-white">
+        {/* Responsive table container with horizontal scroll */}
+        <div className="overflow-x-auto">
+          <Table className="min-w-[800px] sm:min-w-full">
+            <TableHeader>
+              <TableRow className="hover:bg-[#540D8D] text-white border-b border-[#540D8D]/50 bg-black">
                 {/* Compare select column */}
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 w-10">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 w-10">
                   <span className="sr-only">Compare</span>
                 </TableHead>
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 text-left min-w-[200px] sm:min-w-0">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 text-left min-w-[200px] sm:min-w-0">
                   Event Title
                 </TableHead>
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 text-left min-w-[100px] sm:min-w-0">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 text-left min-w-[100px] sm:min-w-0">
                   Category
                 </TableHead>
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 text-left min-w-[80px] sm:min-w-0">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 text-left min-w-[80px] sm:min-w-0">
                   Odds
                 </TableHead>
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 text-left min-w-[180px] sm:min-w-0">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 text-left min-w-[180px] sm:min-w-0">
                   End Date
                 </TableHead>
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 text-left min-w-[160px] sm:min-w-0">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 text-left min-w-[160px] sm:min-w-0">
                   Time Remaining
                 </TableHead>
                 {/* NEW: Participants column header */}
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 text-left min-w-[120px] sm:min-w-0">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 text-left min-w-[120px] sm:min-w-0">
                   Participants
                 </TableHead>
                 {/* NEW: Actions column header */}
-                <TableHead scope="col" className="text-label text-muted-foreground py-3 md:py-4 px-4 md:px-6 text-right min-w-[80px] sm:min-w-0">
+                <TableHead className="text-muted-foreground font-medium py-3 md:py-4 px-4 md:px-6 text-right min-w-[80px] sm:min-w-0">
                   Actions
                 </TableHead>
               </TableRow>
             </TableHeader>
-            <TableBody className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:table-row-group">
-              {paginatedEvents.map((event, index) => (
-                <EventRow
-                  key={event.id}
-                  event={event}
-                  index={index}
-                  isLast={index === paginatedEvents.length - 1}
-                  animationReady={animationReady}
-                  prefersReduced={prefersReduced}
-                  seenIds={seenIds}
-                  selectedIds={selectedIds}
-                  toggle={toggle}
-                  setDeleteTarget={setDeleteTarget}
-                />
-              ))}
+            <TableBody>
+              {paginatedEvents.map((event, index) => {
+                React.useEffect(() => {
+                  seenIds.current.add(event.id)
+                }, [event.id])
+
+                return (
+                  <TableRow
+                    key={event.id}
+                    className={cn(
+                      "hover:bg-[#540D8D] transition-colors border-0",
+                      index !== paginatedEvents.length - 1 && "border-b border-[#540D8D]",
+                      animationReady && !prefersReduced && !seenIds.current.has(event.id) && index < 12 && "animate-in fade-in slide-in-from-bottom-2"
+                    )}
+                    style={animationReady && !prefersReduced && !seenIds.current.has(event.id) && index < 12 ? { transitionDelay: `${index * 30}ms`, animationFillMode: 'both' } : undefined}
+                  >
+                    {/* Compare checkbox */}
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 w-10">
+                      <Checkbox
+                        checked={selectedIds.includes(event.id)}
+                        onCheckedChange={() => toggle(event.id)}
+                        disabled={
+                          !selectedIds.includes(event.id) &&
+                          selectedIds.length >= MAX_COMPARE
+                        }
+                        aria-label={`Select ${event.title} for comparison`}
+                        className="border-[#540D8D] data-[state=checked]:bg-[#540D8D] data-[state=checked]:border-[#540D8D]"
+                      />
+                    </TableCell>
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[200px] sm:min-w-0">
+                      <div className="space-y-1">
+                        <div className="font-medium text-sm leading-tight text-White">{event.title}</div>
+                        <div className="text-xs text-muted-foreground">#{event.txHash}</div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[100px] sm:min-w-0">
+                      <Badge className={cn(getCategoryBadgeVariant(event.category), "inline-flex items-center gap-1 text-xs sm:text-sm px-2 py-1")}>
+                        {getCategoryIcon(event.category)}
+                        {event.category}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[80px] sm:min-w-0">
+                      <div className="font-medium text-sm text-white">{event.odds}</div>
+                    </TableCell>
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[180px] sm:min-w-0 text-white">
+                      <div className="text-xs sm:text-sm leading-tight">
+                        <div className="sm:hidden">
+                          {/* Mobile: Stack dates vertically */}
+                          <div>{formatDate(new Date(event.startDate))}</div>
+                          <div>{formatDate(new Date(event.endDate))}</div>
+                        </div>
+                        <div className="hidden sm:block">
+                          {/* Desktop: Show dates inline with dash */}
+                          {formatDate(new Date(event.startDate))} - {formatDate(new Date(event.endDate))}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[160px] sm:min-w-0">
+                      <TimeRemainingProgress event={event} />
+                    </TableCell>
+                    {/* NEW: Participants cell showing formatted participant count */}
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[120px] sm:min-w-0">
+                      <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                        <Users className="h-4 w-4" />
+                        <span className="font-medium text-foreground">{event.participants.toLocaleString()}</span>
+                      </div>
+                    </TableCell>
+                    {/* NEW: Actions cell with dropdown menu for Edit/Delete */}
+                    <TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[80px] sm:min-w-0 text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon" className="h-8 w-8">
+                            <MoreHorizontal className="h-4 w-4" />
+                            <span className="sr-only">Open actions menu</span>
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-44">
+                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem asChild>
+                            <Link href={`/events/${event.id}/edit`} className="flex items-center gap-2">
+                              <Edit className="h-4 w-4" />
+                              Edit Event
+                            </Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="flex items-center gap-2 text-red-600 focus:text-red-600 focus:bg-red-50"
+                            onSelect={() => setDeleteTarget(event)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                            Delete Event
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
             </TableBody>
           </Table>
         </div>
       </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/components/typography-example.tsx b/components/typography-example.tsx
index 803bf889..2b739ccf 100644
--- a/components/typography-example.tsx
+++ b/components/typography-example.tsx
@@ -258,7 +258,7 @@ export function TypographyExample() {
             <h3 className="text-h3 mb-4">Possible Outcomes</h3>
             <div className="space-y-2">
               <div className="flex justify-between p-3 bg-secondary/30 rounded-lg">
-                <span className="text-body-md">Yes - SPY &gt; $450</span>
+                <span className="text-body-md">{'Yes - SPY > $450'}</span>
                 <span className="text-stat-md font-bold text-emerald-400">72%</span>
               </div>
               <div className="flex justify-between p-3 bg-secondary/30 rounded-lg">
diff --git a/lib/__tests__/dispute-evidence.test.ts b/lib/__tests__/dispute-evidence.test.ts
new file mode 100644
index 00000000..777810bd
--- /dev/null
+++ b/lib/__tests__/dispute-evidence.test.ts
@@ -0,0 +1,45 @@
+import {
+  getEvidencePreviewLabel,
+  normalizeDisputeEvidence,
+} from '@/lib/dispute-evidence';
+
+describe('dispute evidence normalization', () => {
+  it('accepts valid https evidence and ignores unsafe values', () => {
+    const result = normalizeDisputeEvidence([
+      { label: 'Court ruling', url: 'https://example.com/ruling.pdf' },
+      { label: 'Private memo', url: 'javascript:alert(1)', isPrivate: true },
+      'https://example.com/duplicate.pdf',
+    ]);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toMatchObject({
+      label: 'Court ruling',
+      url: 'https://example.com/ruling.pdf',
+      isValid: true,
+    });
+    expect(result[1]).toMatchObject({
+      label: 'Evidence preview',
+      url: 'https://example.com/duplicate.pdf',
+      isValid: true,
+    });
+  });
+
+  it('deduplicates repeated evidence entries and preserves public previews', () => {
+    const result = normalizeDisputeEvidence([
+      'https://example.com/report.pdf',
+      'https://example.com/report.pdf',
+      { label: 'Official results', url: 'https://example.com/report.pdf' },
+    ]);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].url).toBe('https://example.com/report.pdf');
+    expect(result[0].label).toBe('Evidence preview');
+  });
+
+  it('rejects malformed or non-http(s) evidence and falls back to a safe preview label', () => {
+    const invalid = normalizeDisputeEvidence(['javascript:alert(1)', 'ftp://example.com/file.txt', 'not-a-url']);
+
+    expect(invalid).toEqual([]);
+    expect(getEvidencePreviewLabel('ftp://example.com/file.txt')).toBe('Evidence preview');
+  });
+});
diff --git a/lib/dispute-evidence.ts b/lib/dispute-evidence.ts
new file mode 100644
index 00000000..0fc007d5
--- /dev/null
+++ b/lib/dispute-evidence.ts
@@ -0,0 +1,103 @@
+export interface DisputeEvidenceCandidate {
+  label?: string;
+  url: string;
+  isPrivate?: boolean;
+  preview?: string;
+}
+
+export type DisputeEvidenceInput =
+  | string
+  | DisputeEvidenceCandidate
+  | Array<string | DisputeEvidenceCandidate>;
+
+export interface NormalizedDisputeEvidence {
+  id: string;
+  label: string;
+  url: string;
+  isPrivate: boolean;
+  isValid: boolean;
+  preview: string;
+}
+
+const MAX_EVIDENCE_URL_LENGTH = 2048;
+
+function isLocalhostHostname(hostname: string): boolean {
+  return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '[::1]';
+}
+
+export function isSafeEvidenceUrl(value: string): boolean {
+  if (typeof value !== 'string') return false;
+
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.length > MAX_EVIDENCE_URL_LENGTH) return false;
+
+  try {
+    const parsed = new URL(trimmed);
+    const allowedProtocols = new Set(['https:', 'http:']);
+    const protocol = parsed.protocol.toLowerCase();
+
+    if (!allowedProtocols.has(protocol)) return false;
+    if (parsed.username || parsed.password) return false;
+    if (!parsed.hostname) return false;
+    if (protocol === 'http:' && !isLocalhostHostname(parsed.hostname)) {
+      return false;
+    }
+
+    const unsafeProtocols = ['javascript:', 'data:', 'file:', 'blob:'];
+    return !unsafeProtocols.some((unsafe) => trimmed.toLowerCase().startsWith(unsafe));
+  } catch {
+    return false;
+  }
+}
+
+export function getEvidencePreviewLabel(value?: string): string {
+  if (typeof value !== 'string' || !value.trim()) return 'Evidence preview';
+
+  if (!isSafeEvidenceUrl(value)) return 'Evidence preview';
+
+  return 'Evidence preview';
+}
+
+export function normalizeDisputeEvidence(
+  evidence?: DisputeEvidenceInput
+): NormalizedDisputeEvidence[] {
+  const entries = Array.isArray(evidence) ? evidence : evidence == null ? [] : [evidence];
+  if (!entries.length) {
+    return [];
+  }
+
+  const seen = new Set<string>();
+
+  return entries.reduce<NormalizedDisputeEvidence[]>((items, entry) => {
+    const candidate = typeof entry === 'string' ? { url: entry } : entry;
+
+    if (!candidate || typeof candidate.url !== 'string') {
+      return items;
+    }
+
+    const normalizedUrl = candidate.url.trim();
+    if (!isSafeEvidenceUrl(normalizedUrl)) {
+      return items;
+    }
+
+    const dedupeKey = normalizedUrl.toLowerCase();
+    if (seen.has(dedupeKey)) {
+      return items;
+    }
+    seen.add(dedupeKey);
+
+    const label = (candidate.label && candidate.label.trim()) || getEvidencePreviewLabel(normalizedUrl);
+    const preview = (candidate.preview && candidate.preview.trim()) || label;
+
+    items.push({
+      id: `${label}-${dedupeKey}`,
+      label,
+      url: normalizedUrl,
+      isPrivate: Boolean(candidate.isPrivate),
+      isValid: true,
+      preview,
+    });
+
+    return items;
+  }, []);
+}