diff --git a/whm/gniza-whm/index.cgi b/whm/gniza-whm/index.cgi
index 2623ba6..c07d2ac 100644
--- a/whm/gniza-whm/index.cgi
+++ b/whm/gniza-whm/index.cgi
@@ -116,40 +116,50 @@ print GnizaWHM::UI::render_flash();
 
     # Card 1: cPanel Accounts
     my $acct_count = scalar @cpanel_accounts;
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">cPanel Accounts</div>\n};
-    print qq{    <div class="stat-value text-primary">$acct_count</div>\n};
-    print qq{    <div class="stat-desc">on this server</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">cPanel Accounts</div>\n};
+    print qq{      <div class="text-xl font-bold text-primary">$acct_count</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">on this server</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 2: Backed Up Accounts
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Backed Up Accounts</div>\n};
-    print qq{    <div class="stat-value text-secondary">$backed_up</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Backed Up Accounts</div>\n};
+    print qq{      <div class="text-xl font-bold text-secondary">$backed_up</div>\n};
     my $remote_count_desc = scalar @remotes;
-    print qq{    <div class="stat-desc">across $remote_count_desc remote(s)</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">across $remote_count_desc remote(s)</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 3: Total Snapshots
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Total Snapshots</div>\n};
-    print qq{    <div class="stat-value">$total_snaps</div>\n};
-    print qq{    <div class="stat-desc">across all remotes</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Total Snapshots</div>\n};
+    print qq{      <div class="text-xl font-bold">$total_snaps</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">across all remotes</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 4: Remotes
     my $rem_count = scalar @remotes;
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Remotes</div>\n};
-    print qq{    <div class="stat-value text-primary">$rem_count</div>\n};
-    print qq{    <div class="stat-desc">configured destinations</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Remotes</div>\n};
+    print qq{      <div class="text-xl font-bold text-primary">$rem_count</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">configured destinations</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 5: Schedules
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Schedules</div>\n};
-    print qq{    <div class="stat-value text-secondary">$sched_count</div>\n};
-    print qq{    <div class="stat-desc">active cron jobs</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Schedules</div>\n};
+    print qq{      <div class="text-xl font-bold text-secondary">$sched_count</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">active cron jobs</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 6: Last Backup
@@ -164,15 +174,17 @@ print GnizaWHM::UI::render_flash();
         $badge_class = 'badge-neutral';
         $badge_text = $has_stats ? 'UNKNOWN' : 'N/A';
     }
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Last Backup</div>\n};
-    print qq{    <div class="stat-value"><span class="badge $badge_class badge-lg">$badge_text</span></div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Last Backup</div>\n};
+    print qq{      <div class="mt-1 mb-1"><span class="badge $badge_class">$badge_text</span></div>\n};
     if ($last_log) {
         my $esc_log = GnizaWHM::UI::esc($last_log);
-        print qq{    <div class="stat-desc">$esc_log</div>\n};
+        print qq{      <div class="text-xs text-base-content/60">$esc_log</div>\n};
     } else {
-        print qq{    <div class="stat-desc">click Refresh to collect</div>\n};
+        print qq{      <div class="text-xs text-base-content/60">click Refresh to collect</div>\n};
     }
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     print qq{</div>\n};