diff --git a/front/apps/mobile/app/movie/[slug].tsx b/front/apps/mobile/app/movie/[slug].tsx
new file mode 100644
index 00000000..fb4abc17
--- /dev/null
+++ b/front/apps/mobile/app/movie/[slug].tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { MovieDetails } from "@kyoo/ui";
+import { withRoute } from "../../utils";
+
+export default withRoute(MovieDetails, {
+	options: { headerTransparent: true, headerStyle: { backgroundColor: "transparent" } },
+	statusBar: { barStyle: "light-content" },
+});
diff --git a/front/apps/mobile/utils.tsx b/front/apps/mobile/utils.tsx
new file mode 100644
index 00000000..a13560c1
--- /dev/null
+++ b/front/apps/mobile/utils.tsx
@@ -0,0 +1,43 @@
+/*
+ * 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 { Stack } from "expo-router";
+import { ComponentType } from "react";
+import { StatusBar, StatusBarProps } from "react-native";
+
+export const withRoute = <Props,>(
+	Component: ComponentType<Props>,
+	options?: Parameters<typeof Stack.Screen>[0] & { statusBar?: StatusBarProps },
+) => {
+	const { statusBar, ...routeOptions } = options ?? {};
+	const WithUseRoute = ({ route, ...props }: Props & { route: any }) => {
+		return (
+			<>
+				{routeOptions && <Stack.Screen {...routeOptions} />}
+				{statusBar && <StatusBar {...statusBar} />}
+				<Component {...route.params} {...props} />
+			</>
+		);
+	};
+
+	const { ...all } = Component;
+	Object.assign(WithUseRoute, { ...all });
+	return WithUseRoute;
+};
diff --git a/front/packages/primitives/src/utils/index.tsx b/front/packages/primitives/src/utils/index.tsx
new file mode 100644
index 00000000..fb9cd220
--- /dev/null
+++ b/front/packages/primitives/src/utils/index.tsx
@@ -0,0 +1,24 @@
+/*
+ * 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/>.
+ */
+
+export * from "./breakpoints";
+export * from "./nojs";
+export * from "./head";
+export * from "./spacing";
diff --git a/front/packages/primitives/src/utils/spacing.tsx b/front/packages/primitives/src/utils/spacing.tsx
new file mode 100644
index 00000000..4bb95967
--- /dev/null
+++ b/front/packages/primitives/src/utils/spacing.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { px } from "yoshiki/native";
+
+export const ts = (spacing: number) => {
+	return px(spacing * 8);
+};
diff --git a/front/packages/ui/src/details/index.tsx b/front/packages/ui/src/details/index.tsx
index becc4444..b416124a 100644
--- a/front/packages/ui/src/details/index.tsx
+++ b/front/packages/ui/src/details/index.tsx
@@ -19,8 +19,7 @@
  */
 
 import { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models";
-import { Navbar } from "../navbar";
-import { DefaultLayout } from "../layout";
+import { TransparentLayout } from "../layout";
 import { Header } from "./header";
 import { Staff } from "./staff";
 
@@ -36,7 +35,7 @@ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
 	return (
 		<>
 			<Header slug={slug} query={query(slug)} />
-			{/* <Staff slug={slug} /> */}
+			<Staff slug={slug} />
 		</>
 	);
 };
@@ -44,7 +43,6 @@ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
 MovieDetails.getFetchUrls = ({ slug }) => [
 	query(slug),
 	// ShowStaff.query(slug),
-	Navbar.query(),
 ];
 
-MovieDetails.getLayout = DefaultLayout;
+MovieDetails.getLayout = TransparentLayout;
diff --git a/front/packages/ui/src/details/person.tsx b/front/packages/ui/src/details/person.tsx
new file mode 100644
index 00000000..729a30d6
--- /dev/null
+++ b/front/packages/ui/src/details/person.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 { Avatar, Link, P, Skeleton, SubP } from "@kyoo/primitives";
+import { Stylable, useYoshiki } from "yoshiki/native";
+
+export const PersonAvatar = ({
+	slug,
+	name,
+	role,
+	poster,
+	isLoading,
+	...props
+}: {
+	isLoading: boolean;
+	slug?: string;
+	name?: string;
+	role?: string;
+	poster?: string | null;
+} & Stylable) => {
+	const { css } = useYoshiki();
+
+	return (
+		<Link href={slug ? `/person/${slug}` : ""} {...props}>
+			<Avatar src={poster} alt={name} size={PersonAvatar.width} />
+			<Skeleton>{isLoading || <P {...css({ textAlign: "center" })}>{name}</P>}</Skeleton>
+			{(isLoading || role) && (
+				<Skeleton>{isLoading || <SubP {...css({ textAlign: "center" })}>{role}</SubP>}</Skeleton>
+			)}
+		</Link>
+	);
+};
+
+PersonAvatar.width = 300;
diff --git a/front/packages/ui/src/details/staff.tsx b/front/packages/ui/src/details/staff.tsx
index ec4f44ba..3a80db4a 100644
--- a/front/packages/ui/src/details/staff.tsx
+++ b/front/packages/ui/src/details/staff.tsx
@@ -31,6 +31,7 @@ export const Staff = ({ slug }: { slug: string }) => {
 	return (
 		<InfiniteFetch
 			query={Staff.query(slug)}
+			horizontal
 			layout={{ numColumns: 0, size: PersonAvatar.width }}
 			placeholderCount={20}
 		>
diff --git a/front/packages/ui/src/layout.tsx b/front/packages/ui/src/layout.tsx
index 3ff4e57a..b2e6f4b1 100644
--- a/front/packages/ui/src/layout.tsx
+++ b/front/packages/ui/src/layout.tsx
@@ -20,7 +20,8 @@
 
 import { ReactElement } from "react";
 import { Navbar } from "./navbar";
-import { useYoshiki } from "yoshiki";
+import { useYoshiki } from "yoshiki/native";
+import { Main } from "@kyoo/primitives";
 
 export const DefaultLayout = (page: ReactElement) => {
 	const { css } = useYoshiki();
@@ -28,11 +29,44 @@ export const DefaultLayout = (page: ReactElement) => {
 	return (
 		<>
 			<Navbar />
-			<main id="main" {...css({ display: "flex", flexGrow: 1, flexShrink: 1, overflow: "auto" })}>
+			<Main
+				{...css({
+					display: "flex",
+					flexGrow: 1,
+					flexShrink: 1,
+				})}
+			>
 				{page}
-			</main>
+			</Main>
 		</>
 	);
 };
-
 DefaultLayout.getFetchUrls = () => [Navbar.query()];
+
+export const TransparentLayout = (page: ReactElement) => {
+	const { css } = useYoshiki();
+
+	return (
+		<>
+			<Navbar
+				{...css({
+					bg: "transparent",
+					position: "absolute",
+					top: 0,
+					left: 0,
+					right: 0,
+				})}
+			/>
+			<Main
+				{...css({
+					display: "flex",
+					flexGrow: 1,
+					flexShrink: 1,
+				})}
+			>
+				{page}
+			</Main>
+		</>
+	);
+};
+TransparentLayout.getFetchUrls = () => [Navbar.query()];