diff --git a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
index 43bba23..48d46d3 100644
--- a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
+++ b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
@@ -79,57 +79,57 @@ export function AnalyticsDashboard() {
     <div className="space-y-4">
       {/* Key Metrics Cards - 3 columns */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-        <div className="bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl p-4 border border-blue-300/50 hover:border-blue-400 hover:shadow-xl transition-all shadow-md text-white">
-          <p className="text-xs uppercase tracking-wide font-bold text-blue-100 mb-2">Total Athletes</p>
+        <div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
+          <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p>
           <div className="flex items-baseline gap-2">
-            <div className="text-3xl font-black text-white">{totalUsers}</div>
-            <span className="text-xs text-blue-100 font-semibold">active</span>
+            <div className="text-2xl font-black text-white">{totalUsers}</div>
+            <span className="text-xs text-white font-semibold">active</span>
           </div>
         </div>
 
-        <div className="bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl p-4 border border-emerald-300/50 hover:border-emerald-400 hover:shadow-xl transition-all shadow-md text-white">
-          <p className="text-xs uppercase tracking-wide font-bold text-emerald-100 mb-2">Total Revenue</p>
+        <div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
+          <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p>
           <div className="flex items-baseline gap-2">
-            <div className="text-3xl font-black text-white">${totalRevenue.toLocaleString()}</div>
-            <span className="text-xs text-emerald-100 font-semibold">ytd</span>
+            <div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div>
+            <span className="text-xs text-white font-semibold">ytd</span>
           </div>
         </div>
 
-        <div className="bg-gradient-to-br from-purple-500 to-blue-500 rounded-xl p-4 border border-purple-300/50 hover:border-purple-400 hover:shadow-xl transition-all shadow-md text-white">
-          <p className="text-xs uppercase tracking-wide font-bold text-purple-100 mb-2">Active Members</p>
+        <div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
+          <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p>
           <div className="flex items-baseline gap-2">
-            <div className="text-3xl font-black text-white">{activeMembers}</div>
-            <span className="text-xs text-purple-100 font-semibold">members</span>
+            <div className="text-2xl font-black text-white">{activeMembers}</div>
+            <span className="text-xs text-white font-semibold">members</span>
           </div>
         </div>
       </div>
 
       {/* Charts - 3 Columns Horizontal */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-        <div className="bg-white rounded-xl shadow-md border border-slate-200 p-4 hover:shadow-lg transition-all">
+        <div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
           <div className="mb-3">
-            <h3 className="text-sm font-bold text-gray-900">User Growth Trend</h3>
-            <p className="text-xs text-gray-500">Last 6 months performance</p>
+            <h3 className="text-sm font-bold text-white">User Growth Trend</h3>
+            <p className="text-xs text-blue-100">Last 6 months performance</p>
           </div>
           <div className="h-48 overflow-auto">
             <UserGrowthChart data={userGrowthData} />
           </div>
         </div>
 
-        <div className="bg-white rounded-xl shadow-md border border-slate-200 p-4 hover:shadow-lg transition-all">
+        <div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
           <div className="mb-3">
-            <h3 className="text-sm font-bold text-gray-900">Membership Mix</h3>
-            <p className="text-xs text-gray-500">Distribution breakdown</p>
+            <h3 className="text-sm font-bold text-white">Membership Mix</h3>
+            <p className="text-xs text-emerald-100">Distribution breakdown</p>
           </div>
           <div className="h-48 overflow-auto">
             <MembershipDistributionChart data={membershipData} />
           </div>
         </div>
 
-        <div className="bg-white rounded-xl shadow-md border border-slate-200 p-4 hover:shadow-lg transition-all">
+        <div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
           <div className="mb-3">
-            <h3 className="text-sm font-bold text-gray-900">Revenue Stream</h3>
-            <p className="text-xs text-gray-500">Monthly earnings</p>
+            <h3 className="text-sm font-bold text-white">Revenue Stream</h3>
+            <p className="text-xs text-purple-100">Monthly earnings</p>
           </div>
           <div className="h-48 overflow-auto">
             <RevenueChart data={revenueData} />