diff --git a/front/packages/primitives/src/icons.tsx b/front/packages/primitives/src/icons.tsx
index 0c297232..486693a9 100644
--- a/front/packages/primitives/src/icons.tsx
+++ b/front/packages/primitives/src/icons.tsx
@@ -22,7 +22,7 @@ import React, { ComponentProps, ComponentType, ForwardedRef, forwardRef } from "
 import { Platform, PressableProps, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { YoshikiStyle } from "yoshiki";
-import { px, Theme, useYoshiki } from "yoshiki/native";
+import { px, Stylable, Theme, useYoshiki } from "yoshiki/native";
 import { PressableFeedback } from "./links";
 import { alpha } from "./themes";
 import { Breakpoint, ts, useBreakpointValue } from "./utils";
@@ -126,7 +126,7 @@ export const IconFab = <AsProps = PressableProps,>(
 	);
 };
 
-export const DottedSeparator = () => {
+export const DottedSeparator = (props: Stylable) => {
 	const { css } = useYoshiki();
-	return <P {...css({ mX: ts(1) })}>{String.fromCharCode(0x2022)}</P>;
+	return <P {...css({ mX: ts(1) }, props)}>{String.fromCharCode(0x2022)}</P>;
 };
diff --git a/front/packages/ui/src/components/rating.tsx b/front/packages/ui/src/components/rating.tsx
index 840e24bb..8c41d2eb 100644
--- a/front/packages/ui/src/components/rating.tsx
+++ b/front/packages/ui/src/components/rating.tsx
@@ -18,19 +18,19 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Icon, P, Skeleton, ts } from "@kyoo/primitives";
+import { Breakpoint, Icon, P, Skeleton, ts } from "@kyoo/primitives";
 import { View } from "react-native";
 import Star from "@material-symbols/svg-400/rounded/star-fill.svg";
 import { rem, useYoshiki } from "yoshiki/native";
 
-export const Rating = ({ rating }: { rating?: number }) => {
+export const Rating = ({ rating, color }: { rating?: number, color: Breakpoint<string> }) => {
 	const { css } = useYoshiki();
 
 	return (
 		<View {...css({ flexDirection: "row", alignItems: "center" })}>
-			<Icon icon={Star} {...css({ marginRight: ts(0.5) })} />
+			<Icon icon={Star} color={color} {...css({ marginRight: ts(0.5) })} />
 			<Skeleton {...css({ width: rem(2) })}>
-				{rating !== undefined && <P>{rating ? rating / 10 : "??"} / 10</P>}
+				{rating !== undefined && <P {...css({ color })}>{rating ? rating / 10 : "??"} / 10</P>}
 			</Skeleton>
 		</View>
 	);
diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx
index 694f94c3..555c4a79 100644
--- a/front/packages/ui/src/details/header.tsx
+++ b/front/packages/ui/src/details/header.tsx
@@ -225,14 +225,23 @@ export const TitleLine = ({
 						)}
 						{rating !== null && (
 							<>
-								<DottedSeparator />
-								<Rating rating={rating} />
+								<DottedSeparator
+									{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}
+								/>
+								<Rating
+									rating={rating}
+									color={{ xs: theme.user.contrast, md: theme.colors.white }}
+								/>
 							</>
 						)}
 						{runtime && (
 							<>
-								<DottedSeparator />
-								<P>{displayRuntime(runtime)}</P>
+								<DottedSeparator
+									{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}
+								/>
+								<P {...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}>
+									{displayRuntime(runtime)}
+								</P>
 							</>
 						)}
 					</View>