diff --git a/components/leaderboard/LeaderboardCards.tsx b/components/leaderboard/LeaderboardCards.tsx
index 52718e78..f4e36c23 100644
--- a/components/leaderboard/LeaderboardCards.tsx
+++ b/components/leaderboard/LeaderboardCards.tsx
@@ -4,16 +4,60 @@ import React, { useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
+import { LeaderboardEmptyState } from "./leaderboard-states";
 import { LeaderboardUser } from "@/lib/leaderboard-data";
 
 interface LeaderboardCardsProps {
   users: LeaderboardUser[];
   onUserVisibilityChange?: (isVisible: boolean) => void;
+  isLoading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
 }
 
-export function LeaderboardCards({ users, onUserVisibilityChange }: LeaderboardCardsProps) {
+export function LeaderboardCards({ users, onUserVisibilityChange, isLoading, error, onRetry }: LeaderboardCardsProps) {
   const parentRef = useRef<HTMLDivElement>(null);
 
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="flex items-center gap-4 p-4 rounded-xl border border-slate-800 bg-slate-900/40"
+          >
+            <div className="w-6 h-4 rounded bg-slate-800 animate-pulse" />
+            <div className="w-10 h-10 rounded-full bg-slate-800 animate-pulse" />
+            <div className="flex-1 space-y-2">
+              <div className="h-4 w-32 rounded bg-slate-800 animate-pulse" />
+              <div className="h-3 w-20 rounded bg-slate-800 animate-pulse" />
+            </div>
+            <div className="w-16 h-4 rounded bg-slate-800 animate-pulse hidden sm:block" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <LeaderboardErrorState
+        error={error}
+        onRetry={onRetry}
+        className="rounded-2xl border border-slate-800"
+      />
+    );
+  }
+
+  if (users.length === 0) {
+    return (
+      <LeaderboardEmptyState
+        onRetry={onRetry}
+        className="rounded-2xl border border-slate-800"
+      />
+    );
+  }
+
   const rowVirtualizer = useVirtualizer({
     count: users.length,
     getScrollElement: () => parentRef.current,
@@ -54,7 +98,7 @@ export function LeaderboardCards({ users, onUserVisibilityChange }: LeaderboardC
                   : "bg-slate-900/40 border-slate-800"
               )}
               style={{
-                height: `72px`, // slightly less than estimate to allow gap
+                height: `72px`,
                 transform: `translateY(${virtualRow.start}px)`,
               }}
             >
diff --git a/components/leaderboard/LeaderboardPodium.tsx b/components/leaderboard/LeaderboardPodium.tsx
index fcc84628..4eab2838 100644
--- a/components/leaderboard/LeaderboardPodium.tsx
+++ b/components/leaderboard/LeaderboardPodium.tsx
@@ -5,6 +5,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { motion } from "framer-motion";
 import { LeaderboardUser } from "@/lib/leaderboard-data";
 import { useReducedMotion } from "@/hooks/useReducedMotion";
+import { LeaderboardEmptyState } from "./leaderboard-states";
 
 interface LeaderboardPodiumProps {
   topThree: LeaderboardUser[];
@@ -24,6 +25,7 @@ interface LeaderboardPodiumProps {
  * - Responsive design with proper spacing and sizing
  * - Accessible: proper alt text, semantic structure
  * - Static fallback maintains visual hierarchy without motion
+ * - Gracefully handles empty or partial top-three data
  * 
  * WCAG 2.1 AA Compliance:
  * - Respects prefers-reduced-motion for users with vestibular disorders
@@ -38,6 +40,17 @@ export function LeaderboardPodium({
   const prefersReducedMotion = useReducedMotion();
   const reducedMotion = reducedMotionProp ?? prefersReducedMotion;
 
+  if (topThree.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <LeaderboardEmptyState
+          title="No Rankings Yet"
+          description="The leaderboard is empty. Be the first to start predicting and claim the top spot."
+        />
+      </div>
+    );
+  }
+
   // Static fallback component for reduced motion
   const StaticPodium = () => (
     <div 
@@ -47,24 +60,26 @@ export function LeaderboardPodium({
       aria-label="Leaderboard top 3 positions"
     >
       {/* 2nd Place */}
-      <div className="flex flex-col items-center">
-        <div className="relative mb-2">
-          <Avatar className="h-16 w-16 border-2 border-slate-300 ring-4 ring-slate-300/20">
-            <AvatarImage src={second?.avatarUrl} alt={second?.name} />
-            <AvatarFallback>{second?.name?.[0]}</AvatarFallback>
-          </Avatar>
-          <div 
-            className="absolute -top-2 -right-2 bg-slate-300 text-slate-900 text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
-            aria-label="2nd place"
-          >
-            2
+      {second ? (
+        <div className="flex flex-col items-center">
+          <div className="relative mb-2">
+            <Avatar className="h-16 w-16 border-2 border-slate-300 ring-4 ring-slate-300/20">
+              <AvatarImage src={second.avatarUrl} alt={second.name} />
+              <AvatarFallback>{second.name?.[0]}</AvatarFallback>
+            </Avatar>
+            <div 
+              className="absolute -top-2 -right-2 bg-slate-300 text-slate-900 text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
+              aria-label="2nd place"
+            >
+              2
+            </div>
+          </div>
+          <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-24 flex flex-col items-center justify-center p-2 text-center">
+            <span className="text-xs font-semibold text-white truncate w-full">{second.name}</span>
+            <span className="text-[10px] text-cyan-400 tabular-nums">+{second.profit}</span>
           </div>
         </div>
-        <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-24 flex flex-col items-center justify-center p-2 text-center">
-          <span className="text-xs font-semibold text-white truncate w-full">{second?.name}</span>
-          <span className="text-[10px] text-cyan-400 tabular-nums">+{second?.profit}</span>
-        </div>
-      </div>
+      ) : <div className="w-20 h-40" aria-hidden="true" />}
 
       {/* 1st Place */}
       <div className="flex flex-col items-center -mt-8">
@@ -91,24 +106,26 @@ export function LeaderboardPodium({
       </div>
 
       {/* 3rd Place */}
-      <div className="flex flex-col items-center">
-        <div className="relative mb-2">
-          <Avatar className="h-16 w-16 border-2 border-amber-600 ring-4 ring-amber-600/20">
-            <AvatarImage src={third?.avatarUrl} alt={third?.name} />
-            <AvatarFallback>{third?.name?.[0]}</AvatarFallback>
-          </Avatar>
-          <div 
-            className="absolute -top-2 -right-2 bg-amber-600 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
-            aria-label="3rd place"
-          >
-            3
+      {third ? (
+        <div className="flex flex-col items-center">
+          <div className="relative mb-2">
+            <Avatar className="h-16 w-16 border-2 border-amber-600 ring-4 ring-amber-600/20">
+              <AvatarImage src={third.avatarUrl} alt={third.name} />
+              <AvatarFallback>{third.name?.[0]}</AvatarFallback>
+            </Avatar>
+            <div 
+              className="absolute -top-2 -right-2 bg-amber-600 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
+              aria-label="3rd place"
+            >
+              3
+            </div>
+          </div>
+          <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-20 flex flex-col items-center justify-center p-2 text-center">
+            <span className="text-xs font-semibold text-white truncate w-full">{third.name}</span>
+            <span className="text-[10px] text-cyan-400 tabular-nums">+{third.profit}</span>
           </div>
         </div>
-        <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-20 flex flex-col items-center justify-center p-2 text-center">
-          <span className="text-xs font-semibold text-white truncate w-full">{third?.name}</span>
-          <span className="text-[10px] text-cyan-400 tabular-nums">+{third?.profit}</span>
-        </div>
-      </div>
+      ) : <div className="w-20 h-20" aria-hidden="true" />}
     </div>
   );
 
@@ -126,29 +143,31 @@ export function LeaderboardPodium({
       aria-label="Leaderboard top 3 positions"
     >
       {/* 2nd Place */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.2, duration: 0.6, ease: "easeOut" }}
-        className="flex flex-col items-center"
-      >
-        <div className="relative mb-2">
-          <Avatar className="h-16 w-16 border-2 border-slate-300 ring-4 ring-slate-300/20">
-            <AvatarImage src={second?.avatarUrl} alt={second?.name} />
-            <AvatarFallback>{second?.name?.[0]}</AvatarFallback>
-          </Avatar>
-          <div 
-            className="absolute -top-2 -right-2 bg-slate-300 text-slate-900 text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
-            aria-label="2nd place"
-          >
-            2
+      {second ? (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.6, ease: "easeOut" }}
+          className="flex flex-col items-center"
+        >
+          <div className="relative mb-2">
+            <Avatar className="h-16 w-16 border-2 border-slate-300 ring-4 ring-slate-300/20">
+              <AvatarImage src={second.avatarUrl} alt={second.name} />
+              <AvatarFallback>{second.name?.[0]}</AvatarFallback>
+            </Avatar>
+            <div 
+              className="absolute -top-2 -right-2 bg-slate-300 text-slate-900 text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
+              aria-label="2nd place"
+            >
+              2
+            </div>
           </div>
-        </div>
-        <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-24 flex flex-col items-center justify-center p-2 text-center">
-          <span className="text-xs font-semibold text-white truncate w-full">{second?.name}</span>
-          <span className="text-[10px] text-cyan-400 tabular-nums">+{second?.profit}</span>
-        </div>
-      </motion.div>
+          <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-24 flex flex-col items-center justify-center p-2 text-center">
+            <span className="text-xs font-semibold text-white truncate w-full">{second.name}</span>
+            <span className="text-[10px] text-cyan-400 tabular-nums">+{second.profit}</span>
+          </div>
+        </motion.div>
+      ) : <div className="w-20 h-40" aria-hidden="true" />}
 
       {/* 1st Place */}
       <motion.div
@@ -180,29 +199,31 @@ export function LeaderboardPodium({
       </motion.div>
 
       {/* 3rd Place */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.4, duration: 0.6, ease: "easeOut" }}
-        className="flex flex-col items-center"
-      >
-        <div className="relative mb-2">
-          <Avatar className="h-16 w-16 border-2 border-amber-600 ring-4 ring-amber-600/20">
-            <AvatarImage src={third?.avatarUrl} alt={third?.name} />
-            <AvatarFallback>{third?.name?.[0]}</AvatarFallback>
-          </Avatar>
-          <div 
-            className="absolute -top-2 -right-2 bg-amber-600 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
-            aria-label="3rd place"
-          >
-            3
+      {third ? (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4, duration: 0.6, ease: "easeOut" }}
+          className="flex flex-col items-center"
+        >
+          <div className="relative mb-2">
+            <Avatar className="h-16 w-16 border-2 border-amber-600 ring-4 ring-amber-600/20">
+              <AvatarImage src={third.avatarUrl} alt={third.name} />
+              <AvatarFallback>{third.name?.[0]}</AvatarFallback>
+            </Avatar>
+            <div 
+              className="absolute -top-2 -right-2 bg-amber-600 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center"
+              aria-label="3rd place"
+            >
+              3
+            </div>
           </div>
-        </div>
-        <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-20 flex flex-col items-center justify-center p-2 text-center">
-          <span className="text-xs font-semibold text-white truncate w-full">{third?.name}</span>
-          <span className="text-[10px] text-cyan-400 tabular-nums">+{third?.profit}</span>
-        </div>
-      </motion.div>
+          <div className="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-t-lg w-20 h-20 flex flex-col items-center justify-center p-2 text-center">
+            <span className="text-xs font-semibold text-white truncate w-full">{third.name}</span>
+            <span className="text-[10px] text-cyan-400 tabular-nums">+{third.profit}</span>
+          </div>
+        </motion.div>
+      ) : <div className="w-20 h-20" aria-hidden="true" />}
     </div>
   );
 }
diff --git a/components/leaderboard/LeaderboardSection.tsx b/components/leaderboard/LeaderboardSection.tsx
index 01674a9f..af2debd3 100644
--- a/components/leaderboard/LeaderboardSection.tsx
+++ b/components/leaderboard/LeaderboardSection.tsx
@@ -1,24 +1,75 @@
 "use client";
 
-import React, { useState, useMemo } from "react";
+import React, { useState } from "react";
 import { mockLeaderboardData } from "@/lib/leaderboard-data";
 import { LeaderboardPodium } from "./LeaderboardPodium";
 import { LeaderboardTable } from "./LeaderboardTable";
 import { LeaderboardCards } from "./LeaderboardCards";
 import { YourRankChip } from "./YourRankChip";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useLeaderboard } from "@/hooks/useLeaderboard";
+import {
+  LeaderboardEmptyState,
+  LeaderboardErrorState,
+  LeaderboardLoadingState,
+} from "./leaderboard-states";
+import { cn } from "@/lib/utils";
 
 export function LeaderboardSection() {
   const [activeTab, setActiveTab] = useState("all-time");
-  
-  // Realistically we'd fetch data here based on tab
-  const users = mockLeaderboardData;
+  const [isUserVisible, setIsUserVisible] = useState(true);
+
+  const { status, data, error, refetch, retry } = useLeaderboard({
+    fetcher: async () => {
+      const res = await fetch(`/api/leaderboard?period=${activeTab}`, {
+        cache: "no-store",
+      });
+      if (!res.ok) {
+        const body = await res.text();
+        throw new Error(body || `Failed to load leaderboard (${res.status})`);
+      }
+      return res.json();
+    },
+    initialData: mockLeaderboardData,
+    staleTime: 2 * 60 * 1000,
+  });
+
+  const users = data.length > 0 ? data : mockLeaderboardData;
   const topThree = users.slice(0, 3);
   const others = users.slice(3);
-  const currentUser = users.find(u => u.isCurrentUser)!;
+  const currentUser = users.find((u) => u.isCurrentUser);
 
-  // Tracking user visibility for the sticky chip
-  const [isUserVisible, setIsUserVisible] = useState(true);
+  const isLoading = status === "loading";
+  const isError = status === "error";
+  const isEmpty = status === "empty";
+  const showFallbackData = isError || isEmpty;
+
+  if (isLoading && data.length === 0) {
+    return (
+      <div className="space-y-8 pb-20">
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+          <div>
+            <h1 className="text-3xl font-black tracking-tighter text-white uppercase italic">
+              Top <span className="text-cyan-400">Predictors</span>
+            </h1>
+            <p className="text-slate-400 text-sm">
+              Ranked by total profit and accuracy across all markets.
+            </p>
+          </div>
+
+          <Tabs defaultValue="all-time" className="w-full md:w-auto" onValueChange={setActiveTab}>
+            <TabsList className="bg-slate-900 border border-slate-800">
+              <TabsTrigger value="daily">Daily</TabsTrigger>
+              <TabsTrigger value="weekly">Weekly</TabsTrigger>
+              <TabsTrigger value="all-time">All-Time</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        <LeaderboardLoadingState message="Loading leaderboard rankings..." />
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-8 pb-20">
@@ -41,25 +92,51 @@ export function LeaderboardSection() {
         </Tabs>
       </div>
 
+      {isError && (
+        <LeaderboardErrorState
+          error={error || undefined}
+          onRetry={async () => {
+            await retry();
+            if (status === "empty") {
+              await refetch();
+            }
+          }}
+        />
+      )}
+
+      {isEmpty && !isError && (
+        <LeaderboardEmptyState
+          onRetry={refetch}
+        />
+      )}
+
+      {showFallbackData && (
+        <div className="text-xs text-slate-500 text-center" role="note">
+          Showing cached rankings while refreshing.
+        </div>
+      )}
+
       {/* Mobile-only Podium */}
-      <div className="md:hidden">
+      <div className={isEmpty ? "hidden" : "md:hidden"}>
         <LeaderboardPodium topThree={topThree} />
       </div>
 
       {/* Desktop view: Full table includes top 3 */}
-      <div className="hidden md:block">
+      <div className={isEmpty ? "hidden" : "hidden md:block"}>
         <LeaderboardTable users={users} onUserVisibilityChange={setIsUserVisible} />
       </div>
 
       {/* Mobile view: Podium + Cards for others */}
-      <div className="md:hidden space-y-4">
+      <div className={isEmpty ? "hidden" : "md:hidden space-y-4"}>
         <div className="px-2">
             <h2 className="text-xs font-bold uppercase tracking-widest text-slate-500 mb-4">Rankings</h2>
             <LeaderboardCards users={others} onUserVisibilityChange={setIsUserVisible} />
         </div>
       </div>
 
-      <YourRankChip user={currentUser} isVisible={isUserVisible} />
+      {currentUser && (
+        <YourRankChip user={currentUser} isVisible={isUserVisible} />
+      )}
     </div>
   );
 }
diff --git a/components/leaderboard/LeaderboardTable.tsx b/components/leaderboard/LeaderboardTable.tsx
index 4014a432..8d689a55 100644
--- a/components/leaderboard/LeaderboardTable.tsx
+++ b/components/leaderboard/LeaderboardTable.tsx
@@ -2,19 +2,43 @@
 
 import React, { useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ArrowDownUp, ArrowUp, ArrowDown, ArrowUpCircle, Share2, Trophy } from "lucide-react";
+import { ArrowUpCircle, Share2, Trophy } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { LeaderboardEmptyState, LeaderboardLoadingState, LeaderboardErrorState } from "./leaderboard-states";
 import { LeaderboardUser } from "@/lib/leaderboard-data";
 
-type SortKey = "rank" | "name" | "profit" | "winRate" | "predictions";
+type SortKey = "rank" | "profit" | "winRate" | "predictions";
+
+type SortDirection = "asc" | "desc";
 
 interface LeaderboardTableProps {
   users: LeaderboardUser[];
   onUserVisibilityChange?: (isVisible: boolean) => void;
   onShare?: () => void;
+  isLoading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+}
+
+const AVATAR_WIDTHS = [40, 48, 64];
+
+function getAvatarSource(user: LeaderboardUser): string | undefined {
+  return user.avatarUrl;
+}
+
+function getResponsiveImageSource(source: string, width: number): string {
+  return source;
+}
+
+function formatProfit(value: number): string {
+  const formatted = value.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+  return `+${formatted}`;
 }
 
 const sortLabels: Record<SortKey, string> = {
@@ -24,14 +48,22 @@ const sortLabels: Record<SortKey, string> = {
   predictions: "Predictions",
 };
 
-export function LeaderboardTable({ users, onUserVisibilityChange, onShare }: LeaderboardTableProps) {
+export function LeaderboardTable({
+  users,
+  onUserVisibilityChange,
+  onShare,
+  isLoading = false,
+  error = null,
+  onRetry,
+}: LeaderboardTableProps) {
   const parentRef = useRef<HTMLDivElement>(null);
-  const [sortKey, setSortKey] = React.useState<SortKey>("profit");
-  const [sortDirection, setSortDirection] = React.useState<SortDirection>("desc");
+  const [sortKey, setSortKey] = useState<SortKey>("profit");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
   const [isScrolled, setIsScrolled] = useState(false);
   const [isNearBottom, setIsNearBottom] = useState(false);
 
   const sortedUsers = useMemo(() => {
+    if (!users || users.length === 0) return [];
     return [...users].sort((left, right) => {
       const leftValue = left[sortKey];
       const rightValue = right[sortKey];
@@ -40,13 +72,13 @@ export function LeaderboardTable({ users, onUserVisibilityChange, onShare }: Lea
           ? leftValue.localeCompare(rightValue)
           : Number(leftValue) - Number(rightValue);
 
-      return sortDescending ? -comparison : comparison;
+      return sortDirection === "desc" ? -comparison : comparison;
     });
-  }, [sortKey, sortDescending, users]);
+  }, [sortKey, sortDirection, users]);
 
   const rowVirtualizer = useVirtualizer({
     count: sortedUsers.length,
-    getScrollElement: () => scrollParentRef.current,
+    getScrollElement: () => parentRef.current,
     estimateSize: () => 64,
     overscan: 5,
   });
@@ -54,7 +86,7 @@ export function LeaderboardTable({ users, onUserVisibilityChange, onShare }: Lea
   const currentUserIndex = sortedUsers.findIndex((user) => user.isCurrentUser);
   const virtualItems = rowVirtualizer.getVirtualItems();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (onUserVisibilityChange) {
       const isVisible = virtualItems.some((vi: { index: number }) => vi.index === currentUserIndex);
       onUserVisibilityChange(isVisible);
@@ -94,26 +126,37 @@ export function LeaderboardTable({ users, onUserVisibilityChange, onShare }: Lea
       return;
     }
 
-    setSortKey(nextSortKey);
-    setSortDescending(true);
+    setSortKey(nextKey);
+    setSortDirection("desc");
   };
 
-  const sortButton = (key: SortKey, label: string) => (
-    <button
-      type="button"
-      className="font-medium underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-      aria-label={`Sort by ${label}`}
-      aria-pressed={sortKey === key}
-      onClick={() => handleSort(key)}
-    >
-      {label}
-      {sortKey === key && (
-        <span aria-hidden="true" className="ml-1">
-          {sortDescending ? "↓" : "↑"}
-        </span>
-      )}
-    </button>
-  );
+  const renderSortIcon = (key: SortKey) => {
+    if (sortKey !== key) return null;
+    return sortDirection === "desc" ? "↓" : "↑";
+  };
+
+  if (isLoading) {
+    return <LeaderboardLoadingState message="Loading rankings..." className="rounded-2xl border border-slate-800" />;
+  }
+
+  if (error) {
+    return (
+      <LeaderboardErrorState
+        error={error}
+        onRetry={onRetry}
+        className="rounded-2xl border border-slate-800"
+      />
+    );
+  }
+
+  if (users.length === 0) {
+    return (
+      <LeaderboardEmptyState
+        onRetry={onRetry}
+        className="rounded-2xl border border-slate-800"
+      />
+    );
+  }
 
   return (
     <div className="w-full bg-slate-950/50 rounded-2xl border border-slate-800 overflow-hidden relative">
@@ -204,8 +247,6 @@ export function LeaderboardTable({ users, onUserVisibilityChange, onShare }: Lea
                 <td className="px-4 py-3">{user.rank}</td>
                 <td className="flex items-center gap-3 px-4 py-3 font-medium">
                   {avatarSource && avatarSrcSet ? (
-                    // A native image is used so this explicit srcSet is passed through unchanged.
-                    // eslint-disable-next-line @next/next/no-img-element
                     <img
                       src={avatarSource}
                       srcSet={avatarSrcSet}
diff --git a/components/leaderboard/YourRankChip.tsx b/components/leaderboard/YourRankChip.tsx
index e3702ebd..03a97d25 100644
--- a/components/leaderboard/YourRankChip.tsx
+++ b/components/leaderboard/YourRankChip.tsx
@@ -8,13 +8,17 @@ import { LeaderboardUser } from "@/lib/leaderboard-data";
 import { cn } from "@/lib/utils";
 
 interface YourRankChipProps {
-  user: LeaderboardUser;
+  user?: LeaderboardUser | null;
   isVisible: boolean;
 }
 
 export function YourRankChip({ user, isVisible }: YourRankChipProps) {
   const [dismissed, setDismissed] = useState(false);
 
+  if (!user) {
+    return null;
+  }
+
   // Reset dismissed state if user becomes visible again (so it can show up again if they scroll away later)
   useEffect(() => {
     if (isVisible) setDismissed(false);
diff --git a/components/leaderboard/__tests__/LeaderboardCards.test.tsx b/components/leaderboard/__tests__/LeaderboardCards.test.tsx
new file mode 100644
index 00000000..939803cc
--- /dev/null
+++ b/components/leaderboard/__tests__/LeaderboardCards.test.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LeaderboardCards } from "../LeaderboardCards";
+import type { LeaderboardUser } from "@/lib/leaderboard-data";
+
+jest.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: ({ count }: { count: number }) => ({
+    getVirtualItems: () =>
+      Array.from({ length: count }, (_, index) => ({
+        index,
+        start: index * 80,
+        size: 80,
+      })),
+    getTotalSize: () => count * 80,
+  }),
+}));
+
+function createUsers(): LeaderboardUser[] {
+  return [
+    { rank: 1, name: "Alpha", profit: 1200, winRate: 62, predictions: 35 },
+    { rank: 2, name: "Beta", profit: 2200, winRate: 71, predictions: 40 },
+  ];
+}
+
+describe("LeaderboardCards", () => {
+  it("renders users when data is provided", () => {
+    render(<LeaderboardCards users={createUsers()} />);
+
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Beta")).toBeInTheDocument();
+  });
+
+  it("renders loading skeletons when isLoading is true", () => {
+    const { container } = render(<LeaderboardCards users={[]} isLoading={true} />);
+
+    const skeletons = container.querySelectorAll(".animate-pulse");
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  it("renders error state when error is provided", () => {
+    render(<LeaderboardCards users={[]} error="Failed to load" />);
+
+    expect(screen.getByText("Failed to load")).toBeInTheDocument();
+  });
+
+  it("renders empty state when users array is empty", () => {
+    render(<LeaderboardCards users={[]} />);
+
+    expect(screen.getByText("No Rankings Yet")).toBeInTheDocument();
+  });
+
+  it("renders retry button in error state when onRetry is provided", async () => {
+    const onRetry = jest.fn();
+    render(<LeaderboardCards users={[]} error="Failed" onRetry={onRetry} />);
+
+    const retryButton = screen.getByRole("button", { name: /try again/i });
+    await userEvent.click(retryButton);
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders retry button in empty state when onRetry is provided", async () => {
+    const onRetry = jest.fn();
+    render(<LeaderboardCards users={[]} onRetry={onRetry} />);
+
+    const retryButton = screen.getByRole("button", { name: /refresh/i });
+    await userEvent.click(retryButton);
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render cards when loading", () => {
+    render(<LeaderboardCards users={createUsers()} isLoading={true} />);
+
+    expect(screen.queryByText("Alpha")).not.toBeInTheDocument();
+  });
+
+  it("does not render cards when error is present", () => {
+    render(<LeaderboardCards users={createUsers()} error="Failed" />);
+
+    expect(screen.queryByText("Alpha")).not.toBeInTheDocument();
+  });
+
+  it("does not render cards when users is empty", () => {
+    render(<LeaderboardCards users={[]} />);
+
+    expect(screen.queryByText("Alpha")).not.toBeInTheDocument();
+  });
+});
diff --git a/components/leaderboard/__tests__/LeaderboardPodium.reduced-motion.test.tsx b/components/leaderboard/__tests__/LeaderboardPodium.reduced-motion.test.tsx
index 8fabd73b..5e349131 100644
--- a/components/leaderboard/__tests__/LeaderboardPodium.reduced-motion.test.tsx
+++ b/components/leaderboard/__tests__/LeaderboardPodium.reduced-motion.test.tsx
@@ -225,17 +225,14 @@ describe("LeaderboardPodium — reduced-motion implementation", () => {
     mockUseReducedMotion.mockReturnValue(true);
     const { unmount: unmountStatic } = render(<LeaderboardPodium topThree={[]} />);
     
-    // Should not crash and should render empty structure
-    const staticElement = screen.getByTestId("leaderboard-podium-static");
-    expect(staticElement).toBeInTheDocument();
+    expect(screen.getByText("No Rankings Yet")).toBeInTheDocument();
     
     unmountStatic();
 
     mockUseReducedMotion.mockReturnValue(false);
     render(<LeaderboardPodium topThree={[]} />);
     
-    const animatedElement = screen.getByTestId("leaderboard-podium-animated");
-    expect(animatedElement).toBeInTheDocument();
+    expect(screen.getByText("No Rankings Yet")).toBeInTheDocument();
   });
 
   it("handles partial data (missing users) gracefully", () => {
diff --git a/components/leaderboard/__tests__/LeaderboardSection.test.tsx b/components/leaderboard/__tests__/LeaderboardSection.test.tsx
new file mode 100644
index 00000000..15345860
--- /dev/null
+++ b/components/leaderboard/__tests__/LeaderboardSection.test.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LeaderboardSection } from "../LeaderboardSection";
+
+jest.mock("@/hooks/useLeaderboard", () => ({
+  useLeaderboard: () => ({
+    status: "success",
+    data: [
+      { rank: 1, name: "Alpha", profit: 1000, winRate: 80, predictions: 50, isCurrentUser: false },
+      { rank: 2, name: "Beta", profit: 900, winRate: 75, predictions: 40, isCurrentUser: false },
+      { rank: 3, name: "You (User)", profit: 800, winRate: 70, predictions: 30, isCurrentUser: true },
+    ],
+    error: null,
+    lastUpdated: Date.now(),
+    isStale: false,
+    refetch: jest.fn(),
+    retry: jest.fn(),
+    reset: jest.fn(),
+  }),
+  LeaderboardStatus: {
+    success: "success",
+  },
+}));
+
+jest.mock("framer-motion", () => {
+  const MockMotionDiv = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    (props, ref) => React.createElement("div", { ref, ...props })
+  );
+  MockMotionDiv.displayName = "MockMotionDiv";
+  return {
+    motion: { div: MockMotionDiv },
+    AnimatePresence: ({ children }: { children: React.ReactNode }) =>
+      React.createElement(React.Fragment, null, children),
+  };
+});
+
+jest.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: ({ count }: { count: number }) => ({
+    getVirtualItems: () =>
+      Array.from({ length: count }, (_, index) => ({
+        index,
+        start: index * 64,
+        size: 64,
+      })),
+    getTotalSize: () => count * 64,
+  }),
+}));
+
+describe("LeaderboardSection", () => {
+  it("renders the leaderboard title", () => {
+    render(<LeaderboardSection />);
+
+    expect(screen.getByText("Top Predictors")).toBeInTheDocument();
+  });
+
+  it("renders the tab navigation", () => {
+    render(<LeaderboardSection />);
+
+    expect(screen.getByRole("tab", { name: /daily/i })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: /weekly/i })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: /all-time/i })).toBeInTheDocument();
+  });
+
+  it("renders user names from data", () => {
+    render(<LeaderboardSection />);
+
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Beta")).toBeInTheDocument();
+  });
+
+  it("renders the Your Rank chip for current user", () => {
+    render(<LeaderboardSection />);
+
+    expect(screen.getByText("#3")).toBeInTheDocument();
+  });
+
+  it("switches tabs when clicked", async () => {
+    const user = userEvent.setup();
+    render(<LeaderboardSection />);
+
+    const weeklyTab = screen.getByRole("tab", { name: /weekly/i });
+    await user.click(weeklyTab);
+
+    expect(weeklyTab).toHaveAttribute("aria-selected", "true");
+  });
+});
diff --git a/components/leaderboard/__tests__/LeaderboardTable.test.tsx b/components/leaderboard/__tests__/LeaderboardTable.test.tsx
index 217e747d..aa0afbf5 100644
--- a/components/leaderboard/__tests__/LeaderboardTable.test.tsx
+++ b/components/leaderboard/__tests__/LeaderboardTable.test.tsx
@@ -52,7 +52,7 @@ function simulateScroll(div: HTMLDivElement, scrollTop: number, overrides?: Part
 }
 
 describe("LeaderboardTable", () => {
-  it("sorts by profit descending by default and exposes the active sort state", async () => {
+  it("sorts by profit descending by default and exposes the active sort state", () => {
     render(<LeaderboardTable users={createUsers()} />);
 
     const profitButton = screen.getByRole("button", { name: /sort by profit/i });
@@ -251,4 +251,119 @@ describe("LeaderboardTable", () => {
       });
     });
   });
+
+  describe("Empty, Loading, and Error states", () => {
+    it("renders loading state when isLoading is true", () => {
+      render(<LeaderboardTable users={[]} isLoading={true} />);
+
+      expect(screen.getByText("Loading rankings...")).toBeInTheDocument();
+      expect(screen.queryByRole("table")).not.toBeInTheDocument();
+    });
+
+    it("renders error state when error is provided", () => {
+      render(<LeaderboardTable users={[]} error="Something went wrong" />);
+
+      expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+      expect(screen.queryByRole("table")).not.toBeInTheDocument();
+    });
+
+    it("renders empty state when users array is empty and no isLoading/error", () => {
+      render(<LeaderboardTable users={[]} />);
+
+      expect(screen.getByText("No Rankings Yet")).toBeInTheDocument();
+      expect(screen.queryByRole("table")).not.toBeInTheDocument();
+    });
+
+    it("renders retry button in error state when onRetry is provided", async () => {
+      const onRetry = jest.fn();
+      render(<LeaderboardTable users={[]} error="Failed" onRetry={onRetry} />);
+
+      const retryButton = screen.getByRole("button", { name: /try again/i });
+      await userEvent.click(retryButton);
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders retry button in empty state when onRetry is provided", async () => {
+      const onRetry = jest.fn();
+      render(<LeaderboardTable users={[]} onRetry={onRetry} />);
+
+      const retryButton = screen.getByRole("button", { name: /refresh/i });
+      await userEvent.click(retryButton);
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not render table when loading even with users data", () => {
+      render(<LeaderboardTable users={createUsers()} isLoading={true} />);
+
+      expect(screen.queryByRole("row")).not.toBeInTheDocument();
+      expect(screen.getByText("Loading rankings...")).toBeInTheDocument();
+    });
+
+    it("does not render table when error is present", () => {
+      render(<LeaderboardTable users={createUsers()} error="Failed" />);
+
+      expect(screen.queryByRole("row")).not.toBeInTheDocument();
+    });
+
+    it("does not render table when users is empty", () => {
+      render(<LeaderboardTable users={[]} />);
+
+      expect(screen.queryByRole("row")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Partial data handling", () => {
+    it("renders partial data without crashing", () => {
+      const partialUsers: LeaderboardUser[] = [
+        { rank: 1, name: "Alpha", profit: 1000, winRate: 80, predictions: 50 },
+      ];
+
+      render(<LeaderboardTable users={partialUsers} />);
+
+      expect(screen.getByText("Alpha")).toBeInTheDocument();
+      expect(screen.getByRole("row")).toBeInTheDocument();
+    });
+
+    it("handles users with missing optional fields", () => {
+      const partialUsers: LeaderboardUser[] = [
+        { rank: 1, name: "Alpha", profit: 1000, winRate: 80, predictions: 50 },
+        { rank: 2, name: "Beta" },
+      ];
+
+      render(<LeaderboardTable users={partialUsers} />);
+
+      expect(screen.getByText("Alpha")).toBeInTheDocument();
+      expect(screen.getByText("Beta")).toBeInTheDocument();
+    });
+  });
+
+  describe("Sorting", () => {
+    it("sorts by rank ascending when rank sort is clicked", async () => {
+      const user = userEvent.setup();
+      render(<LeaderboardTable users={createUsers()} />);
+
+      const rankButton = screen.getByRole("button", { name: /sort by rank/i });
+      await user.click(rankButton);
+
+      expect(screen.getAllByRole("row")[1]).toHaveTextContent("Alpha");
+      expect(rankButton).toHaveAttribute("aria-pressed", "true");
+    });
+
+    it("toggles sort direction when same column is clicked", async () => {
+      const user = userEvent.setup();
+      render(<LeaderboardTable users={createUsers()} />);
+
+      const profitButton = screen.getByRole("button", { name: /sort by profit/i });
+      await user.click(profitButton);
+
+      expect(screen.getAllByRole("row")[1]).toHaveTextContent("Alpha");
+    });
+
+    it("renders sort direction indicator", async () => {
+      render(<LeaderboardTable users={createUsers()} />);
+
+      const profitButton = screen.getByRole("button", { name: /sort by profit/i });
+      expect(profitButton.textContent).toContain("↓");
+    });
+  });
 });
diff --git a/components/leaderboard/__tests__/YourRankChip.test.tsx b/components/leaderboard/__tests__/YourRankChip.test.tsx
new file mode 100644
index 00000000..3a3f048a
--- /dev/null
+++ b/components/leaderboard/__tests__/YourRankChip.test.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { YourRankChip } from "../YourRankChip";
+import type { LeaderboardUser } from "@/lib/leaderboard-data";
+
+jest.mock("framer-motion", () => {
+  const MockMotionDiv = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    (props, ref) => React.createElement("div", { ref, ...props })
+  );
+  MockMotionDiv.displayName = "MockMotionDiv";
+  return {
+    motion: { div: MockMotionDiv },
+    AnimatePresence: ({ children }: { children: React.ReactNode }) =>
+      React.createElement(React.Fragment, null, children),
+  };
+});
+
+const mockUser: LeaderboardUser = {
+  rank: 42,
+  name: "You (User)",
+  profit: 1234.56,
+  winRate: 67,
+  predictions: 123,
+  isCurrentUser: true,
+};
+
+describe("YourRankChip", () => {
+  it("renders user rank and profit when visible=false and user is provided", () => {
+    render(<YourRankChip user={mockUser} isVisible={false} />);
+
+    expect(screen.getByText("#42")).toBeInTheDocument();
+    expect(screen.getByText("+1234.56 XLM")).toBeInTheDocument();
+    expect(screen.getByText("Your Rank")).toBeInTheDocument();
+  });
+
+  it("does not render when user is null", () => {
+    render(<YourRankChip user={null} isVisible={false} />);
+
+    expect(screen.queryByText("Your Rank")).not.toBeInTheDocument();
+  });
+
+  it("does not render when user is undefined", () => {
+    render(<YourRankChip user={undefined} isVisible={false} />);
+
+    expect(screen.queryByText("Your Rank")).not.toBeInTheDocument();
+  });
+
+  it("does not render when isVisible is true", () => {
+    render(<YourRankChip user={mockUser} isVisible={true} />);
+
+    expect(screen.queryByText("Your Rank")).not.toBeInTheDocument();
+  });
+
+  it("renders when user becomes invisible after being visible", () => {
+    const { rerender } = render(<YourRankChip user={mockUser} isVisible={true} />);
+
+    expect(screen.queryByText("Your Rank")).not.toBeInTheDocument();
+
+    rerender(<YourRankChip user={mockUser} isVisible={false} />);
+
+    expect(screen.getByText("Your Rank")).toBeInTheDocument();
+  });
+
+  it("dismisses chip when close button is clicked", async () => {
+    render(<YourRankChip user={mockUser} isVisible={false} />);
+
+    const dismissButton = screen.getByLabelText("Dismiss rank chip");
+    await userEvent.click(dismissButton);
+
+    expect(screen.queryByText("Your Rank")).not.toBeInTheDocument();
+  });
+
+  it("shows chip again when user becomes visible after dismiss", async () => {
+    const { rerender } = render(<YourRankChip user={mockUser} isVisible={false} />);
+
+    const dismissButton = screen.getByLabelText("Dismiss rank chip");
+    await userEvent.click(dismissButton);
+
+    rerender(<YourRankChip user={mockUser} isVisible={true} />);
+    rerender(<YourRankChip user={mockUser} isVisible={false} />);
+
+    expect(screen.getByText("Your Rank")).toBeInTheDocument();
+  });
+
+  it("has proper accessibility labels", () => {
+    render(<YourRankChip user={mockUser} isVisible={false} />);
+
+    expect(screen.getByLabelText("Dismiss rank chip")).toBeInTheDocument();
+  });
+});
diff --git a/components/leaderboard/__tests__/leaderboard-states.test.tsx b/components/leaderboard/__tests__/leaderboard-states.test.tsx
new file mode 100644
index 00000000..53d897df
--- /dev/null
+++ b/components/leaderboard/__tests__/leaderboard-states.test.tsx
@@ -0,0 +1,120 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  LeaderboardEmptyState,
+  LeaderboardErrorState,
+  LeaderboardLoadingState,
+  LeaderboardSkeleton,
+} from "../leaderboard-states";
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: (props: any) => React.createElement("img", props),
+}));
+
+describe("LeaderboardEmptyState", () => {
+  it("renders default empty state content", () => {
+    render(<LeaderboardEmptyState />);
+
+    expect(screen.getByText("No Rankings Yet")).toBeInTheDocument();
+    expect(screen.getByRole("status")).toHaveAttribute("aria-live", "polite");
+  });
+
+  it("renders custom title and description", () => {
+    render(<LeaderboardEmptyState title="Custom Title" description="Custom description" />);
+
+    expect(screen.getByText("Custom Title")).toBeInTheDocument();
+    expect(screen.getByText("Custom description")).toBeInTheDocument();
+  });
+
+  it("renders retry button when onRetry is provided", async () => {
+    const onRetry = jest.fn();
+    render(<LeaderboardEmptyState onRetry={onRetry} />);
+
+    const retryButton = screen.getByRole("button", { name: /refresh/i });
+    await userEvent.click(retryButton);
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render retry button when onRetry is omitted", () => {
+    render(<LeaderboardEmptyState />);
+
+    expect(screen.queryByRole("button", { name: /refresh/i })).not.toBeInTheDocument();
+  });
+});
+
+describe("LeaderboardErrorState", () => {
+  it("renders default error state", () => {
+    render(<LeaderboardErrorState />);
+
+    expect(screen.getByText("Failed to Load Leaderboard")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveAttribute("aria-live", "assertive");
+  });
+
+  it("renders custom error message without sensitive data", () => {
+    render(<LeaderboardErrorState error="Something went wrong" />);
+
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
+
+  it("sanitizes error messages containing sensitive data", () => {
+    render(<LeaderboardErrorState error="Failed with token ghp_1234567890" />);
+
+    expect(screen.queryByText(/ghp_1234567890/)).not.toBeInTheDocument();
+    expect(screen.getByText(/Unable to load leaderboard data/)).toBeInTheDocument();
+  });
+
+  it("renders retry button when onRetry is provided", async () => {
+    const onRetry = jest.fn();
+    render(<LeaderboardErrorState onRetry={onRetry} />);
+
+    const retryButton = screen.getByRole("button", { name: /try again/i });
+    await userEvent.click(retryButton);
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render retry button when onRetry is omitted", () => {
+    render(<LeaderboardErrorState />);
+
+    expect(screen.queryByRole("button", { name: /try again/i })).not.toBeInTheDocument();
+  });
+});
+
+describe("LeaderboardLoadingState", () => {
+  it("renders default loading message", () => {
+    render(<LeaderboardLoadingState />);
+
+    expect(screen.getByText("Loading leaderboard...")).toBeInTheDocument();
+    expect(screen.getByRole("status")).toHaveAttribute("aria-live", "polite");
+  });
+
+  it("renders custom loading message", () => {
+    render(<LeaderboardLoadingState message="Please wait..." />);
+
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+
+  it("renders a spinner animation", () => {
+    const { container } = render(<LeaderboardLoadingState />);
+
+    const spinner = container.querySelector(".animate-spin");
+    expect(spinner).toBeInTheDocument();
+  });
+});
+
+describe("LeaderboardSkeleton", () => {
+  it("renders default number of skeleton rows", () => {
+    const { container } = render(<LeaderboardSkeleton />);
+
+    const skeletons = container.querySelectorAll(".animate-pulse");
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  it("renders custom number of rows", () => {
+    const { container } = render(<LeaderboardSkeleton rows={4} />);
+
+    const rows = container.querySelectorAll(".border-slate-800");
+    expect(rows.length).toBe(4);
+  });
+});
diff --git a/components/leaderboard/leaderboard-states.tsx b/components/leaderboard/leaderboard-states.tsx
new file mode 100644
index 00000000..669b280b
--- /dev/null
+++ b/components/leaderboard/leaderboard-states.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { AlertCircle, RefreshCw, Trophy } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface LeaderboardEmptyStateProps {
+  className?: string;
+  title?: string;
+  description?: string;
+  onRetry?: () => void;
+}
+
+export function LeaderboardEmptyState({
+  className,
+  title = "No Rankings Yet",
+  description = "The leaderboard is empty. Be the first predictor to start earning and claim the top spot.",
+  onRetry,
+}: LeaderboardEmptyStateProps) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        "flex flex-col items-center justify-center py-16 px-4 text-center",
+        className
+      )}
+    >
+      <div className="relative w-24 h-24 sm:w-32 sm:h-32 mb-6 text-slate-500">
+        <Image
+          src="/assets/empty-states/dashboard/leaderboard.svg"
+          alt={title}
+          width={128}
+          height={128}
+          className="w-full h-full object-contain"
+        />
+      </div>
+
+      <h3 className="text-lg sm:text-xl font-semibold text-white mb-2">
+        {title}
+      </h3>
+      <p className="text-sm sm:text-base text-slate-400 max-w-md mb-6">
+        {description}
+      </p>
+
+      {onRetry && (
+        <Button
+          onClick={onRetry}
+          variant="outline"
+          className="gap-2 border-cyan-500/30 hover:bg-cyan-500/10 hover:text-cyan-400"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Refresh
+        </Button>
+      )}
+    </div>
+  );
+}
+
+interface LeaderboardErrorStateProps {
+  className?: string;
+  error?: string;
+  onRetry?: () => void;
+}
+
+export function LeaderboardErrorState({
+  className,
+  error,
+  onRetry,
+}: LeaderboardErrorStateProps) {
+  const displayError =
+    error && !error.toLowerCase().includes("token") &&
+    !error.toLowerCase().includes("secret") &&
+    !error.toLowerCase().includes("password") &&
+    !error.toLowerCase().includes("key")
+      ? error
+      : "Unable to load leaderboard data. Please try again later.";
+
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      className={cn(
+        "flex flex-col items-center justify-center py-16 px-4 text-center border border-red-500/30 rounded-2xl bg-red-950/20",
+        className
+      )}
+    >
+      <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-red-500/10 flex items-center justify-center mb-4">
+        <AlertCircle className="w-8 h-8 sm:w-10 sm:h-10 text-red-400" />
+      </div>
+
+      <h3 className="text-lg sm:text-xl font-semibold text-red-100 mb-2">
+        Failed to Load Leaderboard
+      </h3>
+      <p className="text-sm sm:text-base text-red-300 max-w-sm mb-6">
+        {displayError}
+      </p>
+
+      {onRetry && (
+        <Button
+          onClick={onRetry}
+          variant="outline"
+          className="gap-2 border-red-500/30 hover:bg-red-500/10 hover:text-red-300"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Try Again
+        </Button>
+      )}
+    </div>
+  );
+}
+
+interface LeaderboardLoadingStateProps {
+  className?: string;
+  message?: string;
+}
+
+export function LeaderboardLoadingState({
+  className,
+  message = "Loading leaderboard...",
+}: LeaderboardLoadingStateProps) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        "flex flex-col items-center justify-center py-16 px-4",
+        className
+      )}
+    >
+      <div className="relative w-12 h-12 mb-4">
+        <div className="absolute inset-0 rounded-full border-4 border-slate-800" />
+        <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-cyan-400 border-r-cyan-400 animate-spin" />
+      </div>
+
+      <p className="text-slate-400 text-sm sm:text-base">{message}</p>
+    </div>
+  );
+}
+
+interface LeaderboardSkeletonProps {
+  className?: string;
+  rows?: number;
+}
+
+export function LeaderboardSkeleton({ className, rows = 8 }: LeaderboardSkeletonProps) {
+  return (
+    <div className={cn("w-full space-y-3", className)}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 px-4 py-3 rounded-xl border border-slate-800 bg-slate-900/40"
+        >
+          <div className="w-8 h-4 rounded bg-slate-800 animate-pulse" />
+          <div className="w-10 h-10 rounded-full bg-slate-800 animate-pulse" />
+          <div className="flex-1 space-y-2">
+            <div className="h-4 w-32 rounded bg-slate-800 animate-pulse" />
+            <div className="h-3 w-20 rounded bg-slate-800 animate-pulse" />
+          </div>
+          <div className="w-16 h-4 rounded bg-slate-800 animate-pulse hidden sm:block" />
+          <div className="w-16 h-4 rounded bg-slate-800 animate-pulse hidden sm:block" />
+          <div className="w-16 h-4 rounded bg-slate-800 animate-pulse hidden sm:block" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/hooks/__tests__/useLeaderboard.test.ts b/hooks/__tests__/useLeaderboard.test.ts
new file mode 100644
index 00000000..4ada138a
--- /dev/null
+++ b/hooks/__tests__/useLeaderboard.test.ts
@@ -0,0 +1,232 @@
+import { renderHook, act } from "@testing-library/react";
+import { useLeaderboard, LeaderboardStatus } from "@/hooks/useLeaderboard";
+import type { LeaderboardUser } from "@/lib/leaderboard-data";
+
+const mockData: LeaderboardUser[] = [
+  { rank: 1, name: "Alice", profit: 1000, winRate: 80, predictions: 50, isCurrentUser: true },
+  { rank: 2, name: "Bob", profit: 900, winRate: 75, predictions: 40 },
+];
+
+const mockEmptyData: LeaderboardUser[] = [];
+
+function createSuccessFetcher(data: LeaderboardUser[]) {
+  return jest.fn().mockResolvedValue(data);
+}
+
+function createErrorFetcher(message: string) {
+  return jest.fn().mockRejectedValue(new Error(message));
+}
+
+describe("useLeaderboard", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("starts with idle status when no initial data", () => {
+    const { result } = renderHook(() =>
+      useLeaderboard({ fetcher: createSuccessFetcher(mockData) })
+    );
+
+    expect(result.current.status).toBe("idle");
+    expect(result.current.data).toEqual([]);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("starts with success status when initial data is provided", () => {
+    const { result } = renderHook(() =>
+      useLeaderboard({ fetcher: createSuccessFetcher(mockData), initialData: mockData })
+    );
+
+    expect(result.current.status).toBe("success");
+    expect(result.current.data).toEqual(mockData);
+    expect(result.current.lastUpdated).not.toBeNull();
+  });
+
+  it("transitions to loading and then success on successful fetch", async () => {
+    const fetcher = createSuccessFetcher(mockData);
+    const { result } = renderHook(() => useLeaderboard({ fetcher }));
+
+    act(() => {
+      result.current.refetch();
+    });
+
+    expect(result.current.status).toBe("loading");
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.status).toBe("success");
+    expect(result.current.data).toEqual(mockData);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("transitions to error state on failed fetch", async () => {
+    const fetcher = createErrorFetcher("Network error");
+    const { result } = renderHook(() => useLeaderboard({ fetcher }));
+
+    act(() => {
+      result.current.refetch();
+    });
+
+    expect(result.current.status).toBe("loading");
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.status).toBe("error");
+    expect(result.current.error).toBe("Network error");
+  });
+
+  it("returns empty state when fetch returns empty array", async () => {
+    const fetcher = createSuccessFetcher(mockEmptyData);
+    const { result } = renderHook(() => useLeaderboard({ fetcher }));
+
+    act(() => {
+      result.current.refetch();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.status).toBe("empty");
+    expect(result.current.data).toEqual([]);
+  });
+
+  it("resets state when reset is called", async () => {
+    const fetcher = createSuccessFetcher(mockData);
+    const { result } = renderHook(() =>
+      useLeaderboard({ fetcher, initialData: mockData })
+    );
+
+    act(() => {
+      result.current.refetch();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.status).toBe("success");
+    expect(result.current.data).toEqual(mockData);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("retries fetch and succeeds after transient error", async () => {
+    const fetcher = jest
+      .fn()
+      .mockRejectedValueOnce(new Error("Transient error"))
+      .mockResolvedValueOnce(mockData);
+
+    const { result } = renderHook(() => useLeaderboard({ fetcher, maxRetries: 3, retryDelay: 0 }));
+
+    act(() => {
+      result.current.retry();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.status).toBe("error");
+    expect(result.current.error).toBe("Transient error");
+
+    act(() => {
+      result.current.retry();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.status).toBe("success");
+    expect(result.current.data).toEqual(mockData);
+  });
+
+  it("marks data as stale after staleTime", async () => {
+    const fetcher = createSuccessFetcher(mockData);
+    const { result } = renderHook(() =>
+      useLeaderboard({ fetcher, initialData: mockData, staleTime: 1000 })
+    );
+
+    expect(result.current.isStale).toBe(false);
+
+    act(() => {
+      jest.advanceTimersByTime(15000);
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.isStale).toBe(true);
+  });
+
+  it("does not mark data as stale before staleTime", async () => {
+    const fetcher = createSuccessFetcher(mockData);
+    const { result } = renderHook(() =>
+      useLeaderboard({ fetcher, initialData: mockData, staleTime: 5000 })
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(4000);
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.isStale).toBe(false);
+  });
+
+  it("does not set state after unmount", async () => {
+    const fetcher = jest.fn().mockResolvedValue(mockData);
+    const { result, unmount } = renderHook(() => useLeaderboard({ fetcher }));
+
+    act(() => {
+      unmount();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(true).toBe(true);
+  });
+
+  it("stops retrying after max retries are reached", async () => {
+    const fetcher = jest.fn().mockRejectedValue(new Error("Persistent error"));
+    const { result } = renderHook(() =>
+      useLeaderboard({ fetcher, maxRetries: 2, retryDelay: 0 })
+    );
+
+    act(() => {
+      result.current.retry();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    act(() => {
+      result.current.retry();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(result.current.status).toBe("error");
+    expect(result.current.error).toMatch(/maximum retry/i);
+  });
+});
diff --git a/hooks/useLeaderboard.ts b/hooks/useLeaderboard.ts
new file mode 100644
index 00000000..2c6dd65a
--- /dev/null
+++ b/hooks/useLeaderboard.ts
@@ -0,0 +1,139 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { LeaderboardUser } from "@/lib/leaderboard-data";
+
+export type LeaderboardStatus = "idle" | "loading" | "success" | "error" | "empty";
+
+export interface LeaderboardState {
+  status: LeaderboardStatus;
+  data: LeaderboardUser[];
+  error: string | null;
+  lastUpdated: number | null;
+  isStale: boolean;
+}
+
+export interface UseLeaderboardOptions {
+  /** Initial data to seed the state with (useful for SSR/hydration) */
+  initialData?: LeaderboardUser[];
+  /** Maximum age in ms before data is considered stale */
+  staleTime?: number;
+  /** Retry delay in ms */
+  retryDelay?: number;
+  /** Maximum number of retries */
+  maxRetries?: number;
+  /** Data fetcher function */
+  fetcher: () => Promise<LeaderboardUser[]>;
+}
+
+export interface UseLeaderboardReturn extends LeaderboardState {
+  refetch: () => Promise<void>;
+  retry: () => Promise<void>;
+  reset: () => void;
+}
+
+const DEFAULT_STALE_TIME = 5 * 60 * 1000; // 5 minutes
+const DEFAULT_RETRY_DELAY = 1000;
+const DEFAULT_MAX_RETRIES = 3;
+
+export function useLeaderboard({
+  initialData = [],
+  staleTime = DEFAULT_STALE_TIME,
+  retryDelay = DEFAULT_RETRY_DELAY,
+  maxRetries = DEFAULT_MAX_RETRIES,
+  fetcher,
+}: UseLeaderboardOptions): UseLeaderboardReturn {
+  const [state, setState] = useState<LeaderboardState>(() => ({
+    status: initialData.length > 0 ? "success" : "idle",
+    data: initialData,
+    error: null,
+    lastUpdated: initialData.length > 0 ? Date.now() : null,
+    isStale: false,
+  }));
+
+  const retryCountRef = useRef(0);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const executeFetch = useCallback(async () => {
+    setState((prev) => ({ ...prev, status: "loading", error: null }));
+
+    try {
+      const data = await fetcher();
+
+      if (!mountedRef.current) return;
+
+      const now = Date.now();
+      setState({
+        status: data.length === 0 ? "empty" : "success",
+        data,
+        error: null,
+        lastUpdated: now,
+        isStale: false,
+      });
+      retryCountRef.current = 0;
+    } catch (err) {
+      if (!mountedRef.current) return;
+
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setState((prev) => ({
+        ...prev,
+        status: "error",
+        error: message,
+      }));
+    }
+  }, [fetcher]);
+
+  const refetch = useCallback(async () => {
+    await executeFetch();
+  }, [executeFetch]);
+
+  const retry = useCallback(async () => {
+    if (retryCountRef.current >= maxRetries) {
+      setState((prev) => ({
+        ...prev,
+        error: "Maximum retry attempts reached. Please try again later.",
+      }));
+      return;
+    }
+
+    retryCountRef.current += 1;
+    await new Promise((resolve) => setTimeout(resolve, retryDelay));
+    await executeFetch();
+  }, [executeFetch, maxRetries, retryDelay]);
+
+  const reset = useCallback(() => {
+    retryCountRef.current = 0;
+    setState({
+      status: initialData.length > 0 ? "success" : "idle",
+      data: initialData,
+      error: null,
+      lastUpdated: initialData.length > 0 ? Date.now() : null,
+      isStale: false,
+    });
+  }, [initialData]);
+
+  useEffect(() => {
+    if (state.status === "success" && state.lastUpdated) {
+      const interval = setInterval(() => {
+        const age = Date.now() - state.lastUpdated!;
+        if (age > staleTime) {
+          setState((prev) => ({ ...prev, isStale: true }));
+        }
+      }, 10000);
+
+      return () => clearInterval(interval);
+    }
+  }, [state.status, state.lastUpdated, staleTime]);
+
+  return {
+    ...state,
+    refetch,
+    retry,
+    reset,
+  };
+}