diff --git a/src/meshcore_hub/web/templates/base.html b/src/meshcore_hub/web/templates/base.html
index 2ee5cb4..2e73302 100644
--- a/src/meshcore_hub/web/templates/base.html
+++ b/src/meshcore_hub/web/templates/base.html
@@ -124,16 +124,17 @@
             to { opacity: 1; transform: translateY(0); }
         }
 
-        /* Card entrance animations */
-        .card {
+        /* Card entrance animations - only for stat cards with .animate-stagger class */
+        .animate-stagger > .card,
+        .animate-stagger > .stat {
             animation: card-fade-in 300ms ease-out backwards;
         }
-        .card:nth-child(1) { animation-delay: 0ms; }
-        .card:nth-child(2) { animation-delay: 50ms; }
-        .card:nth-child(3) { animation-delay: 100ms; }
-        .card:nth-child(4) { animation-delay: 150ms; }
-        .card:nth-child(5) { animation-delay: 200ms; }
-        .card:nth-child(6) { animation-delay: 250ms; }
+        .animate-stagger > :nth-child(1) { animation-delay: 0ms; }
+        .animate-stagger > :nth-child(2) { animation-delay: 50ms; }
+        .animate-stagger > :nth-child(3) { animation-delay: 100ms; }
+        .animate-stagger > :nth-child(4) { animation-delay: 150ms; }
+        .animate-stagger > :nth-child(5) { animation-delay: 200ms; }
+        .animate-stagger > :nth-child(6) { animation-delay: 250ms; }
 
         @keyframes card-fade-in {
             from { opacity: 0; transform: translateY(8px); }
diff --git a/src/meshcore_hub/web/templates/dashboard.html b/src/meshcore_hub/web/templates/dashboard.html
index 65dc7a6..da1ab22 100644
--- a/src/meshcore_hub/web/templates/dashboard.html
+++ b/src/meshcore_hub/web/templates/dashboard.html
@@ -23,7 +23,7 @@
 {% endif %}
 
 <!-- Stats Cards -->
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 animate-stagger">
     <!-- Total Nodes -->
     <div class="stat bg-base-100 rounded-box shadow">
         <div class="stat-figure text-primary">
@@ -62,7 +62,7 @@
 </div>
 
 <!-- Activity Charts -->
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 animate-stagger">
     <!-- Node Count Chart -->
     <div class="card bg-base-100 shadow-xl">
         <div class="card-body">
@@ -113,7 +113,7 @@
 </div>
 
 <!-- Additional Stats -->
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 animate-stagger">
     <!-- Recent Advertisements -->
     <div class="card bg-base-100 shadow-xl">
         <div class="card-body">
diff --git a/src/meshcore_hub/web/templates/home.html b/src/meshcore_hub/web/templates/home.html
index 1e6a8b1..2363067 100644
--- a/src/meshcore_hub/web/templates/home.html
+++ b/src/meshcore_hub/web/templates/home.html
@@ -52,7 +52,7 @@
     </div>
 
     <!-- Stats Column (stacked vertically) -->
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4 animate-stagger">
         <!-- Total Nodes -->
         <div class="stat bg-base-200 rounded-box">
             <div class="stat-figure text-primary">
@@ -85,7 +85,7 @@
     </div>
 </div>
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6 animate-stagger">
     <!-- Network Info Card -->
     <div class="card bg-base-100 shadow-xl">
         <div class="card-body">