diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx
index d45c88e4..ee9cdde2 100644
--- a/front/packages/ui/src/fetch-infinite.tsx
+++ b/front/packages/ui/src/fetch-infinite.tsx
@@ -52,7 +52,7 @@ const emulateGap = (
 	};
 };
 
-export const InfiniteFetchList = <Data, Props, _>({
+export const InfiniteFetchList = <Data, Props, _, Kind>({
 	query,
 	placeholderCount = 2,
 	incremental = false,
@@ -63,6 +63,7 @@ export const InfiniteFetchList = <Data, Props, _>({
 	Header,
 	headerProps,
 	getItemType,
+	getItemSize,
 	fetchMore = true,
 	nested = false,
 	contentContainerStyle,
@@ -81,7 +82,8 @@ export const InfiniteFetchList = <Data, Props, _>({
 	divider?: boolean | ComponentType;
 	Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
 	headerProps?: Props;
-	getItemType?: (item: WithLoading<Data>, index: number) => string | number;
+	getItemType?: (item: WithLoading<Data>, index: number) => Kind;
+	getItemSize?: (kind: Kind) => number;
 	fetchMore?: boolean;
 	nested?: boolean;
 	contentContainerStyle?: ContentStyle;
@@ -118,7 +120,8 @@ export const InfiniteFetchList = <Data, Props, _>({
 					style={[
 						emulateGap(layout.layout, gap, numColumns, index),
 						layout.layout === "horizontal" && {
-							width: size,
+							width:
+								size * (getItemType && getItemSize ? getItemSize(getItemType(item, index)) : 1),
 						},
 					]}
 				>
@@ -144,12 +147,12 @@ export const InfiniteFetchList = <Data, Props, _>({
 	);
 };
 
-export const InfiniteFetch = <Data, Props, _>({
+export const InfiniteFetch = <Data, Props, _, Kind>({
 	query,
 	...props
 }: {
 	query: QueryIdentifier<_, Data>;
-} & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _>>, "query">) => {
+} & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _, Kind>>, "query">) => {
 	if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
 
 	const ret = useInfiniteFetch(query);
diff --git a/front/packages/ui/src/fetch-infinite.web.tsx b/front/packages/ui/src/fetch-infinite.web.tsx
index aea08b40..b1614f18 100644
--- a/front/packages/ui/src/fetch-infinite.web.tsx
+++ b/front/packages/ui/src/fetch-infinite.web.tsx
@@ -139,7 +139,7 @@ const InfiniteScroll = <Props,>({
 	);
 };
 
-export const InfiniteFetchList = <Data, _, HeaderProps>({
+export const InfiniteFetchList = <Data, _, HeaderProps, Kind>({
 	query,
 	incremental = false,
 	placeholderCount = 2,
@@ -164,7 +164,8 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
 	divider?: boolean | ComponentType;
 	Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
 	headerProps: HeaderProps;
-	getItemType?: (item: WithLoading<Data>, index: number) => string | number;
+	getItemType?: (item: WithLoading<Data>, index: number) => Kind;
+	getItemSize?: (kind: Kind) => number
 	fetchMore?: boolean;
 	contentContainerStyle?: ContentStyle;
 }): JSX.Element | null => {
@@ -204,12 +205,12 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
 	);
 };
 
-export const InfiniteFetch = <Data, Props, _>({
+export const InfiniteFetch = <Data, Props, _, Kind>({
 	query,
 	...props
 }: {
 	query: QueryIdentifier<_, Data>;
-} & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _>>, "query">) => {
+} & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _, Kind>>, "query">) => {
 	if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
 
 	const ret = useInfiniteFetch(query);
diff --git a/front/packages/ui/src/home/news.tsx b/front/packages/ui/src/home/news.tsx
index d77cb897..cf19f470 100644
--- a/front/packages/ui/src/home/news.tsx
+++ b/front/packages/ui/src/home/news.tsx
@@ -19,12 +19,12 @@
  */
 
 import { News, NewsKind, NewsP, QueryIdentifier, getDisplayDate } from "@kyoo/models";
-import { useYoshiki } from "yoshiki/native";
 import { ItemGrid } from "../browse/grid";
 import { InfiniteFetch } from "../fetch-infinite";
 import { useTranslation } from "react-i18next";
 import { Header } from "./genre";
 import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
+import { useYoshiki } from "yoshiki/native";
 
 export const NewsList = () => {
 	const { t } = useTranslation();
@@ -39,6 +39,7 @@ export const NewsList = () => {
 				getItemType={(x, i) =>
 					x.kind === NewsKind.Movie || (x.isLoading && i % 2) ? "movie" : "episode"
 				}
+				getItemSize={(kind) => kind === "episode" ? 2 : 1}
 				empty={t("home.none")}
 			>
 				{(x, i) =>
@@ -66,7 +67,7 @@ export const NewsList = () => {
 							href={x.href}
 							watchedPercent={x.watchStatus?.watchedPercent || null}
 							watchedStatus={x.watchStatus?.status || null}
-							// TODO: support this on mobile too
+							// TODO: Move this into the ItemList (using getItemSize)
 							// @ts-expect-error This is a web only property
 							{...css({ gridColumnEnd: "span 2" })}
 						/>
diff --git a/front/packages/ui/src/home/watchlist.tsx b/front/packages/ui/src/home/watchlist.tsx
index 9f82e3cd..ba30ebe0 100644
--- a/front/packages/ui/src/home/watchlist.tsx
+++ b/front/packages/ui/src/home/watchlist.tsx
@@ -52,6 +52,7 @@ export const WatchlistList = () => {
 							? "episode"
 							: "item"
 					}
+					getItemSize={(kind) => kind === "episode" ? 2 : 1}
 					empty={t("home.none")}
 				>
 					{(x, i) => {
@@ -65,7 +66,7 @@ export const WatchlistList = () => {
 								thumbnail={episode?.thumbnail ?? x.thumbnail}
 								href={episode?.href}
 								watchedPercent={x.watchStatus?.watchedPercent || null}
-								// TODO: support this on mobile too
+								// TODO: Move this into the ItemList (using getItemSize)
 								// @ts-expect-error This is a web only property
 								{...css({ gridColumnEnd: "span 2" })}
 							/>