diff --git a/app/features/tournament-bracket/components/Bracket/Match.tsx b/app/features/tournament-bracket/components/Bracket/Match.tsx
index bbd4c2473..b56f2affd 100644
--- a/app/features/tournament-bracket/components/Bracket/Match.tsx
+++ b/app/features/tournament-bracket/components/Bracket/Match.tsx
@@ -473,16 +473,14 @@ function MatchTimerInner({
 
 	const displayText = elapsedMinutes >= 60 ? "1h+" : `${elapsedMinutes}m`;
 
-	const statusColor =
-		status === "error"
-			? "var(--color-error)"
-			: status === "warning"
-				? "var(--color-warning)"
-				: "var(--color-text)";
-
 	return (
 		<div className={styles.matchTimer} data-testid="bracket-match-timer">
-			<div className={styles.matchHeaderBox} style={{ color: statusColor }}>
+			<div
+				className={clsx(styles.matchHeaderBox, styles.matchHeaderBoxButton, {
+					[styles.matchTimerWarning]: status === "warning",
+					[styles.matchTimerError]: status === "error",
+				})}
+			>
 				{displayText}
 			</div>
 		</div>
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.module.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
index 96dd6aaec..46e6a8029 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.module.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -92,6 +92,14 @@
 	margin-inline-start: 8px;
 }
 
+.matchTimerWarning {
+	background-color: var(--color-warning);
+}
+
+.matchTimerError {
+	background-color: var(--color-error);
+}
+
 .match {
 	width: var(--match-width);
 	min-height: var(--match-height);