diff --git a/src/modules/ui/board/content-element/ContentElementBar.unit.ts b/src/modules/ui/board/content-element/ContentElementBar.unit.ts
index bf5b6a20ee..caca356ef7 100644
--- a/src/modules/ui/board/content-element/ContentElementBar.unit.ts
+++ b/src/modules/ui/board/content-element/ContentElementBar.unit.ts
@@ -148,7 +148,7 @@ describe("ContentElementBar", () => {
 	});
 
 	describe("when hasGreyBackground prop is true", () => {
-		it("should render grey background", () => {
+		it("should render surface-light background", () => {
 			const { wrapper } = setup(
 				{
 					hasGreyBackground: true,
@@ -158,17 +158,17 @@ describe("ContentElementBar", () => {
 				}
 			);
 
-			const divWithBackgroundClass = wrapper.find("div.bg-grey-lighten-4");
+			const divWithBackgroundClass = wrapper.find("div.bg-surface-light");
 
 			expect(divWithBackgroundClass.exists()).toBe(true);
 		});
 	});
 
 	describe("when hasGreyBackground prop is false", () => {
-		it("should not render grey background", () => {
+		it("should not render surface-light background", () => {
 			const { wrapper } = setup({});
 
-			const divWithBackgroundClass = wrapper.find("div.bg-grey-lighten-4");
+			const divWithBackgroundClass = wrapper.find("div.bg-surface-light");
 
 			expect(divWithBackgroundClass.exists()).toBe(false);
 		});
diff --git a/src/modules/ui/board/content-element/ContentElementBar.vue b/src/modules/ui/board/content-element/ContentElementBar.vue
index 8e3a39066a..24f739249f 100644
--- a/src/modules/ui/board/content-element/ContentElementBar.vue
+++ b/src/modules/ui/board/content-element/ContentElementBar.vue
@@ -12,7 +12,7 @@
 			v-if="
 				$slots.title || $slots.element || $slots.subtitle || $slots.description
 			"
-			:class="{ 'bg-grey-lighten-4': props.hasGreyBackground === true }"
+			:class="{ 'bg-surface-light': props.hasGreyBackground === true }"
 			class="content-element-bar-texts rounded-b py-4"
 		>
 			<div
diff --git a/src/themes/brb/vuetify.options.ts b/src/themes/brb/vuetify.options.ts
index a8c282d712..285500c6ab 100644
--- a/src/themes/brb/vuetify.options.ts
+++ b/src/themes/brb/vuetify.options.ts
@@ -11,6 +11,8 @@ const brbTheme: ThemeDefinition = {
 		accent: "#e4032e",
 		"on-surface": "#294c5a",
 		"on-background": "#294c5a",
+		"surface-light": "#f2f4f5",
+		"on-surface-light": "#294c5a",
 		"on-white": "#294c5a",
 	},
 };
diff --git a/src/themes/n21/vuetify.options.ts b/src/themes/n21/vuetify.options.ts
index 42078be5b6..43c6981e8b 100644
--- a/src/themes/n21/vuetify.options.ts
+++ b/src/themes/n21/vuetify.options.ts
@@ -12,6 +12,8 @@ const n21Theme: ThemeDefinition = {
 		"on-surface": "#0f3551",
 		"on-background": "#0f3551",
 		"on-white": "#0f3551",
+		"surface-light": "#f1f3f5",
+		"on-surface-light": "#0f3551",
 	},
 };
 
diff --git a/src/themes/thr/vuetify.options.ts b/src/themes/thr/vuetify.options.ts
index bc9a5d6c4c..1304d66fe6 100644
--- a/src/themes/thr/vuetify.options.ts
+++ b/src/themes/thr/vuetify.options.ts
@@ -11,6 +11,8 @@ const thrTheme: ThemeDefinition = {
 		accent: "#f56b00",
 		"on-surface": "#0f3551",
 		"on-background": "#0f3551",
+		"surface-light": "#f1f3f5",
+		"on-surface-light": "#0f3551",
 		"on-white": "#0f3551",
 	},
 };
diff --git a/src/vuetify.options.ts b/src/vuetify.options.ts
index a18beb8af2..2bfe47ccfb 100644
--- a/src/vuetify.options.ts
+++ b/src/vuetify.options.ts
@@ -12,6 +12,8 @@ const defaultTheme: ThemeDefinition = {
 		"on-surface": "#3a424b",
 		"on-background": "#3a424b",
 		"on-white": "#3a424b",
+		"surface-light": "#f3f4f4",
+		"on-surface-light": "#3a424b",
 	},
 };