diff --git a/src/pages/Stats.tsx b/src/pages/Stats.tsx
index 88672ce..6ec0b04 100644
--- a/src/pages/Stats.tsx
+++ b/src/pages/Stats.tsx
@@ -8,6 +8,8 @@ import {
   FileText,
   BookOpen,
   Activity,
+  TrendingUp,
+  Code,
 } from "lucide-react";
 
 // Site launched Dec 14, 2025 at 1:00 PM (v1.0.0), stats added same day (v1.2.0)
@@ -38,10 +40,50 @@ export default function Stats() {
     return null;
   }
 
+  // Stats card configuration with numbered sections
+  const statsCards = [
+    {
+      number: "01",
+      icon: Activity,
+      title: "Active Now",
+      value: stats.activeVisitors,
+      description: "Visitors on site",
+    },
+    {
+      number: "02",
+      icon: Eye,
+      title: "Total Views",
+      value: stats.totalPageViews,
+      description: `Since ${formatTrackingDate(stats.trackingSince)}`,
+      note: `Site launched ${SITE_LAUNCH_DATE}`,
+    },
+    {
+      number: "03",
+      icon: Users,
+      title: "Unique Visitors",
+      value: stats.uniqueVisitors,
+      description: "Unique sessions",
+    },
+    {
+      number: "04",
+      icon: BookOpen,
+      title: "Blog Posts",
+      value: stats.publishedPosts,
+      description: "Published posts",
+    },
+    {
+      number: "05",
+      icon: FileText,
+      title: "Pages",
+      value: stats.publishedPages,
+      description: "Static pages",
+    },
+  ];
+
   return (
-    <div className="stats-page">
+    <div className="stats-page-wide">
       {/* Header with back button */}
-      <nav className="stats-nav">
+      <nav className="stats-nav-wide">
         <button onClick={() => navigate("/")} className="back-button">
           <ArrowLeft size={16} />
           <span>Back</span>
@@ -49,80 +91,49 @@ export default function Stats() {
       </nav>
 
       {/* Page header */}
-      <header className="stats-header">
-        <h1 className="stats-title">Site Statistics</h1>
-        <p className="stats-subtitle">
+      <header className="stats-header-wide">
+        <h1 className="stats-title-wide">Site Statistics</h1>
+        <p className="stats-subtitle-wide">
           Real-time analytics for this site. All data updates automatically.
         </p>
       </header>
 
-      {/* Stats cards grid */}
-      <section className="stats-grid">
-        {/* Active visitors card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <Activity size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Active Now</span>
-          </div>
-          <div className="stat-card-value">{stats.activeVisitors}</div>
-          <div className="stat-card-desc">Visitors on site</div>
-        </div>
-
-        {/* Total page views card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <Eye size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Total Views</span>
-          </div>
-          <div className="stat-card-value">{stats.totalPageViews}</div>
-          <div className="stat-card-desc">
-            Since {formatTrackingDate(stats.trackingSince)}
-          </div>
-          <div className="stat-card-note">Site launched {SITE_LAUNCH_DATE}</div>
-        </div>
-
-        {/* Unique visitors card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <Users size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Unique Visitors</span>
-          </div>
-          <div className="stat-card-value">{stats.uniqueVisitors}</div>
-          <div className="stat-card-desc">Unique sessions</div>
-        </div>
-
-        {/* Published posts card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <BookOpen size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Blog Posts</span>
-          </div>
-          <div className="stat-card-value">{stats.publishedPosts}</div>
-          <div className="stat-card-desc">Published posts</div>
-        </div>
-
-        {/* Published pages card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <FileText size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Pages</span>
-          </div>
-          <div className="stat-card-value">{stats.publishedPages}</div>
-          <div className="stat-card-desc">Static pages</div>
-        </div>
+      {/* Modern horizontal stats cards */}
+      <section className="stats-cards-modern">
+        {statsCards.map((card) => {
+          const IconComponent = card.icon;
+          return (
+            <div key={card.number} className="stat-card-modern">
+              <div className="stat-card-modern-header">
+                <div className="stat-card-modern-icon">
+                  <IconComponent size={16} />
+                </div>
+                <span className="stat-card-modern-number">{card.number}</span>
+              </div>
+              <div className="stat-card-modern-content">
+                <h3 className="stat-card-modern-title">{card.title}</h3>
+                <p className="stat-card-modern-value">{card.value}</p>
+                <p className="stat-card-modern-desc">{card.description}</p>
+                {card.note && (
+                  <p className="stat-card-modern-note">{card.note}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
       </section>
 
       {/* Active visitors by page */}
       {stats.activeByPath.length > 0 && (
-        <section className="stats-section">
-          <h2 className="stats-section-title">Currently Viewing</h2>
-          <div className="stats-list">
+        <section className="stats-section-wide">
+          <h2 className="stats-section-title-wide">Currently Viewing</h2>
+          <div className="stats-list-wide">
             {stats.activeByPath.map((item) => (
-              <div key={item.path} className="stats-list-item">
-                <span className="stats-list-path">
+              <div key={item.path} className="stats-list-item-wide">
+                <span className="stats-list-path-wide">
                   {item.path === "/" ? "Home" : item.path}
                 </span>
-                <span className="stats-list-count">
+                <span className="stats-list-count-wide">
                   {item.count} {item.count === 1 ? "visitor" : "visitors"}
                 </span>
               </div>
@@ -133,16 +144,16 @@ export default function Stats() {
 
       {/* Page views by page */}
       {stats.pageStats.length > 0 && (
-        <section className="stats-section">
-          <h2 className="stats-section-title">Views by Page</h2>
-          <div className="stats-list">
+        <section className="stats-section-wide">
+          <h2 className="stats-section-title-wide">Views by Page</h2>
+          <div className="stats-list-wide">
             {stats.pageStats.map((item) => (
-              <div key={item.path} className="stats-list-item">
-                <div className="stats-list-info">
-                  <span className="stats-list-title">{item.title}</span>
-                  <span className="stats-list-type">{item.pageType}</span>
+              <div key={item.path} className="stats-list-item-wide">
+                <div className="stats-list-info-wide">
+                  <span className="stats-list-title-wide">{item.title}</span>
+                  <span className="stats-list-type-wide">{item.pageType}</span>
                 </div>
-                <span className="stats-list-count">
+                <span className="stats-list-count-wide">
                   {item.views} {item.views === 1 ? "view" : "views"}
                 </span>
               </div>