diff --git a/app/client/modules/backups/components/schedule-summary.tsx b/app/client/modules/backups/components/schedule-summary.tsx
index 58cb3ad6..f3353fc7 100644
--- a/app/client/modules/backups/components/schedule-summary.tsx
+++ b/app/client/modules/backups/components/schedule-summary.tsx
@@ -21,6 +21,7 @@ import { handleRepositoryError } from "~/client/lib/errors";
 import { formatShortDateTime, formatTimeAgo } from "~/client/lib/datetime";
 import { Link } from "@tanstack/react-router";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/client/components/ui/collapsible";
+import { cn } from "~/client/lib/utils";
 
 type Props = {
 	schedule: BackupSchedule;
@@ -206,16 +207,32 @@ export const ScheduleSummary = (props: Props) => {
 
 					{backupDetails && (schedule.lastBackupStatus === "warning" || schedule.lastBackupStatus === "error") && (
 						<div className="@medium:col-span-2 @wide:col-span-4">
-							<Collapsible className="border border-border/50 rounded-lg overflow-hidden">
-								<CollapsibleTrigger className="w-full p-3 hover:bg-muted/50 transition-colors">
+							<Collapsible
+								className={cn("border border-border/50 rounded-lg overflow-hidden", {
+									"border-yellow-500/20 bg-yellow-500/5": schedule.lastBackupStatus === "warning",
+									"border-red-500/20 bg-red-500/5": schedule.lastBackupStatus === "error",
+								})}
+							>
+								<CollapsibleTrigger
+									className={cn("w-full justify-start p-3 hover:bg-muted/50 transition-colors", {
+										"hover:bg-yellow-500/10": schedule.lastBackupStatus === "warning",
+										"hover:bg-red-500/10": schedule.lastBackupStatus === "error",
+									})}
+								>
 									<span>{schedule.lastBackupStatus === "warning" ? "Warning details" : "Error details"}</span>
 								</CollapsibleTrigger>
-								<CollapsibleContent className="border-t border-border/50 bg-muted/30">
+								<CollapsibleContent
+									className={cn("border-t border-border/50 bg-muted/30", {
+										"border-yellow-500/20 bg-yellow-500/8": schedule.lastBackupStatus === "warning",
+										"border-red-500/20 bg-red-500/8": schedule.lastBackupStatus === "error",
+									})}
+								>
 									<div className="p-3">
 										<p
-											className={`font-mono text-sm whitespace-pre-wrap wrap-break-word ${
-												schedule.lastBackupStatus === "warning" ? "text-yellow-600" : "text-red-600"
-											}`}
+											className={cn("font-mono text-sm whitespace-pre-wrap wrap-break-word", {
+												"text-yellow-600": schedule.lastBackupStatus === "warning",
+												"text-red-600": schedule.lastBackupStatus === "error",
+											})}
 										>
 											{backupDetails}
 										</p>