diff --git a/frontend/app/leaderboards/page.tsx b/frontend/app/leaderboards/page.tsx
index 9f698d0..36c9dda 100644
--- a/frontend/app/leaderboards/page.tsx
+++ b/frontend/app/leaderboards/page.tsx
@@ -2,53 +2,61 @@
 
 import { useEffect, useState } from "react"
 import { getApiUrl } from "@/lib/api-config"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import Link from "next/link"
-import { Star, MapPin, Music } from "lucide-react"
+import { Star, MapPin, Music, User, Trophy, Calendar, Sparkles } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 
 interface TopShow {
-    show: {
-        id: number
-        date: string
-        venue_id: number
-    }
-    venue: {
-        id: number
-        name: string
-        city: string
-        state: string
-    }
+    show: { id: number; date: string; venue_id: number }
+    venue: { id: number; name: string; city: string; state: string }
     avg_score: number
     review_count: number
 }
 
 interface TopVenue {
-    venue: {
-        id: number
-        name: string
-        city: string
-        state: string
-    }
+    venue: { id: number; name: string; city: string; state: string }
     avg_score: number
     review_count: number
 }
 
+interface TopPerformance {
+    performance: { id: number; show_id: number; song_id: number; notes: string | null }
+    song: { id: number; title: string; original_artist: string | null }
+    show: { id: number; date: string }
+    venue: { id: number; name: string; city: string; state: string }
+    avg_score: number
+    rating_count: number
+}
+
+interface TopUser {
+    profile: { id: number; user_id: number }
+    review_count: number
+}
 
 export default function LeaderboardsPage() {
     const [topShows, setTopShows] = useState<TopShow[]>([])
     const [topVenues, setTopVenues] = useState<TopVenue[]>([])
+    const [topPerformances, setTopPerformances] = useState<TopPerformance[]>([])
+    const [topUsers, setTopUsers] = useState<TopUser[]>([])
     const [loading, setLoading] = useState(true)
 
     useEffect(() => {
         const fetchData = async () => {
             try {
-                const [showsRes, venuesRes] = await Promise.all([
+                const [showsRes, venuesRes, perfsRes, usersRes] = await Promise.all([
                     fetch(`${getApiUrl()}/leaderboards/shows/top`),
-                    fetch(`${getApiUrl()}/leaderboards/venues/top`)
+                    fetch(`${getApiUrl()}/leaderboards/venues/top`),
+                    fetch(`${getApiUrl()}/leaderboards/performances/top`),
+                    fetch(`${getApiUrl()}/leaderboards/users/active`)
                 ])
 
                 setTopShows(await showsRes.json())
                 setTopVenues(await venuesRes.json())
+                setTopPerformances(await perfsRes.json())
+                setTopUsers(await usersRes.json())
             } catch (error) {
                 console.error("Failed to fetch leaderboards:", error)
             } finally {
@@ -59,89 +67,175 @@ export default function LeaderboardsPage() {
         fetchData()
     }, [])
 
-    if (loading) return <div className="container py-10">Loading leaderboards...</div>
+    const RankIcon = ({ rank }: { rank: number }) => {
+        if (rank === 1) return <Trophy className="h-5 w-5 text-yellow-500" />
+        if (rank === 2) return <Trophy className="h-4 w-4 text-gray-400" />
+        if (rank === 3) return <Trophy className="h-4 w-4 text-orange-400" />
+        return <span className="text-muted-foreground font-mono w-5 text-center">{rank}</span>
+    }
+
+    if (loading) {
+        return (
+            <div className="container py-10 flex items-center justify-center min-h-[50vh]">
+                <div className="flex flex-col items-center gap-4">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                    <p className="text-muted-foreground animate-pulse">Computing Heady Stats...</p>
+                </div>
+            </div>
+        )
+    }
 
     return (
-        <div className="container py-10 space-y-8">
+        <div className="container py-10 space-y-8 max-w-5xl">
             <div className="flex flex-col gap-2">
-                <h1 className="text-3xl font-bold tracking-tight">Leaderboards</h1>
-                <p className="text-muted-foreground">
-                    Top rated shows and venues.
+                <h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                    Leaderboards
+                </h1>
+                <p className="text-xl text-muted-foreground">
+                    Discover the highest rated shows, legendary jams, and top contributors.
                 </p>
             </div>
 
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-2">
-                {/* Top Shows */}
-                <Card>
-                    <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                            <Music className="h-5 w-5 text-blue-500" />
-                            Top Rated Shows
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <div className="space-y-4">
-                            {topShows.map((item, i) => (
-                                <div key={item.show.id} className="flex items-center justify-between">
-                                    <div className="flex items-center gap-3">
-                                        <span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${i === 0 ? "bg-yellow-100 text-yellow-700" :
-                                            i === 1 ? "bg-gray-100 text-gray-700" :
-                                                i === 2 ? "bg-orange-100 text-orange-700" : "text-muted-foreground"
-                                            }`}>
-                                            {i + 1}
-                                        </span>
-                                        <Link href={`/shows/${item.show.id}`} className="font-medium hover:underline block">
-                                            {new Date(item.show.date).toLocaleDateString()}
-                                            <span className="text-sm font-normal text-muted-foreground ml-2">
-                                                {item.venue?.name ? `${item.venue.name} (${item.venue.city}, ${item.venue.state})` : ""}
-                                            </span>
-                                        </Link>
+            <Tabs defaultValue="jams" className="w-full">
+                <TabsList className="grid w-full grid-cols-4 mb-8 h-12">
+                    <TabsTrigger value="jams" className="text-base font-medium">Heady Jams</TabsTrigger>
+                    <TabsTrigger value="shows" className="text-base font-medium">Top Shows</TabsTrigger>
+                    <TabsTrigger value="venues" className="text-base font-medium">Venues</TabsTrigger>
+                    <TabsTrigger value="users" className="text-base font-medium">Contributors</TabsTrigger>
+                </TabsList>
+
+                {/* HEADY JAMS CONTENT */}
+                <TabsContent value="jams">
+                    <Card className="border-none shadow-none bg-transparent">
+                        <div className="grid gap-4">
+                            {topPerformances.map((item, i) => (
+                                <div
+                                    key={item.performance.id}
+                                    className="group relative flex items-center gap-4 rounded-xl border bg-card p-4 shadow-sm transition-all hover:shadow-md hover:border-primary/50"
+                                >
+                                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/50 font-bold text-xl">
+                                        <RankIcon rank={i + 1} />
                                     </div>
-                                    <div className="flex items-center gap-1 text-sm">
-                                        <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
-                                        <span className="font-bold">{item.avg_score}</span>
-                                        <span className="text-muted-foreground text-xs">({item.review_count})</span>
+                                    <div className="flex flex-1 flex-col justify-center gap-1">
+                                        <div className="flex items-center gap-2">
+                                            <Link href={`/songs/${item.song.id}`} className="font-semibold text-lg hover:underline decoration-primary decoration-2 underline-offset-2">
+                                                {item.song.title}
+                                            </Link>
+                                            {item.performance.notes && (
+                                                <Badge variant="outline" className="text-[10px] font-normal hidden sm:inline-flex">
+                                                    {item.performance.notes}
+                                                </Badge>
+                                            )}
+                                        </div>
+                                        <div className="flex items-center text-sm text-muted-foreground gap-2">
+                                            <Calendar className="h-3 w-3" />
+                                            <Link href={`/shows/${item.show.id}`} className="hover:text-primary transition-colors">
+                                                {new Date(item.show.date).toLocaleDateString(undefined, {
+                                                    weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
+                                                })}
+                                            </Link>
+                                            <span className="text-muted-foreground/50">•</span>
+                                            <span className="truncate max-w-[200px]">{item.venue.name}</span>
+                                        </div>
+                                    </div>
+                                    <div className="flex flex-col items-end justify-center min-w-[80px]">
+                                        <div className="flex items-center gap-1.5">
+                                            <Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
+                                            <span className="text-xl font-bold">{item.avg_score.toFixed(2)}</span>
+                                        </div>
+                                        <span className="text-xs text-muted-foreground">{item.rating_count} votes</span>
                                     </div>
                                 </div>
                             ))}
+                            {topPerformances.length === 0 && (
+                                <div className="text-center py-12 text-muted-foreground">
+                                    No ranked jams yet. Start rating performances!
+                                </div>
+                            )}
                         </div>
-                    </CardContent>
-                </Card>
+                    </Card>
+                </TabsContent>
 
-                {/* Top Venues */}
-                <Card>
-                    <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                            <MapPin className="h-5 w-5 text-green-500" />
-                            Top Venues
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <div className="space-y-4">
-                            {topVenues.map((item, i) => (
-                                <div key={item.venue.id} className="flex items-center justify-between">
-                                    <div className="flex items-center gap-3 overflow-hidden">
-                                        <span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold ${i === 0 ? "bg-yellow-100 text-yellow-700" :
-                                            i === 1 ? "bg-gray-100 text-gray-700" :
-                                                i === 2 ? "bg-orange-100 text-orange-700" : "text-muted-foreground"
-                                            }`}>
-                                            {i + 1}
-                                        </span>
-                                        <Link href={`/venues/${item.venue.id}`} className="font-medium hover:underline truncate">
+                {/* TOP SHOWS CONTENT */}
+                <TabsContent value="shows">
+                    <div className="grid gap-4">
+                        {topShows.map((item, i) => (
+                            <div key={item.show.id} className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
+                                <div className="flex items-center gap-4">
+                                    <div className="font-mono text-muted-foreground w-6 text-center">{i + 1}</div>
+                                    <div>
+                                        <Link href={`/shows/${item.show.id}`} className="font-medium text-lg hover:underline block">
+                                            {new Date(item.show.date).toLocaleDateString(undefined, {
+                                                year: 'numeric', month: 'long', day: 'numeric'
+                                            })}
+                                        </Link>
+                                        <p className="text-sm text-muted-foreground">
+                                            {item.venue.name} • {item.venue.city}, {item.venue.state}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="text-right">
+                                    <div className="font-bold text-lg flex items-center justify-end gap-1">
+                                        <Star className="h-4 w-4 fill-primary/20 text-primary" />
+                                        {item.avg_score.toFixed(2)}
+                                    </div>
+                                    <div className="text-xs text-muted-foreground">{item.review_count} ratings</div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </TabsContent>
+
+                {/* VENUES CONTENT */}
+                <TabsContent value="venues">
+                    <div className="grid gap-4 md:grid-cols-2">
+                        {topVenues.map((item, i) => (
+                            <div key={item.venue.id} className="flex items-center justify-between p-4 rounded-lg border bg-card/50">
+                                <div className="flex items-center gap-3 overflow-hidden">
+                                    <div className={`
+                                        flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold shrink-0
+                                        ${i < 3 ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}
+                                     `}>
+                                        {i + 1}
+                                    </div>
+                                    <div>
+                                        <Link href={`/venues/${item.venue.id}`} className="font-medium hover:underline truncate block">
                                             {item.venue.name}
                                         </Link>
-                                    </div>
-                                    <div className="flex items-center gap-1 text-sm shrink-0">
-                                        <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
-                                        <span className="font-bold">{item.avg_score}</span>
-                                        <span className="text-muted-foreground text-xs">({item.review_count})</span>
+                                        <p className="text-xs text-muted-foreground truncate">
+                                            {item.venue.city}, {item.venue.state}
+                                        </p>
                                     </div>
                                 </div>
-                            ))}
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
+                                <Badge variant="secondary" className="gap-1 ml-2 shrink-0">
+                                    <Star className="h-3 w-3 fill-current" />
+                                    {item.avg_score.toFixed(2)}
+                                </Badge>
+                            </div>
+                        ))}
+                    </div>
+                </TabsContent>
+
+                {/* USERS CONTENT */}
+                <TabsContent value="users">
+                    <div className="grid gap-4 md:grid-cols-3">
+                        {topUsers.map((item, i) => (
+                            <Card key={item.profile.id} className="flex flex-col items-center justify-center p-6 text-center hover:border-primary/50 transition-colors">
+                                <Avatar className="h-16 w-16 mb-4">
+                                    <AvatarImage src={`https://api.dicebear.com/7.x/notionists/svg?seed=${item.profile.user_id}`} />
+                                    <AvatarFallback>U</AvatarFallback>
+                                </Avatar>
+                                <div className="font-semibold text-lg">User {item.profile.user_id}</div>
+                                <p className="text-sm text-muted-foreground mb-3">Top Contributor</p>
+                                <Badge variant="outline" className="bg-primary/5">
+                                    {item.review_count} Reviews
+                                </Badge>
+                            </Card>
+                        ))}
+                        {topUsers.length === 0 && <p className="col-span-3 text-center text-muted-foreground py-10">No active users yet.</p>}
+                    </div>
+                </TabsContent>
+            </Tabs>
         </div>
     )
 }