diff --git a/app/about/page.tsx b/app/about/page.tsx
index dc295c7..468e699 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Github, ExternalLink, FileCode, Database, BarChart3, Cog, GitCommit } from 'lucide-react'
 import Link from 'next/link'
+import { TopBanner } from '@/components/top-banner'
 
 export const metadata: Metadata = {
     title: 'About PinchBench - Best Models for OpenClaw FAQ',
@@ -48,12 +49,12 @@ const faqJsonLd = {
 
 export default function AboutPage() {
     return (
-        <>
+        <div className="min-h-screen bg-background flex flex-col">
             <script
                 type="application/ld+json"
                 dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
             />
-            <main className="min-h-screen bg-background">
+            <TopBanner />
             {/* Header */}
             <header className="border-b border-border bg-card/50">
                 <div className="max-w-4xl mx-auto px-6 py-8">
diff --git a/app/claim/error/page.tsx b/app/claim/error/page.tsx
index 2e6e08a..95ab752 100644
--- a/app/claim/error/page.tsx
+++ b/app/claim/error/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { XCircle } from 'lucide-react'
+import { TopBanner } from '@/components/top-banner'
 
 export const metadata: Metadata = {
   title: 'Verification Failed — PinchBench',
@@ -42,6 +43,7 @@ export default async function ClaimErrorPage({ searchParams }: ClaimErrorPagePro
 
   return (
     <div className="min-h-screen bg-background flex flex-col">
+      <TopBanner />
       {/* Header */}
       <header className="border-b border-border">
         <div className="max-w-4xl mx-auto px-6 py-6">
diff --git a/app/claim/page.tsx b/app/claim/page.tsx
index 7606c50..2f91ac6 100644
--- a/app/claim/page.tsx
+++ b/app/claim/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { Github } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
+import { TopBanner } from '@/components/top-banner'
 
 export const metadata: Metadata = {
   title: 'Claim Your PinchBench Submissions',
@@ -20,6 +21,7 @@ export default async function ClaimPage({ searchParams }: ClaimPageProps) {
 
   return (
     <div className="min-h-screen bg-background flex flex-col">
+      <TopBanner />
       {/* Header */}
       <header className="border-b border-border">
         <div className="max-w-4xl mx-auto px-6 py-6">
diff --git a/app/claim/success/page.tsx b/app/claim/success/page.tsx
index 85dd79f..8b873b4 100644
--- a/app/claim/success/page.tsx
+++ b/app/claim/success/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { CheckCircle2, Github, User } from 'lucide-react'
+import { TopBanner } from '@/components/top-banner'
 
 export const metadata: Metadata = {
   title: 'Account Linked — PinchBench',
@@ -18,6 +19,7 @@ export default async function ClaimSuccessPage({ searchParams }: ClaimSuccessPag
 
   return (
     <div className="min-h-screen bg-background flex flex-col">
+      <TopBanner />
       {/* Header */}
       <header className="border-b border-border">
         <div className="max-w-4xl mx-auto px-6 py-6">
diff --git a/app/layout.tsx b/app/layout.tsx
index 98d01c5..dd43e74 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -70,7 +70,6 @@ export default function RootLayout({
       <body className="font-sans antialiased">
         <PostHogProvider>
           <TooltipProvider delayDuration={300} disableHoverableContent>
-            <TopBanner />
             {children}
             <Footer />
           </TooltipProvider>
diff --git a/app/runs/page.tsx b/app/runs/page.tsx
index 7f1228e..22b6847 100644
--- a/app/runs/page.tsx
+++ b/app/runs/page.tsx
@@ -5,6 +5,7 @@ import { PROVIDER_COLORS } from '@/lib/types'
 import { fetchSubmissions, fetchBenchmarkVersions } from '@/lib/api'
 import { normalizeProvider } from '@/lib/transforms'
 import { formatDistanceToNow } from 'date-fns'
+import { TopBanner } from '@/components/top-banner'
 
 interface RunsPageProps {
   searchParams: Promise<{ version?: string; official?: string }>
@@ -32,6 +33,7 @@ export default async function RunsPage({ searchParams }: RunsPageProps) {
 
   return (
     <div className="min-h-screen bg-background">
+      <TopBanner />
       <header className="border-b border-border">
         <div className="max-w-7xl mx-auto px-6 py-6">
           <div className="flex items-center justify-between">
diff --git a/app/submission/[id]/page.tsx b/app/submission/[id]/page.tsx
index fcb4d74..4cda225 100644
--- a/app/submission/[id]/page.tsx
+++ b/app/submission/[id]/page.tsx
@@ -14,6 +14,7 @@ import { PROVIDER_COLORS } from '@/lib/types'
 import { formatDistanceToNow } from 'date-fns'
 import { fetchSubmission } from '@/lib/api'
 import { transformSubmission } from '@/lib/transforms'
+import { TopBanner } from '@/components/top-banner'
 
 interface SubmissionPageProps {
   params: Promise<{ id: string }>
@@ -37,6 +38,7 @@ export default async function SubmissionPage({ params, searchParams }: Submissio
   } catch (error) {
     return (
       <div className="min-h-screen bg-background">
+        <TopBanner />
         <header className="border-b border-border">
           <div className="max-w-7xl mx-auto px-6 py-6">
             <div className="flex items-center justify-between">
@@ -89,6 +91,7 @@ export default async function SubmissionPage({ params, searchParams }: Submissio
 
   return (
     <div className="min-h-screen bg-background">
+      <TopBanner />
       {/* Header */}
       <header className="border-b border-border">
         <div className="max-w-7xl mx-auto px-6 py-6">
diff --git a/app/user/[github_username]/page.tsx b/app/user/[github_username]/page.tsx
index fa5bd2d..4f85497 100644
--- a/app/user/[github_username]/page.tsx
+++ b/app/user/[github_username]/page.tsx
@@ -8,6 +8,7 @@ import { fetchUserSubmissions } from '@/lib/api'
 import { PROVIDER_COLORS } from '@/lib/types'
 import { normalizeProvider } from '@/lib/transforms'
 import { formatDistanceToNow } from 'date-fns'
+import { TopBanner } from '@/components/top-banner'
 
 interface UserPageProps {
   params: Promise<{ github_username: string }>
@@ -51,6 +52,7 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
 
   return (
     <div className="min-h-screen bg-background">
+      <TopBanner />
       {/* Header */}
       <header className="border-b border-border">
         <div className="max-w-4xl mx-auto px-6 py-6">
diff --git a/components/filter-sidebar.tsx b/components/filter-sidebar.tsx
new file mode 100644
index 0000000..a7bc554
--- /dev/null
+++ b/components/filter-sidebar.tsx
@@ -0,0 +1,261 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Search, X, Filter, ChevronDown, ChevronRight } from 'lucide-react'
+import type { LeaderboardEntry, BenchmarkVersion } from '@/lib/types'
+import { PROVIDER_COLORS } from '@/lib/types'
+import { VersionSelector } from '@/components/version-selector'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+  SidebarSeparator,
+  SidebarFooter,
+} from '@/components/ui/sidebar'
+
+interface FilterSidebarProps {
+  entries: LeaderboardEntry[]
+  versions: BenchmarkVersion[]
+  currentVersion: string | null
+  officialOnly: boolean
+  openWeightsOnly: boolean
+  providerFilters: string[]
+  lastUpdated: string
+  onOfficialOnlyChange: (officialOnly: boolean) => void
+  onOpenWeightsOnlyChange: (openWeightsOnly: boolean) => void
+  onProviderToggle: (provider: string) => void
+  onClearProviders: () => void
+  onClearAll: () => void
+}
+
+function CollapsibleGroup({
+  label,
+  defaultOpen = true,
+  children,
+}: {
+  label: string
+  defaultOpen?: boolean
+  children: React.ReactNode
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <SidebarGroup className="py-2">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 w-full px-2 py-1 text-xs font-medium text-sidebar-foreground/70 hover:text-sidebar-foreground transition-colors"
+      >
+        {open ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        {label}
+      </button>
+      {open && <SidebarGroupContent className="mt-1">{children}</SidebarGroupContent>}
+    </SidebarGroup>
+  )
+}
+
+export function FilterSidebar({
+  entries,
+  versions,
+  currentVersion,
+  officialOnly,
+  openWeightsOnly,
+  providerFilters,
+  lastUpdated,
+  onOfficialOnlyChange,
+  onOpenWeightsOnlyChange,
+  onProviderToggle,
+  onClearProviders,
+  onClearAll,
+}: FilterSidebarProps) {
+  const [providerSearch, setProviderSearch] = useState('')
+
+  // Extract unique providers from entries, sorted by count
+  const providers = useMemo(() => {
+    const counts = new Map<string, number>()
+    for (const entry of entries) {
+      const p = entry.provider.toLowerCase()
+      counts.set(p, (counts.get(p) || 0) + 1)
+    }
+    return Array.from(counts.entries())
+      .sort((a, b) => b[1] - a[1])
+      .map(([name, count]) => ({ name, displayName: name.charAt(0).toUpperCase() + name.slice(1), count }))
+  }, [entries])
+
+  const filteredProviders = useMemo(() => {
+    if (!providerSearch) return providers
+    const q = providerSearch.toLowerCase()
+    return providers.filter((p) => p.name.includes(q))
+  }, [providers, providerSearch])
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0
+    if (!officialOnly) count++
+    if (openWeightsOnly) count++
+    if (providerFilters.length > 0) count += providerFilters.length
+    return count
+  }, [officialOnly, openWeightsOnly, providerFilters])
+
+  return (
+    <Sidebar side="left" variant="sidebar" collapsible="offcanvas">
+      <SidebarHeader className="border-b border-sidebar-border px-3 py-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Filter className="h-4 w-4 text-sidebar-foreground/70" />
+            <span className="text-sm font-semibold text-sidebar-foreground">Filters</span>
+            {activeFilterCount > 0 && (
+              <span className="inline-flex items-center justify-center h-5 min-w-5 px-1.5 rounded-full bg-primary text-primary-foreground text-[10px] font-bold">
+                {activeFilterCount}
+              </span>
+            )}
+          </div>
+          {activeFilterCount > 0 && (
+            <button
+              onClick={onClearAll}
+              className="text-[11px] text-sidebar-foreground/60 hover:text-sidebar-foreground transition-colors flex items-center gap-1"
+            >
+              <X className="h-3 w-3" />
+              Clear
+            </button>
+          )}
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent className="px-0">
+        {/* Data Quality */}
+        <CollapsibleGroup label="Data Quality">
+          <div className="space-y-2.5 px-1">
+            <label className="flex items-center gap-2.5 text-xs text-sidebar-foreground/90 cursor-pointer hover:text-sidebar-foreground transition-colors pl-1">
+              <Checkbox
+                checked={!officialOnly}
+                onCheckedChange={(checked) => onOfficialOnlyChange(!checked)}
+                className="h-3.5 w-3.5 rounded border border-sidebar-border data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+              />
+              Include unofficial runs
+            </label>
+            <label className="flex items-center gap-2.5 text-xs text-sidebar-foreground/90 cursor-pointer hover:text-sidebar-foreground transition-colors pl-1">
+              <Checkbox
+                checked={openWeightsOnly}
+                onCheckedChange={(checked) => onOpenWeightsOnlyChange(!!checked)}
+                className="h-3.5 w-3.5 rounded border border-sidebar-border data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+              />
+              Open-weight only
+            </label>
+          </div>
+        </CollapsibleGroup>
+
+        <SidebarSeparator className="mx-3" />
+
+        {/* Version */}
+        <CollapsibleGroup label="Benchmark Version">
+          <div className="px-1">
+            <VersionSelector versions={versions} currentVersion={currentVersion} />
+          </div>
+        </CollapsibleGroup>
+
+        <SidebarSeparator className="mx-3" />
+
+        {/* Providers */}
+        <CollapsibleGroup label={`Providers (${providers.length})`}>
+          <div className="px-1 space-y-2">
+            {/* Search input */}
+            <div className="relative">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-sidebar-foreground/50" />
+              <SidebarInput
+                placeholder="Search providers..."
+                value={providerSearch}
+                onChange={(e) => setProviderSearch(e.target.value)}
+                className="h-8 pl-7 pr-7 text-xs"
+              />
+              {providerSearch && (
+                <button
+                  onClick={() => setProviderSearch('')}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-sidebar-foreground/50 hover:text-sidebar-foreground"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </div>
+
+            {/* Active provider filters badges */}
+            {providerFilters.length > 0 && (
+              <div className="flex flex-wrap gap-1 px-1 py-1">
+                {providerFilters.map((p) => {
+                  const display = providers.find(pr => pr.name === p.toLowerCase())?.displayName || (p.charAt(0).toUpperCase() + p.slice(1))
+                  return (
+                    <div
+                      key={p}
+                      className="flex items-center gap-1 px-1.5 py-1 rounded-md bg-sidebar-accent text-[10px] font-medium text-sidebar-accent-foreground max-w-full"
+                    >
+                      <span
+                        className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: PROVIDER_COLORS[p.toLowerCase()] || '#666' }}
+                      />
+                      <span className="truncate">{display}</span>
+                      <button
+                        onClick={() => onProviderToggle(p)}
+                        className="text-sidebar-foreground/50 hover:text-sidebar-foreground"
+                      >
+                        <X className="h-2.5 w-2.5" />
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            {/* Provider checkbox list */}
+            <div className="space-y-0.5 max-h-[60vh] overflow-y-auto pr-1">
+              {filteredProviders.map((provider) => {
+                const isActive = providerFilters.some(p => p.toLowerCase() === provider.name)
+                const color = PROVIDER_COLORS[provider.name] || '#666'
+                return (
+                  <label
+                    key={provider.name}
+                    className={`flex items-center gap-2.5 px-2 py-1.5 rounded-md text-xs cursor-pointer transition-colors ${
+                      isActive
+                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                        : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'
+                    }`}
+                  >
+                    <Checkbox
+                      checked={isActive}
+                      onCheckedChange={() => onProviderToggle(provider.name)}
+                      className="h-3.5 w-3.5 rounded border border-sidebar-border data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+                    />
+                    <span
+                      className="w-2 h-2 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: color }}
+                    />
+                    <span className="flex-1 truncate">{provider.displayName}</span>
+                    <span className="text-[10px] text-sidebar-foreground/50 tabular-nums">
+                      {provider.count}
+                    </span>
+                  </label>
+                )
+              })}
+              {filteredProviders.length === 0 && (
+                <p className="text-xs text-sidebar-foreground/50 px-2 py-2 text-center">
+                  No providers match "{providerSearch}"
+                </p>
+              )}
+            </div>
+          </div>
+        </CollapsibleGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-sidebar-border px-3 py-2">
+        <p className="text-[10px] text-sidebar-foreground/50">
+          Updated {lastUpdated}
+        </p>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/components/leaderboard-header.tsx b/components/leaderboard-header.tsx
index 8ab93e5..94ad62b 100644
--- a/components/leaderboard-header.tsx
+++ b/components/leaderboard-header.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import Link from 'next/link'
-import type { BenchmarkVersion, LeaderboardEntry } from '@/lib/types'
-import { VersionSelector } from '@/components/version-selector'
+import type { LeaderboardEntry } from '@/lib/types'
 import { ModelSearch } from '@/components/model-search'
+import { SidebarTrigger } from '@/components/ui/sidebar'
 
 type ViewMode = 'success' | 'speed' | 'cost' | 'value' | 'graphs'
 type ScoreMode = 'best' | 'average'
@@ -12,21 +12,13 @@ interface LeaderboardHeaderProps {
     entries: LeaderboardEntry[]
     filteredEntryCount: number
     totalRuns: number
-    versions: BenchmarkVersion[]
     currentVersion: string | null
-    lastUpdated: string
-    providerFilter: string | null
-    providerColor?: string
+    officialOnly: boolean
     view: ViewMode
     scoreMode: ScoreMode
-    officialOnly: boolean
-    openWeightsOnly: boolean
     modelSearchValue: string
     onViewChange: (view: ViewMode) => void
     onScoreModeChange: (mode: ScoreMode) => void
-    onOfficialOnlyChange: (officialOnly: boolean) => void
-    onOpenWeightsOnlyChange: (openWeightsOnly: boolean) => void
-    onClearProviderFilter: () => void
     onModelSearchChange: (value: string) => void
 }
 
@@ -34,37 +26,28 @@ export function LeaderboardHeader({
     entries,
     filteredEntryCount,
     totalRuns,
-    versions,
     currentVersion,
-    lastUpdated,
-    providerFilter,
-    providerColor,
+    officialOnly,
     view,
     scoreMode,
-    officialOnly,
-    openWeightsOnly,
     modelSearchValue,
     onViewChange,
     onScoreModeChange,
-    onOfficialOnlyChange,
-    onOpenWeightsOnlyChange,
-    onClearProviderFilter,
     onModelSearchChange,
 }: LeaderboardHeaderProps) {
     return (
-        <header className="border-b border-border">
-            <div className="max-w-7xl mx-auto px-4 py-4 md:px-6 md:py-6">
-                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-                    <div className="flex flex-col items-start gap-2">
-                        <div className="flex items-center gap-3">
-                            <img src="/apple-touch-icon.png" alt="PinchBench - OpenClaw Benchmark" className="w-8 h-8 md:w-10 md:h-10" />
+        <header className="border-b border-border sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <div className="px-4 py-3 md:px-6 md:py-4">
+                <div className="flex items-center justify-between gap-4">
+                    <div className="flex items-center gap-3">
+                        <SidebarTrigger className="h-8 w-8" />
+                        <Link href="/" className="flex items-center gap-2.5 hover:opacity-80 transition-opacity">
+                            <img src="/apple-touch-icon.png" alt="PinchBench" className="w-7 h-7 md:w-8 md:h-8" />
                             <div>
-                                <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
-                                    <h1 className="text-xl md:text-2xl font-bold text-foreground">PinchBench</h1>
-                                </Link>
-                                <p className="hidden md:block text-sm text-muted-foreground">Find the best model for your OpenClaw</p>
+                                <h1 className="text-lg md:text-xl font-bold text-foreground">PinchBench</h1>
+                                <p className="hidden md:block text-xs text-muted-foreground">Find the best model for your OpenClaw</p>
                             </div>
-                        </div>
+                        </Link>
                     </div>
 
                     <div className="flex-1 flex justify-center max-w-sm w-full">
@@ -76,81 +59,37 @@ export function LeaderboardHeader({
                         />
                     </div>
 
-                    <div className="flex flex-col items-end gap-3">
-                        <div className="flex items-center gap-3">
-                            <Link
-                                href="/about"
-                                className="px-3 py-1 rounded-md text-sm font-medium text-foreground hover:bg-secondary transition-colors"
-                            >
-                                About
-                            </Link>
-                            <a
-                                href="https://github.com/pinchbench/skill"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="px-3 py-1 rounded-md text-sm font-medium text-foreground hover:bg-secondary transition-colors flex items-center gap-1.5"
-                            >
-                                <svg viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4" aria-hidden="true">
-                                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-                                </svg>
-                                <span className="hidden sm:inline">GitHub</span>
-                            </a>
-                        </div>
-                        <div className="hidden md:flex flex-col items-end gap-2">
-                            <VersionSelector versions={versions} currentVersion={currentVersion} />
-                            <label className="flex items-center gap-2 text-xs text-muted-foreground/90 cursor-pointer hover:text-foreground transition-colors">
-                                <input
-                                    type="checkbox"
-                                    checked={!officialOnly}
-                                    onChange={(e) => onOfficialOnlyChange(!e.target.checked)}
-                                    className="h-3.5 w-3.5 rounded border border-border/70 bg-muted/30 text-muted-foreground checked:border-muted-foreground checked:bg-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0"
-                                />
-                                Include unofficial runs
-                            </label>
-                            <label className="flex items-center gap-2 text-xs text-muted-foreground/90 cursor-pointer hover:text-foreground transition-colors">
-                                <input
-                                    type="checkbox"
-                                    checked={openWeightsOnly}
-                                    onChange={(e) => onOpenWeightsOnlyChange(e.target.checked)}
-                                    className="h-3.5 w-3.5 rounded border border-border/70 bg-muted/30 text-muted-foreground checked:border-muted-foreground checked:bg-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0"
-                                />
-                                Open-weight only
-                            </label>
-                            <span className="text-xs text-muted-foreground/60">Updated {lastUpdated}</span>
-                        </div>
-                    </div>
-                </div>
-
-                {!officialOnly && (
-                    <div className="mt-4 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
-                        Showing official + unofficial results
-                    </div>
-                )}
-
-                {providerFilter && (
-                    <div className="flex items-center gap-2 mt-4">
-                        <span className="text-sm text-muted-foreground">Filtered by provider:</span>
-                        <span
-                            className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium border"
-                            style={{
-                                color: providerColor,
-                                borderColor: providerColor,
-                            }}
+                    <div className="flex items-center gap-2">
+                        <Link
+                            href="/about"
+                            className="px-2.5 py-1.5 rounded-md text-sm font-medium text-foreground hover:bg-secondary transition-colors hidden sm:block"
+                        >
+                            About
+                        </Link>
+                        <a
+                            href="https://github.com/pinchbench/skill"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="px-2.5 py-1.5 rounded-md text-sm font-medium text-foreground hover:bg-secondary transition-colors flex items-center gap-1.5"
+                        >
+                            <svg viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4" aria-hidden="true">
+                                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+                            </svg>
+                            <span className="hidden sm:inline">GitHub</span>
+                        </a>
+                        <a
+                            href="https://github.com/pinchbench/skill"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
                         >
-                            {providerFilter}
-                            <button
-                                onClick={onClearProviderFilter}
-                                className="ml-1 hover:opacity-70 transition-opacity"
-                                aria-label="Clear provider filter"
-                            >
-                                x
-                            </button>
-                        </span>
+                            Run the benchmark →
+                        </a>
                     </div>
-                )}
+                </div>
 
-                {/* Navigation buttons - 2x3 grid on mobile, inline on desktop */}
-                <div className="grid grid-cols-3 gap-2 mt-4 md:mt-6 md:flex md:flex-wrap md:items-center">
+                {/* View mode buttons */}
+                <div className="grid grid-cols-3 gap-2 mt-3 md:mt-4 md:flex md:flex-wrap md:items-center">
                     <button
                         onClick={() => onViewChange('success')}
                         className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${view === 'success'
@@ -213,27 +152,6 @@ export function LeaderboardHeader({
                         </Link>
                     </div>
                 </div>
-                <div className="mt-4 flex flex-wrap items-center gap-4 text-xs text-muted-foreground md:hidden">
-                    <label className="flex items-center gap-2 cursor-pointer hover:text-foreground transition-colors">
-                        <input
-                            type="checkbox"
-                            checked={!officialOnly}
-                            onChange={(e) => onOfficialOnlyChange(!e.target.checked)}
-                            className="h-3.5 w-3.5 rounded border border-border/70 bg-muted/30 text-muted-foreground checked:border-muted-foreground checked:bg-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0"
-                        />
-                        Include unofficial runs
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer hover:text-foreground transition-colors">
-                        <input
-                            type="checkbox"
-                            checked={openWeightsOnly}
-                            onChange={(e) => onOpenWeightsOnlyChange(e.target.checked)}
-                            className="h-3.5 w-3.5 rounded border border-border/70 bg-muted/30 text-muted-foreground checked:border-muted-foreground checked:bg-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0"
-                        />
-                        Open-weight only
-                    </label>
-                    <span className="text-muted-foreground/60">Updated {lastUpdated}</span>
-                </div>
             </div>
         </header>
     )
diff --git a/components/leaderboard-view.tsx b/components/leaderboard-view.tsx
index e8ccb9a..c5abd32 100644
--- a/components/leaderboard-view.tsx
+++ b/components/leaderboard-view.tsx
@@ -3,14 +3,18 @@
 import { useCallback, useMemo, useState } from 'react'
 import { useSearchParams, useRouter, usePathname } from 'next/navigation'
 import type { LeaderboardEntry, BenchmarkVersion } from '@/lib/types'
-import { PROVIDER_COLORS } from '@/lib/types'
+
 import { SimpleLeaderboard } from '@/components/simple-leaderboard'
 import { ScatterGraphs } from '@/components/scatter-graphs'
 import { TaskHeatmap } from '@/components/task-heatmap'
 import { ScoreDistribution } from '@/components/score-distribution'
 import { ModelRadar } from '@/components/model-radar'
 import { LeaderboardHeader } from '@/components/leaderboard-header'
+import { FilterSidebar } from '@/components/filter-sidebar'
 import { KiloClawAdCard } from '@/components/kiloclaw-ad-card'
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
+import { TopBanner } from '@/components/top-banner'
+
 
 type ViewMode = 'success' | 'speed' | 'cost' | 'value' | 'graphs'
 type ScoreMode = 'best' | 'average'
@@ -46,7 +50,7 @@ export function LeaderboardView({ entries, lastUpdated, versions, currentVersion
     const initialScoreMode = VALID_SCORE_MODES.includes(searchParams.get('score') as ScoreMode)
         ? (searchParams.get('score') as ScoreMode)
         : 'best'
-    const initialProvider = searchParams.get('provider') || null
+    const initialProviders = searchParams.get('provider')?.split(',').filter(Boolean).map(p => p.toLowerCase()) || []
     const initialOpenWeights = searchParams.get('weights') === 'open'
     const initialGraphTab = VALID_GRAPH_TABS.includes(searchParams.get('graph') as GraphSubTab)
         ? (searchParams.get('graph') as GraphSubTab)
@@ -56,7 +60,7 @@ export function LeaderboardView({ entries, lastUpdated, versions, currentVersion
     const [view, setViewState] = useState<ViewMode>(initialView)
     const [officialOnlyState, setOfficialOnlyState] = useState<boolean>(officialOnly)
     const [scoreMode, setScoreModeState] = useState<ScoreMode>(initialScoreMode)
-    const [providerFilter, setProviderFilterState] = useState<string | null>(initialProvider)
+    const [providerFilters, setProviderFiltersState] = useState<string[]>(initialProviders)
     const [openWeightsOnly, setOpenWeightsOnlyState] = useState<boolean>(initialOpenWeights)
     const [graphSubTab, setGraphSubTabState] = useState<GraphSubTab>(initialGraphTab)
     const [modelSearch, setModelSearchState] = useState<string>(initialModelSearch)
@@ -88,9 +92,31 @@ export function LeaderboardView({ entries, lastUpdated, versions, currentVersion
         updateUrl({ score: m })
     }, [updateUrl])
 
-    const setProviderFilter = useCallback((p: string | null) => {
-        setProviderFilterState(p)
-        updateUrl({ provider: p })
+    const toggleProviderFilter = useCallback((p: string) => {
+        const normalizedP = p.toLowerCase()
+        const isCurrentlyActive = providerFilters.includes(normalizedP)
+        const next = isCurrentlyActive 
+            ? providerFilters.filter(item => item !== normalizedP)
+            : [...providerFilters, normalizedP]
+        
+        setProviderFiltersState(next)
+        updateUrl({ provider: next.length ? next.join(',') : null })
+    }, [providerFilters, updateUrl])
+
+    const clearProviderFilters = useCallback(() => {
+        setProviderFiltersState([])
+        updateUrl({ provider: null })
+    }, [updateUrl])
+
+    const clearAllFilters = useCallback(() => {
+        setOfficialOnlyState(true)
+        setOpenWeightsOnlyState(false)
+        setProviderFiltersState([])
+        updateUrl({
+            official: null,
+            weights: null,
+            provider: null
+        })
     }, [updateUrl])
 
     const setOpenWeightsOnly = useCallback((v: boolean) => {
@@ -125,98 +151,112 @@ export function LeaderboardView({ entries, lastUpdated, versions, currentVersion
 
     const filteredEntries = useMemo(() => {
         return entries.filter(entry => {
-            if (providerFilter && entry.provider.toLowerCase() !== providerFilter.toLowerCase()) return false
+            if (providerFilters.length > 0 && !providerFilters.some(p => p.toLowerCase() === entry.provider.toLowerCase())) return false
             if (openWeightsOnly && entry.weights !== 'Open') return false
             if (modelSearch && !entry.model.toLowerCase().includes(modelSearch.toLowerCase())) return false
             return true
         })
-    }, [entries, providerFilter, openWeightsOnly, modelSearch])
+    }, [entries, providerFilters, openWeightsOnly, modelSearch])
 
-    const providerColor = providerFilter
-        ? PROVIDER_COLORS[providerFilter.toLowerCase()] || '#666'
-        : undefined
-
-    const totalRuns = entries.reduce((acc, entry) => acc + (entry.submission_count || 1), 0)
+    const totalRuns = useMemo(() => {
+        return filteredEntries.reduce((sum, entry) => sum + (entry.submission_count || 1), 0)
+    }, [filteredEntries])
 
     return (
-        <div className="min-h-screen bg-background">
-            <LeaderboardHeader
+        <SidebarProvider defaultOpen={true}>
+            <FilterSidebar
                 entries={entries}
-                filteredEntryCount={filteredEntries.length}
-                totalRuns={totalRuns}
                 versions={versions}
                 currentVersion={currentVersion}
-                lastUpdated={lastUpdated}
-                providerFilter={providerFilter}
-                providerColor={providerColor}
-                view={view}
-                scoreMode={scoreMode}
                 officialOnly={officialOnlyState}
                 openWeightsOnly={openWeightsOnly}
-                onViewChange={setView}
-                onScoreModeChange={setScoreMode}
+                providerFilters={providerFilters}
+                lastUpdated={lastUpdated}
                 onOfficialOnlyChange={setOfficialOnly}
                 onOpenWeightsOnlyChange={setOpenWeightsOnly}
-                onClearProviderFilter={() => setProviderFilter(null)}
-                onModelSearchChange={handleModelSearchChange}
-                modelSearchValue={modelSearch}
+                onProviderToggle={toggleProviderFilter}
+                onClearProviders={clearProviderFilters}
+                onClearAll={clearAllFilters}
             />
+            <SidebarInset>
+                <TopBanner />
+                <LeaderboardHeader
+                    entries={entries}
+                    filteredEntryCount={filteredEntries.length}
+                    totalRuns={totalRuns}
+                    currentVersion={currentVersion}
+                    officialOnly={officialOnlyState}
+                    view={view}
+                    scoreMode={scoreMode}
+                    modelSearchValue={modelSearch}
+                    onViewChange={setView}
+                    onScoreModeChange={setScoreMode}
+                    onModelSearchChange={handleModelSearchChange}
+                />
 
-            <main className="max-w-7xl mx-auto px-6 py-8">
-                {view === 'graphs' ? (
-                    <div>
-                        {/* Graph sub-tabs */}
-                        <div className="flex gap-1 rounded-lg border border-border bg-background p-1 w-fit mb-6">
-                            {([
-                                ['scatter', 'Scatter Plots'],
-                                ['heatmap', 'Task Heatmap'],
-                                ['distribution', 'Score Distribution'],
-                                ['radar', 'Model Comparison'],
-                            ] as const).map(([tab, label]) => (
-                                <button
-                                    key={tab}
-                                    onClick={() => setGraphSubTab(tab)}
-                                    className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${graphSubTab === tab
-                                        ? 'bg-primary text-primary-foreground'
-                                        : 'text-muted-foreground hover:text-foreground'
-                                        }`}
-                                >
-                                    {label}
-                                </button>
-                            ))}
+                <section className="px-4 py-6 md:px-6 md:py-8">
+                    {!officialOnlyState && (
+                        <div className="mb-4 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
+                            Showing official + unofficial results
                         </div>
+                    )}
 
-                        {graphSubTab === 'scatter' && (
-                            <ScatterGraphs entries={filteredEntries} scoreMode={scoreMode} />
-                        )}
-                        {graphSubTab === 'heatmap' && (
-                            <TaskHeatmap
-                                entries={filteredEntries}
-                                selectedCategories={selectedCategories}
-                                onCategoriesChange={setSelectedCategories}
-                            />
-                        )}
-                        {graphSubTab === 'distribution' && (
-                            <ScoreDistribution entries={filteredEntries} scoreMode={scoreMode} currentVersion={currentVersion} officialOnly={officialOnlyState} />
-                        )}
-                        {graphSubTab === 'radar' && (
-                            <ModelRadar entries={filteredEntries} scoreMode={scoreMode} />
-                        )}
-
-                        <KiloClawAdCard />
-                    </div>
-                ) : (
-                    <SimpleLeaderboard
-                        entries={filteredEntries}
-                        view={view as 'success' | 'speed' | 'cost' | 'value'}
-                        scoreMode={scoreMode}
-                        benchmarkVersion={currentVersion}
-                        officialOnly={officialOnlyState}
-                        onScoreModeChange={setScoreMode}
-                        onProviderClick={setProviderFilter}
-                    />
-                )}
-            </main>
-        </div>
+                    {view === 'graphs' ? (
+                        <div>
+                            {/* Graph sub-tabs */}
+                            <div className="flex gap-1 rounded-lg border border-border bg-background p-1 w-fit mb-6">
+                                {([
+                                    ['scatter', 'Scatter Plots'],
+                                    ['heatmap', 'Task Heatmap'],
+                                    ['distribution', 'Score Distribution'],
+                                    ['radar', 'Model Comparison'],
+                                ] as const).map(([tab, label]) => (
+                                    <button
+                                        key={tab}
+                                        onClick={() => setGraphSubTab(tab)}
+                                        className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${graphSubTab === tab
+                                            ? 'bg-primary text-primary-foreground'
+                                            : 'text-muted-foreground hover:text-foreground'
+                                            }`}
+                                    >
+                                        {label}
+                                    </button>
+                                ))}
+                            </div>
+
+                            {graphSubTab === 'scatter' && (
+                                <ScatterGraphs entries={filteredEntries} scoreMode={scoreMode} />
+                            )}
+                            {graphSubTab === 'heatmap' && (
+                                <TaskHeatmap
+                                    entries={filteredEntries}
+                                    scoreMode={scoreMode}
+                                    selectedCategories={selectedCategories}
+                                    onCategoriesChange={setSelectedCategories}
+                                />
+                            )}
+                            {graphSubTab === 'distribution' && (
+                                <ScoreDistribution entries={filteredEntries} scoreMode={scoreMode} currentVersion={currentVersion} officialOnly={officialOnlyState} />
+                            )}
+                            {graphSubTab === 'radar' && (
+                                <ModelRadar entries={filteredEntries} scoreMode={scoreMode} />
+                            )}
+
+                            <KiloClawAdCard />
+                        </div>
+                    ) : (
+                        <SimpleLeaderboard
+                            entries={filteredEntries}
+                            view={view as 'success' | 'speed' | 'cost' | 'value'}
+                            scoreMode={scoreMode}
+                            benchmarkVersion={currentVersion}
+                            officialOnly={officialOnlyState}
+                            onScoreModeChange={setScoreMode}
+                            onProviderClick={toggleProviderFilter}
+                        />
+                    )}
+                </section>
+            </SidebarInset>
+        </SidebarProvider>
     )
 }
diff --git a/components/task-heatmap.tsx b/components/task-heatmap.tsx
index 99258f6..144cea6 100644
--- a/components/task-heatmap.tsx
+++ b/components/task-heatmap.tsx
@@ -10,6 +10,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 
 interface TaskHeatmapProps {
   entries: LeaderboardEntry[]
+  scoreMode: 'best' | 'average'
   selectedCategories: string[]
   onCategoriesChange: (categories: string[]) => void
 }
@@ -38,7 +39,7 @@ function getScoreTextColor(ratio: number): string {
   return 'hsl(0, 70%, 75%)'
 }
 
-export function TaskHeatmap({ entries, selectedCategories, onCategoriesChange }: TaskHeatmapProps) {
+export function TaskHeatmap({ entries, scoreMode, selectedCategories, onCategoriesChange }: TaskHeatmapProps) {
   const [modelData, setModelData] = useState<ModelTaskData[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
diff --git a/lib/mock-data.ts b/lib/mock-data.ts
index 9e50464..3ce0698 100644
--- a/lib/mock-data.ts
+++ b/lib/mock-data.ts
@@ -50,6 +50,7 @@ export const mockSubmissions: Record<string, Submission> = {
     provider: "anthropic",
     timestamp: "2026-02-10T15:30:00Z",
     openclaw_version: "2.1.0",
+    benchmark_version: "v1.0.0",
     total_score: 9.2,
     max_score: 10.0,
     metadata: {
