diff --git a/app/routes/to/$organization.$tournament.tsx b/app/routes/to/$organization.$tournament.tsx
index 2b52a6d36..1e5e741c8 100644
--- a/app/routes/to/$organization.$tournament.tsx
+++ b/app/routes/to/$organization.$tournament.tsx
@@ -91,7 +91,7 @@ export default function TournamentPage() {
       className="tournament__container"
       style={
         {
-          "--tournaments-background": data.bannerBackground,
+          "--tournaments-bg": data.bannerBackground,
           "--tournaments-text": data.CSSProperties.text,
           "--tournaments-text-transparent": data.CSSProperties.textTransparent,
           // todo: could make a TS helper type for this that checks for leading --
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index 6bf595f02..8eb43468c 100644
--- a/app/styles/tournament-bracket.css
+++ b/app/styles/tournament-bracket.css
@@ -83,8 +83,7 @@
 }
 
 .tournament-bracket__elim__team.own {
-  /* TODO: refactor this to tournaments-bg */
-  background: var(--tournaments-background);
+  background: var(--tournaments-bg);
   color: var(--tournaments-text);
   font-weight: var(--bold);
 }
diff --git a/app/styles/tournament.css b/app/styles/tournament.css
index 13dde7fb5..19219a591 100644
--- a/app/styles/tournament.css
+++ b/app/styles/tournament.css
@@ -13,7 +13,7 @@
 .tournament__action-section {
   width: 100%;
   padding: var(--s-1-5);
-  background: var(--tournaments-background);
+  background: var(--tournaments-bg);
   border-radius: var(--rounded);
 }
 
@@ -47,7 +47,7 @@
   display: inline-block;
   min-width: 100%;
   padding: var(--s-1-5);
-  background: var(--tournaments-background);
+  background: var(--tournaments-bg);
   border-radius: var(--rounded);
 }
 
@@ -102,7 +102,7 @@
 .info-banner {
   width: 100%;
   padding: var(--s-6);
-  background: var(--tournaments-background);
+  background: var(--tournaments-bg);
   border-radius: var(--rounded);
   color: var(--tournaments-text);
 }