diff --git a/pkg/web/templates/index.html b/pkg/web/templates/index.html
index 2a6ffce..d2d7de7 100644
--- a/pkg/web/templates/index.html
+++ b/pkg/web/templates/index.html
@@ -1983,7 +1983,7 @@
       } else {
         html += ''
           + '<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">'
-          + '  <div class="border border-gray-200 rounded-lg p-4 flex flex-col gap-4">'
+          + '  <div class="border border-gray-200 rounded-lg p-4 flex flex-col gap-4 bg-gray-50">'
           + '    <div class="flex items-start justify-between gap-4">'
           + '      <div>'
           + '        <p class="text-sm text-gray-500" data-i18n="logs.overview.total_events">Total stored events</p>'
@@ -2002,7 +2002,7 @@
           + '      </div>'
           + '    </div>'
           + '  </div>'
-          + '  <div class="border border-gray-200 rounded-lg p-4 overflow-x-auto">'
+          + '  <div class="border border-gray-200 rounded-lg p-4 overflow-x-auto bg-gray-50">'
           + '    <p class="text-sm text-gray-500 mb-2" data-i18n="logs.overview.per_server">Events per server</p>'
           + '    <table class="min-w-full text-sm">'
           + '      <thead>'
@@ -2966,7 +2966,7 @@
         ];
         summaryContainer.innerHTML = summaryCards.map(function(card) {
           return ''
-            + '<div class="border border-gray-200 rounded-lg p-4 bg-white">'
+            + '<div class="border border-gray-200 rounded-lg p-4 bg-gray-50">'
             + '  <p class="text-xs uppercase tracking-wide text-gray-500">' + escapeHtml(card.label) + '</p>'
             + '  <p class="text-3xl font-semibold text-gray-900 mt-1">' + escapeHtml(card.value) + '</p>'
             + '  <p class="text-xs text-gray-500 mt-1">' + escapeHtml(card.sub) + '</p>'