diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js
index 11357e06d..a7072df81 100644
--- a/Client/src/Utils/Theme/constants.js
+++ b/Client/src/Utils/Theme/constants.js
@@ -152,6 +152,11 @@ const newSemanticColors = {
 			light: newColors.blueGray600,
 			dark: newColors.gray200,
 		},
+		// CAIO_REVIEW, need a brighter color for dark bg
+		contrastTextSecondaryDarkBg: {
+			light: newColors.gray200,
+			dark: newColors.gray200,
+		},
 		contrastTextTertiary: {
 			light: newColors.blueGray500,
 			dark: newColors.gray500,
diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js
index e019b38b9..4d4c2dd40 100644
--- a/Client/src/Utils/Theme/globalTheme.js
+++ b/Client/src/Utils/Theme/globalTheme.js
@@ -21,6 +21,12 @@ const baseTheme = (palette) => ({
 			color: palette.primary.contrastTextSecondary,
 			fontWeight: 400,
 		},
+		// CAIO_REVIEW, need a brighter color for dark bg
+		h2DarkBg: {
+			fontSize: typographyLevels.l,
+			color: palette.primary.contrastTextSecondaryDarkBg,
+			fontWeight: 400,
+		},
 		body1: {
 			fontSize: typographyLevels.m,
 			color: palette.primary.contrastTextTertiary,