diff --git a/app/(home)/stats/overview/page.tsx b/app/(home)/stats/overview/page.tsx
index 3fef2bbe1ff..fed86b78b2a 100644
--- a/app/(home)/stats/overview/page.tsx
+++ b/app/(home)/stats/overview/page.tsx
@@ -286,19 +286,132 @@ export default function AvalancheMetrics() {
   if (loading) {
     return (
       <div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
-        <div className="container mx-auto px-6 py-10 pb-24 space-y-12">
-          <div className="space-y-3">
-            <div>
-              <h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
-                Avalanche L1s Index
-              </h1>
-              <p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
-                Loading comprehensive stats for Avalanche Mainnet L1s...
-              </p>
+        <main className="container mx-auto px-6 py-10 pb-24 space-y-8">
+          {/* Hero Section - Loading State */}
+          <div className="relative overflow-hidden rounded-2xl p-8 sm:p-12 mb-10">
+            {/* Multi-layer gradient background */}
+            <div className="absolute inset-0 bg-black" />
+            <div
+              className="absolute inset-0 opacity-60"
+              style={{
+                background: 'linear-gradient(140deg, #E84142 0%, transparent 70%)'
+              }}
+            />
+            <div
+              className="absolute inset-0 opacity-40"
+              style={{
+                background: 'linear-gradient(to top left, #3752AC 0%, transparent 50%)'
+              }}
+            />
+            <div
+              className="absolute inset-0 opacity-30"
+              style={{
+                background: 'radial-gradient(circle at 50% 50%, #E84142 0%, #3752AC 30%, transparent 70%)'
+              }}
+            />
+
+            {/* Content */}
+            <div className="relative z-10 space-y-8">
+              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                <div className="flex-1">
+                  <h1 className="text-3xl sm:text-4xl font-semibold text-white mb-3">
+                    Avalanche L1s Index
+                  </h1>
+                  <p className="text-white/80 text-sm sm:text-base max-w-3xl">
+                    Loading comprehensive stats for Avalanche Mainnet L1s...
+                  </p>
+                </div>
+
+                {/* Submit button skeleton */}
+                <div className="flex-shrink-0 h-9 w-32 bg-white/20 rounded-md animate-pulse" />
+              </div>
+
+              {/* Separator */}
+              <div className="border-t border-white/20" />
+
+              {/* Main metrics - 3 cards */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-6 text-center animate-pulse">
+                    <div className="h-4 bg-white/20 rounded mb-3 w-2/3 mx-auto" />
+                    <div className="h-10 bg-white/30 rounded w-1/2 mx-auto" />
+                  </div>
+                ))}
+              </div>
+
+              {/* Secondary metrics - 4 cards */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i} className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-5 text-center animate-pulse">
+                    <div className="h-3 bg-white/20 rounded mb-3 w-3/4 mx-auto" />
+                    <div className="h-7 bg-white/30 rounded w-1/3 mx-auto" />
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
-          <ChartSkeletonLoader />
-        </div>
+
+          {/* Separator */}
+          <div className="border-t border-neutral-200 dark:border-neutral-800 my-8" />
+
+          {/* Search Bar Skeleton */}
+          <div className="flex items-center gap-2">
+            <div className="h-10 bg-neutral-200 dark:bg-neutral-800 rounded-full flex-1 max-w-sm animate-pulse" />
+            <div className="h-9 w-28 bg-neutral-200 dark:bg-neutral-800 rounded-full animate-pulse" />
+          </div>
+
+          {/* Table Skeleton */}
+          <Card className="overflow-hidden border border-neutral-200 dark:border-neutral-800 py-0">
+            <div className="overflow-x-auto">
+              <table className="w-full border-collapse">
+                <thead className="bg-[#fcfcfd] dark:bg-neutral-900">
+                  <tr className="border-b border-neutral-200 dark:border-neutral-800">
+                    {["L1 Name", "Addresses", "Transactions", "ICM", "Validators", "Throughput", "Category", "Explorer"].map((header, i) => (
+                      <th key={i} className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-2 text-left">
+                        <div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded w-20 animate-pulse" />
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-neutral-950">
+                  {[...Array(10)].map((_, rowIndex) => (
+                    <tr key={rowIndex} className="border-b border-slate-100 dark:border-neutral-800">
+                      <td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
+                        <div className="flex items-center gap-3">
+                          <div className="h-8 w-8 rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
+                          <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-24 animate-pulse" />
+                        </div>
+                      </td>
+                      <td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
+                      </td>
+                      <td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
+                      </td>
+                      <td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 animate-pulse" />
+                      </td>
+                      <td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 animate-pulse" />
+                      </td>
+                      <td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
+                      </td>
+                      <td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
+                        <div className="h-6 bg-neutral-200 dark:bg-neutral-800 rounded-full w-20 animate-pulse" />
+                      </td>
+                      <td className="px-4 py-2">
+                        <div className="flex items-center justify-center">
+                          <div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </Card>
+        </main>
 
         {/* Bubble Navigation */}
         <StatsBubbleNav />
diff --git a/app/(home)/stats/validators/page.tsx b/app/(home)/stats/validators/page.tsx
index 1bda4ee4adc..119c6817757 100644
--- a/app/(home)/stats/validators/page.tsx
+++ b/app/(home)/stats/validators/page.tsx
@@ -358,19 +358,120 @@ export default function ValidatorStatsPage() {
   if (loading) {
     return (
       <div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
-        <div className="container mx-auto px-6 py-10 pb-24 space-y-12">
-          <div className="space-y-3">
-            <div>
-              <h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
-                Validator Stats
-              </h1>
-              <p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
-                Loading validator statistics for {network}...
-              </p>
+        <main className="container mx-auto px-6 py-10 pb-24 space-y-8">
+          {/* Header Section */}
+          <div className="mb-10">
+            <div className="flex items-start justify-between gap-4 mb-3">
+              <div>
+                <h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
+                  Validator Stats
+                </h1>
+                <p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed mt-2">
+                  Loading validator statistics for {network}...
+                </p>
+              </div>
             </div>
           </div>
-          <ChartSkeletonLoader />
-        </div>
+
+          {/* Aggregated Stats Cards Skeleton */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4">
+            {/* Total Chains Card */}
+            <Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 py-0 h-full flex flex-col lg:col-span-3">
+              <div className="p-6 text-center flex flex-col justify-center flex-1 animate-pulse">
+                <div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-3 w-24 mx-auto" />
+                <div className="h-10 bg-neutral-300 dark:bg-neutral-700 rounded w-16 mx-auto mb-2" />
+                <div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-32 mx-auto" />
+              </div>
+            </Card>
+
+            {/* Total Validators Card */}
+            <Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 py-0 h-full flex flex-col lg:col-span-3">
+              <div className="p-6 text-center flex flex-col justify-center flex-1 animate-pulse">
+                <div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-3 w-28 mx-auto" />
+                <div className="h-10 bg-neutral-300 dark:bg-neutral-700 rounded w-20 mx-auto mb-2" />
+                <div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-24 mx-auto" />
+              </div>
+            </Card>
+
+            {/* Version Breakdown Card */}
+            <Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 py-0 h-full flex flex-col lg:col-span-6">
+              <div className="p-6 flex flex-col justify-center flex-1 animate-pulse">
+                <div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-4 w-40" />
+                <div className="h-8 bg-neutral-200 dark:bg-neutral-800 rounded-full mb-4" />
+                <div className="flex flex-wrap gap-3 justify-center">
+                  {[1, 2, 3, 4, 5].map((i) => (
+                    <div key={i} className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-20" />
+                  ))}
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          {/* Search & Filter Bar Skeleton */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+            <div className="relative flex-1 max-w-sm">
+              <div className="h-10 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
+            </div>
+            <div className="h-9 w-9 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
+            <div className="flex items-center gap-2">
+              <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-24 animate-pulse" />
+              <div className="h-10 w-40 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
+            </div>
+          </div>
+
+          {/* Table Skeleton */}
+          <Card className="overflow-hidden border border-[#e1e2ea] dark:border-neutral-800 py-0">
+            <div className="overflow-x-auto">
+              <table className="w-full border-collapse">
+                <thead className="bg-[#fcfcfd] dark:bg-neutral-900">
+                  <tr className="border-b border-neutral-200 dark:border-neutral-800">
+                    {["Chain Name", "Validators", "By Nodes %", "By Stake %", "Version Breakdown", "Actions"].map((header, i) => (
+                      <th key={i} className={`border-r border-neutral-200 dark:border-neutral-800 px-4 py-2 ${i === 0 ? 'text-left' : i === 5 ? 'text-center' : 'text-right'}`}>
+                        <div className={`h-4 bg-neutral-300 dark:bg-neutral-700 rounded w-24 animate-pulse ${i === 0 ? '' : i === 5 ? 'mx-auto' : 'ml-auto'}`} />
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-neutral-950">
+                  {[...Array(10)].map((_, rowIndex) => (
+                    <tr key={rowIndex} className="border-b border-neutral-200 dark:border-neutral-800">
+                      <td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3">
+                        <div className="flex items-center gap-3">
+                          <div className="h-8 w-8 rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
+                          <div className="flex flex-col gap-1">
+                            <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-32 animate-pulse" />
+                            <div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-20 animate-pulse" />
+                          </div>
+                        </div>
+                      </td>
+                      <td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 ml-auto animate-pulse" />
+                      </td>
+                      <td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 ml-auto animate-pulse" />
+                      </td>
+                      <td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
+                        <div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 ml-auto animate-pulse" />
+                      </td>
+                      <td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3">
+                        <div className="space-y-2">
+                          <div className="h-6 bg-neutral-200 dark:bg-neutral-800 rounded-full animate-pulse" />
+                          <div className="flex gap-2">
+                            <div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
+                            <div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-center">
+                        <div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-md mx-auto animate-pulse" />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </Card>
+        </main>
         <StatsBubbleNav />
       </div>
     );
diff --git a/components/stats/ChainMetricsPage.tsx b/components/stats/ChainMetricsPage.tsx
index a0addeafb68..0539a23ca0a 100644
--- a/components/stats/ChainMetricsPage.tsx
+++ b/components/stats/ChainMetricsPage.tsx
@@ -388,18 +388,192 @@ export default function ChainMetricsPage({
   if (loading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-background to-muted/20 pt-8">
-        <div className="container mx-auto mt-4 p-6 pb-24 space-y-12">
-          <div className="space-y-2">
-            <div>
-              <h1 className="text-2xl md:text-5xl mb-4">
-                {chainName.includes("C-Chain")
-                  ? "Avalanche C-Chain Metrics"
-                  : `${chainName} L1 Metrics`}
-              </h1>
-              <p className="text-zinc-400 text-md text-left">{description}</p>
+        <div className="container mx-auto mt-4 p-4 sm:p-6 pb-24 space-y-8 sm:space-y-12">
+          {/* Hero Section Skeleton */}
+          <div className="relative overflow-hidden rounded-2xl p-8 sm:p-12">
+            {/* Multi-layer gradient background */}
+            <div className="absolute inset-0 bg-black" />
+            <div
+              className="absolute inset-0 opacity-60"
+              style={{
+                background: `linear-gradient(140deg, ${themeColor}88 0%, transparent 70%)`
+              }}
+            />
+            <div
+              className="absolute inset-0 opacity-40"
+              style={{
+                background: `linear-gradient(to top left, ${themeColor}66 0%, transparent 50%)`
+              }}
+            />
+            <div
+              className="absolute inset-0 opacity-30"
+              style={{
+                background: `radial-gradient(circle at 50% 50%, ${themeColor}88 0%, ${themeColor}44 30%, transparent 70%)`
+              }}
+            />
+
+            {/* Content */}
+            <div className="relative z-10">
+              {/* ExplorerDropdown Placeholder for L1s */}
+              {!chainName.includes("C-Chain") && (
+                <div className="flex justify-end mb-4">
+                  <div className="h-8 w-28 bg-white/20 rounded-md animate-pulse" />
+                </div>
+              )}
+
+              <div className="flex flex-col sm:flex-row items-start gap-6">
+                {/* Chain Logo Skeleton - Only show if chainLogoURI exists */}
+                {chainLogoURI && (
+                  <div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-white/20 animate-pulse shrink-0" />
+                )}
+
+                <div className="flex-1 min-w-0">
+                  <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold mb-3 text-white">
+                    {chainName.includes("C-Chain")
+                      ? "Avalanche C-Chain Metrics"
+                      : `${chainName} L1 Metrics`}
+                  </h1>
+                  <p className="text-white/80 text-sm sm:text-base text-left">
+                    {chainName.includes("C-Chain")
+                      ? "Loading Avalanche C-chain activity and network usage..."
+                      : `Loading ${chainName} metrics...`}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Network Overview Section */}
+          <div className="space-y-4 sm:space-y-6">
+            <div className="space-y-2">
+              <h2 className="text-lg sm:text-2xl font-medium text-foreground">Network Overview</h2>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
+              {/* Daily Active Addresses */}
+              <Card className="border-border">
+                <CardContent className="p-4 sm:p-6">
+                  <div className="flex items-center gap-2 mb-2 sm:mb-3">
+                    <div className="p-2 rounded-lg" style={{ backgroundColor: `${themeColor}20` }}>
+                      <Users className="h-6 w-6" style={{ color: themeColor }} />
+                    </div>
+                    <div className="text-sm text-muted-foreground">Daily Active Addresses</div>
+                  </div>
+                  <div className="h-8 bg-muted rounded w-24 animate-pulse" />
+                </CardContent>
+              </Card>
+
+              {/* Daily Transactions */}
+              <Card className="border-border">
+                <CardContent className="p-4 sm:p-6">
+                  <div className="flex items-center gap-2 mb-2 sm:mb-3">
+                    <div className="p-2 rounded-lg" style={{ backgroundColor: `${themeColor}20` }}>
+                      <Activity className="h-6 w-6" style={{ color: themeColor }} />
+                    </div>
+                    <div className="text-sm text-muted-foreground">Daily Transactions</div>
+                  </div>
+                  <div className="h-8 bg-muted rounded w-24 animate-pulse" />
+                </CardContent>
+              </Card>
+
+              {/* Total Contracts Deployed */}
+              <Card className="border-border">
+                <CardContent className="p-4 sm:p-6">
+                  <div className="flex items-center gap-2 mb-2 sm:mb-3">
+                    <div className="p-2 rounded-lg" style={{ backgroundColor: `${themeColor}20` }}>
+                      <FileText className="h-6 w-6" style={{ color: themeColor }} />
+                    </div>
+                    <div className="text-sm text-muted-foreground">Total Contracts Deployed</div>
+                  </div>
+                  <div className="h-8 bg-muted rounded w-24 animate-pulse" />
+                </CardContent>
+              </Card>
+
+              {/* Daily Interchain Messages */}
+              <Card className="border-border">
+                <CardContent className="p-4 sm:p-6">
+                  <div className="flex items-center gap-2 mb-2 sm:mb-3">
+                    <div className="p-2 rounded-lg" style={{ backgroundColor: `${themeColor}20` }}>
+                      <MessageSquare className="h-6 w-6" style={{ color: themeColor }} />
+                    </div>
+                    <div className="text-sm text-muted-foreground">Daily Interchain Messages</div>
+                  </div>
+                  <div className="h-8 bg-muted rounded w-24 animate-pulse" />
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+
+          {/* Historical Trends Section */}
+          <div className="space-y-4 sm:space-y-6">
+            <div className="space-y-2">
+              <h2 className="text-lg sm:text-2xl font-medium text-foreground">Historical Trends</h2>
+              <p className="text-zinc-400 text-sm sm:text-md text-left">
+                Track {chainName} network growth and activity over time
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
+              {chartConfigs.slice(0, 8).map((config) => {
+                const Icon = config.icon;
+                return (
+                  <Card key={config.metricKey} className="border-border overflow-hidden">
+                    {/* Chart Header */}
+                    <div className="px-4 sm:px-5 py-3 sm:py-4 border-b border-border">
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-center gap-2 sm:gap-3">
+                          <Icon className="h-5 w-5" style={{ color: themeColor }} />
+                          <div>
+                            <h3 className="font-semibold text-foreground text-sm sm:text-base">{config.title}</h3>
+                            <p className="text-xs text-muted-foreground">{config.description}</p>
+                          </div>
+                        </div>
+                        {/* Period Buttons */}
+                        <div className="flex gap-1">
+                          {["D", "W", "M", "Q", "Y"].map((period) => (
+                            <Button
+                              key={period}
+                              variant={period === "D" ? "default" : "ghost"}
+                              size="sm"
+                              disabled
+                              className="h-7 w-8 p-0 text-xs"
+                            >
+                              {period}
+                            </Button>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Chart Content */}
+                    <CardContent className="px-5 pt-6 pb-6">
+                      {/* Current Value Skeleton */}
+                      <div className="mb-3 sm:mb-4 flex items-baseline gap-2">
+                        <div className="h-8 bg-muted rounded w-32 animate-pulse" />
+                        <div className="h-4 bg-muted rounded w-16 animate-pulse" />
+                      </div>
+
+                      {/* Chart Area Skeleton */}
+                      <div className="h-[400px] bg-muted/30 rounded-lg animate-pulse flex items-end justify-around p-4">
+                        {[...Array(12)].map((_, barIndex) => (
+                          <div
+                            key={barIndex}
+                            className="bg-muted rounded-t"
+                            style={{
+                              width: '6%',
+                              height: `${30 + Math.random() * 70}%`
+                            }}
+                          />
+                        ))}
+                      </div>
+
+                      {/* Brush Slider Skeleton */}
+                      <div className="mt-4 h-20 bg-muted/20 rounded-lg animate-pulse" />
+                    </CardContent>
+                  </Card>
+                );
+              })}
             </div>
           </div>
-          <ChartSkeletonLoader />
         </div>
         <StatsBubbleNav />
       </div>