diff --git a/front/packages/ui/src/collection/index.tsx b/front/packages/ui/src/collection/index.tsx
index 1ad8826a..2e59ec8b 100644
--- a/front/packages/ui/src/collection/index.tsx
+++ b/front/packages/ui/src/collection/index.tsx
@@ -39,6 +39,7 @@ import { InfiniteFetch } from "../fetch-infinite";
 import { DefaultLayout } from "../layout";
 import { ItemDetails } from "../home/recommanded";
 import { SvgWave } from "../details/show";
+import { ItemGrid } from "../browse/grid";
 
 const Header = ({ slug }: { slug: string }) => {
 	const { css } = useYoshiki();
@@ -144,6 +145,7 @@ const query = (slug: string): QueryIdentifier<LibraryItem> => ({
 });
 
 export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
+	const { css } = useYoshiki();
 	const pageStyle = usePageStyle();
 
 	return (
@@ -153,7 +155,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
 			layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }}
 			Header={CollectionHeader}
 			headerProps={{ slug }}
-			contentContainerStyle={pageStyle}
+			contentContainerStyle={{ padding: 0, paddingHorizontal: 0, ...pageStyle }}
 		>
 			{(x) => (
 				<ItemDetails
@@ -172,6 +174,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
 					unseenEpisodesCount={
 						x.kind === ItemKind.Show ? x.watchStatus?.unseenEpisodesCount ?? x.episodesCount! : null
 					}
+					{...css({ marginX: ItemGrid.layout.gap })}
 				/>
 			)}
 		</InfiniteFetch>
diff --git a/front/packages/ui/src/home/recommanded.tsx b/front/packages/ui/src/home/recommanded.tsx
index e7673ec2..ee7c148f 100644
--- a/front/packages/ui/src/home/recommanded.tsx
+++ b/front/packages/ui/src/home/recommanded.tsx
@@ -80,38 +80,38 @@ export const ItemDetails = ({
 
 	return (
 		<View
-			{...css({
-				height: ItemDetails.layout.size,
-			})}
+			{...css(
+				{
+					height: ItemDetails.layout.size,
+				},
+				props,
+			)}
 		>
 			<Link
 				href={href}
-				{...css(
-					{
-						position: "absolute",
-						top: 0,
-						left: 0,
-						right: 0,
-						bottom: 0,
-						flexDirection: "row",
-						bg: (theme) => theme.variant.background,
-						borderRadius: calc(px(imageBorderRadius), "+", ts(0.25)),
-						overflow: "hidden",
-						borderColor: (theme) => theme.background,
-						borderWidth: ts(0.25),
-						borderStyle: "solid",
-						fover: {
-							self: {
-								...focusReset,
-								borderColor: (theme: Theme) => theme.accent,
-							},
-							title: {
-								textDecorationLine: "underline",
-							},
+				{...css({
+					position: "absolute",
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+					flexDirection: "row",
+					bg: (theme) => theme.variant.background,
+					borderRadius: calc(px(imageBorderRadius), "+", ts(0.25)),
+					overflow: "hidden",
+					borderColor: (theme) => theme.background,
+					borderWidth: ts(0.25),
+					borderStyle: "solid",
+					fover: {
+						self: {
+							...focusReset,
+							borderColor: (theme: Theme) => theme.accent,
+						},
+						title: {
+							textDecorationLine: "underline",
 						},
 					},
-					props,
-				)}
+				})}
 			>
 				<PosterBackground
 					src={poster}