diff --git a/src/app/components/ResearchDashboard.tsx b/src/app/components/ResearchDashboard.tsx
index 27ff7aa..a776d43 100644
--- a/src/app/components/ResearchDashboard.tsx
+++ b/src/app/components/ResearchDashboard.tsx
@@ -175,6 +175,8 @@ export function ResearchDashboard({
     label: string;
     hint: string;
     Icon: typeof Network;
+    cardClass: string;
+    tileClass: string;
     target: NavTarget;
   }> = [
     {
@@ -182,6 +184,10 @@ export function ResearchDashboard({
       label: "Knowledge",
       hint: "Observations EvoScientist has learned.",
       Icon: Network,
+      cardClass:
+        "border-cyan-100 bg-cyan-50 dark:border-cyan-900/50 dark:bg-cyan-950/40",
+      tileClass:
+        "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/60 dark:text-cyan-300",
       target: { view: "memory", tab: "knowledge" },
     },
     {
@@ -189,6 +195,10 @@ export function ResearchDashboard({
       label: "Timeline",
       hint: "Runs and observations on the activity timeline.",
       Icon: Activity,
+      cardClass:
+        "border-violet-100 bg-violet-50 dark:border-violet-900/50 dark:bg-violet-950/40",
+      tileClass:
+        "bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-300",
       target: { view: "memory", tab: "history" },
     },
     {
@@ -197,6 +207,10 @@ export function ResearchDashboard({
       label: "Workspace",
       hint: "Total size of files in the current workspace.",
       Icon: FolderOpen,
+      cardClass:
+        "border-amber-100 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/40",
+      tileClass:
+        "bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-300",
       target: { view: "workspace" },
     },
     {
@@ -204,6 +218,10 @@ export function ResearchDashboard({
       label: "Scheduled",
       hint: "Recurring scheduled tasks.",
       Icon: Clock,
+      cardClass:
+        "border-emerald-100 bg-emerald-50 dark:border-emerald-900/50 dark:bg-emerald-950/40",
+      tileClass:
+        "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-300",
       target: { view: "schedule" },
     },
   ];
@@ -212,34 +230,49 @@ export function ResearchDashboard({
     <div className="mt-7 w-full max-w-xl text-left sm:mt-8">
       {hasStats && (
         <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-          {stats.map(({ value, unit, label, hint, Icon, target }) => (
-            <button
-              key={label}
-              type="button"
-              onClick={() => onNavigate(target)}
-              title={hint}
-              aria-label={`${label}: ${value}${
-                unit ? ` ${unit}` : ""
-              }. ${hint}`}
-              className="hover:border-[var(--brand)]/40 flex min-h-[82px] flex-col items-center justify-center gap-1 rounded-md border border-border bg-[var(--color-surface)] px-2 py-2.5 transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              <Icon
-                className="size-4 text-[var(--brand)]"
-                aria-hidden="true"
-              />
-              <span className="relative inline-block text-base font-bold leading-none text-foreground sm:text-lg">
-                {value}
-                {unit && (
-                  <span className="absolute left-full top-0 ml-0.5 text-[9px] font-medium text-muted-foreground/70">
-                    {unit}
-                  </span>
-                )}
-              </span>
-              <span className="text-[11px] leading-none text-muted-foreground">
-                {label}
-              </span>
-            </button>
-          ))}
+          {stats.map(
+            ({
+              value,
+              unit,
+              label,
+              hint,
+              Icon,
+              cardClass,
+              tileClass,
+              target,
+            }) => (
+              <button
+                key={label}
+                type="button"
+                onClick={() => onNavigate(target)}
+                title={hint}
+                aria-label={`${label}: ${value}${
+                  unit ? ` ${unit}` : ""
+                }. ${hint}`}
+                className={`flex min-h-[82px] flex-col items-center justify-center gap-1 rounded-xl border px-2 py-2.5 transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${cardClass}`}
+              >
+                <span
+                  className={`grid size-8 place-items-center rounded-lg ${tileClass}`}
+                >
+                  <Icon
+                    className="size-4"
+                    aria-hidden="true"
+                  />
+                </span>
+                <span className="relative inline-block text-base font-bold leading-none text-foreground sm:text-lg">
+                  {value}
+                  {unit && (
+                    <span className="absolute left-full top-0 ml-0.5 text-[9px] font-medium text-muted-foreground/70">
+                      {unit}
+                    </span>
+                  )}
+                </span>
+                <span className="text-[11px] leading-none text-muted-foreground">
+                  {label}
+                </span>
+              </button>
+            )
+          )}
         </div>
       )}