diff --git a/front/packages/primitives/src/avatar.tsx b/front/packages/primitives/src/avatar.tsx
index d3c59849..91d38318 100644
--- a/front/packages/primitives/src/avatar.tsx
+++ b/front/packages/primitives/src/avatar.tsx
@@ -23,6 +23,7 @@ import { Image } from "./image";
 import { useYoshiki, px, Stylable } from "yoshiki/native";
 import { Icon } from "./icons";
 import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
+import { YoshikiStyle } from "yoshiki/dist/type";
 
 export const Avatar = ({
 	src,
@@ -30,25 +31,36 @@ export const Avatar = ({
 	size = px(24),
 	color,
 	isLoading = false,
+	fill = false,
 	...props
 }: {
 	src?: string | null;
 	alt?: string;
-	size?: number;
+	size?: YoshikiStyle<number | string>;
 	color?: string;
 	isLoading?: boolean;
+	fill?: boolean;
 } & Stylable) => {
 	const { css, theme } = useYoshiki();
+	const col = color ?? theme.overlay0;
 
-	console.log(color)
+	// TODO: Support dark themes when fill === true
 	return (
 		<View
-			{...css({ borderRadius: size / 2, width: size, height: size, overflow: "hidden" }, props)}
+			{...css(
+				[
+					{ borderRadius: 999999, width: size, height: size, overflow: "hidden" },
+					fill && {
+						bg: col,
+					},
+				],
+				props,
+			)}
 		>
 			{src || isLoading ? (
 				<Image src={src} alt={alt} layout={{ width: size, height: size }} />
 			) : (
-				<Icon icon={AccountCircle} size={size} color={color ?? theme.overlay0} />
+				<Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} />
 			)}
 		</View>
 	);
diff --git a/front/packages/primitives/src/icons.tsx b/front/packages/primitives/src/icons.tsx
index 07863e67..8048a589 100644
--- a/front/packages/primitives/src/icons.tsx
+++ b/front/packages/primitives/src/icons.tsx
@@ -19,7 +19,7 @@
  */
 
 import { ComponentProps, ComponentType } from "react";
-import { PressableProps, ViewStyle } from "react-native";
+import { Platform, PressableProps, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { YoshikiStyle } from "yoshiki/dist/type";
 import { Pressable, px, useYoshiki } from "yoshiki/native";
@@ -28,12 +28,24 @@ import { ts } from "./utils";
 type IconProps = {
 	icon: ComponentType<SvgProps>;
 	color: YoshikiStyle<string>;
-	size?: number | string;
+	size?: YoshikiStyle<number | string>;
 };
 
 export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 	const { css } = useYoshiki();
-	return <Icon width={size} height={size} {...css({ fill: color } as ViewStyle, props)} />;
+	const computed = css({ width: size, height: size, fill: color } as ViewStyle, props);
+	return (
+		<Icon
+			{...Platform.select<SvgProps>({
+				web: computed,
+				default: {
+					height: computed.style?.height,
+					width: computed.style?.width,
+					...computed,
+				},
+			})}
+		/>
+	);
 };
 
 export const IconButton = <AsProps = PressableProps,>({
diff --git a/front/packages/ui/src/details/index.tsx b/front/packages/ui/src/details/index.tsx
index 734ac867..bd6594d1 100644
--- a/front/packages/ui/src/details/index.tsx
+++ b/front/packages/ui/src/details/index.tsx
@@ -18,35 +18,4 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models";
-import { Platform, ScrollView } from "react-native";
-import { useYoshiki } from "yoshiki/native";
-import { TransparentLayout } from "../layout";
-import { Header } from "./header";
-import { Staff } from "./staff";
-
-const query = (slug: string): QueryIdentifier<Movie> => ({
-	parser: MovieP,
-	path: ["shows", slug],
-	params: {
-		fields: ["genres", "studio"],
-	},
-});
-
-export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
-	const { css } = useYoshiki();
-
-	return (
-		<ScrollView {...css(Platform.OS === "web" && { overflow: "overlay" as any })}>
-			<Header slug={slug} query={query(slug)} />
-			<Staff slug={slug} />
-		</ScrollView>
-	);
-};
-
-MovieDetails.getFetchUrls = ({ slug }) => [
-	query(slug),
-	// ShowStaff.query(slug),
-];
-
-MovieDetails.getLayout = TransparentLayout;
+export { MovieDetails } from "./movie";
diff --git a/front/packages/ui/src/details/movie.tsx b/front/packages/ui/src/details/movie.tsx
new file mode 100644
index 00000000..df90fa85
--- /dev/null
+++ b/front/packages/ui/src/details/movie.tsx
@@ -0,0 +1,51 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models";
+import { Platform, ScrollView } from "react-native";
+import { useYoshiki } from "yoshiki/native";
+import { TransparentLayout } from "../layout";
+import { Header } from "./header";
+
+const query = (slug: string): QueryIdentifier<Movie> => ({
+	parser: MovieP,
+	path: ["shows", slug],
+	params: {
+		fields: ["genres", "studio"],
+	},
+});
+
+export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
+	const { css } = useYoshiki();
+
+	return (
+		<ScrollView {...css(Platform.OS === "web" && { overflow: "overlay" as any })}>
+			<Header slug={slug} query={query(slug)} />
+			{/* <Staff slug={slug} /> */}
+		</ScrollView>
+	);
+};
+
+MovieDetails.getFetchUrls = ({ slug }) => [
+	query(slug),
+	// ShowStaff.query(slug),
+];
+
+MovieDetails.getLayout = TransparentLayout;
diff --git a/front/packages/ui/src/details/person.tsx b/front/packages/ui/src/details/person.tsx
index 729a30d6..001821c5 100644
--- a/front/packages/ui/src/details/person.tsx
+++ b/front/packages/ui/src/details/person.tsx
@@ -39,7 +39,7 @@ export const PersonAvatar = ({
 
 	return (
 		<Link href={slug ? `/person/${slug}` : ""} {...props}>
-			<Avatar src={poster} alt={name} size={PersonAvatar.width} />
+			<Avatar src={poster} alt={name} size={PersonAvatar.width} fill />
 			<Skeleton>{isLoading || <P {...css({ textAlign: "center" })}>{name}</P>}</Skeleton>
 			{(isLoading || role) && (
 				<Skeleton>{isLoading || <SubP {...css({ textAlign: "center" })}>{role}</SubP>}</Skeleton>