diff --git a/front/packages/primitives/src/image/index.tsx b/front/packages/primitives/src/image/index.tsx
index 12f94a91..03ad60c0 100644
--- a/front/packages/primitives/src/image/index.tsx
+++ b/front/packages/primitives/src/image/index.tsx
@@ -92,7 +92,7 @@ export const ImageBackground = <AsProps = ViewProps,>({
 							<LinearGradient
 								start={{ x: 0, y: 0.25 }}
 								end={{ x: 0, y: 1 }}
-								colors={["transparent", alpha(theme.colors.black, 0.6)]}
+								colors={["transparent", theme.darkOverlay]}
 								{...css(
 									{
 										position: "absolute",
diff --git a/front/packages/primitives/src/themes/catppuccin.ts b/front/packages/primitives/src/themes/catppuccin.ts
index 4eddda47..e8f7045f 100644
--- a/front/packages/primitives/src/themes/catppuccin.ts
+++ b/front/packages/primitives/src/themes/catppuccin.ts
@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ThemeBuilder } from "./theme";
+import { ThemeBuilder, alpha } from "./theme";
 
 // Ref: https://github.com/catppuccin/catppuccin
 export const catppuccin: ThemeBuilder = {
@@ -26,6 +26,7 @@ export const catppuccin: ThemeBuilder = {
 		// Catppuccin latte
 		overlay0: "#9ca0b0",
 		overlay1: "#7c7f93",
+		darkOverlay: "#4c4f6999",
 		link: "#1e66f5",
 		default: {
 			background: "#eff1f5",
@@ -56,6 +57,7 @@ export const catppuccin: ThemeBuilder = {
 		// Catppuccin mocha
 		overlay0: "#6c7086",
 		overlay1: "#9399b2",
+		darkOverlay: "#11111b99",
 		link: "#89b4fa",
 		default: {
 			background: "#1e1e2e",
diff --git a/front/packages/primitives/src/themes/theme.tsx b/front/packages/primitives/src/themes/theme.tsx
index 60805b73..768c2619 100644
--- a/front/packages/primitives/src/themes/theme.tsx
+++ b/front/packages/primitives/src/themes/theme.tsx
@@ -38,6 +38,7 @@ type Mode = {
 	mode: "light" | "dark" | "auto";
 	overlay0: Property.Color;
 	overlay1: Property.Color;
+	darkOverlay: Property.Color;
 	link: Property.Color;
 	contrast: Property.Color;
 	variant: Variant;
diff --git a/front/packages/ui/src/player/components/hover.tsx b/front/packages/ui/src/player/components/hover.tsx
index 5f39d8a5..3720699d 100644
--- a/front/packages/ui/src/player/components/hover.tsx
+++ b/front/packages/ui/src/player/components/hover.tsx
@@ -96,7 +96,7 @@ export const Hover = ({
 									bottom: 0,
 									left: 0,
 									right: 0,
-									bg: (theme) => alpha(theme.colors.black, 0.6),
+									bg: (theme) => theme.darkOverlay,
 									flexDirection: "row",
 									padding: percent(1),
 								},
@@ -176,7 +176,7 @@ export const Back = ({
 					top: 0,
 					left: 0,
 					right: 0,
-					bg: (theme) => alpha(theme.colors.black, 0.6),
+					bg: (theme) => theme.darkOverlay,
 					display: "flex",
 					flexDirection: "row",
 					alignItems: "center",