diff --git a/front/packages/ui/src/browse/header.tsx b/front/packages/ui/src/browse/header.tsx
new file mode 100644
index 00000000..5db02e6f
--- /dev/null
+++ b/front/packages/ui/src/browse/header.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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/>.
+ */
+
+// const SortByMenu = ({
+// 	sortKey,
+// 	setSort,
+// 	sortOrd,
+// 	setSortOrd,
+// 	anchor,
+// 	onClose,
+// }: {
+// 	sortKey: SortBy;
+// 	setSort: (sort: SortBy) => void;
+// 	sortOrd: SortOrd;
+// 	setSortOrd: (sort: SortOrd) => void;
+// 	anchor: HTMLElement;
+// 	onClose: () => void;
+// }) => {
+// 	const router = useRouter();
+// 	const { t } = useTranslation("browse");
+
+// 	return (
+// 		<Menu
+// 			id="sortby-menu"
+// 			MenuListProps={{
+// 				"aria-labelledby": "sortby",
+// 			}}
+// 			anchorEl={anchor}
+// 			open={!!anchor}
+// 			onClose={onClose}
+// 		>
+// 			{Object.values(SortBy).map((x) => (
+// 				<MenuItem
+// 					key={x}
+// 					selected={sortKey === x}
+// 					onClick={() => setSort(x)}
+// 					component={Link}
+// 					to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
+// 					shallow
+// 					replace
+// 				>
+// 					<ListItemText>{t(`browse.sortkey.${x}`)}</ListItemText>
+// 				</MenuItem>
+// 			))}
+// 			<Divider />
+// 			<MenuItem
+// 				selected={sortOrd === SortOrd.Asc}
+// 				onClick={() => setSortOrd(SortOrd.Asc)}
+// 				component={Link}
+// 				to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
+// 				shallow
+// 				replace
+// 			>
+// 				<ListItemIcon>
+// 					<South fontSize="small" />
+// 				</ListItemIcon>
+// 				<ListItemText>{t("browse.sortord.asc")}</ListItemText>
+// 			</MenuItem>
+// 			<MenuItem
+// 				selected={sortOrd === SortOrd.Desc}
+// 				onClick={() => setSortOrd(SortOrd.Desc)}
+// 				component={Link}
+// 				to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
+// 				shallow
+// 				replace
+// 			>
+// 				<ListItemIcon>
+// 					<North fontSize="small" />
+// 				</ListItemIcon>
+// 				<ListItemText>{t("browse.sortord.desc")}</ListItemText>
+// 			</MenuItem>
+// 		</Menu>
+// 	);
+// };
+
+// const BrowseSettings = ({
+// 	sortKey,
+// 	setSort,
+// 	sortOrd,
+// 	setSortOrd,
+// 	layout,
+// 	setLayout,
+// }: {
+// 	sortKey: SortBy;
+// 	setSort: (sort: SortBy) => void;
+// 	sortOrd: SortOrd;
+// 	setSortOrd: (sort: SortOrd) => void;
+// 	layout: Layout;
+// 	setLayout: (layout: Layout) => void;
+// }) => {
+// 	const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
+// 	const { t } = useTranslation("browse");
+
+// 	const switchViewTitle =
+// 		layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
+
+// 	return (
+// 		<>
+// 			<Box sx={{ display: "flex", justifyContent: "space-around" }}>
+// 				<ButtonGroup sx={{ m: 1 }}>
+// 					<Button disabled>
+// 						<FilterList />
+// 					</Button>
+// 					<Tooltip title={t("browse.sortby-tt")}>
+// 						<Button
+// 							id="sortby"
+// 							aria-label={t("browse.sortby-tt")}
+// 							aria-controls={sortAnchor ? "sorby-menu" : undefined}
+// 							aria-haspopup="true"
+// 							aria-expanded={sortAnchor ? "true" : undefined}
+// 							onClick={(event) => setSortAnchor(event.currentTarget)}
+// 						>
+// 							<Sort />
+// 							{t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
+// 							{sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
+// 						</Button>
+// 					</Tooltip>
+// 					<Tooltip title={switchViewTitle}>
+// 						<Button
+// 							onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}
+// 							aria-label={switchViewTitle}
+// 						>
+// 							{layout === Layout.List ? <GridView /> : <ViewList />}
+// 						</Button>
+// 					</Tooltip>
+// 				</ButtonGroup>
+// 			</Box>
+// 			{sortAnchor && (
+// 				<SortByMenu
+// 					sortKey={sortKey}
+// 					sortOrd={sortOrd}
+// 					setSort={setSort}
+// 					setSortOrd={setSortOrd}
+// 					anchor={sortAnchor}
+// 					onClose={() => setSortAnchor(null)}
+// 				/>
+// 			)}
+// 		</>
+// 	);
+// };
diff --git a/front/packages/ui/src/browse/index.tsx b/front/packages/ui/src/browse/index.tsx
index f35c4a0d..3d23d0eb 100644
--- a/front/packages/ui/src/browse/index.tsx
+++ b/front/packages/ui/src/browse/index.tsx
@@ -73,10 +73,11 @@ const query = (
 export const BrowsePage: QueryPage<{ slug?: string }> = ({ slug }) => {
 	const [sortKey, setSort] = useState(SortBy.Name);
 	const [sortOrd, setSortOrd] = useState(SortOrd.Asc);
-	const [layout, setLayout] = useState(Layout.List);
+	const [layout, setLayout] = useState(Layout.Grid);
 
 	const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList;
 
+	// TODO list header to seet sort things, filter and layout.
 	return (
 		<>
 			{/* <BrowseSettings */}
diff --git a/front/packages/ui/src/browse/toto.tsx b/front/packages/ui/src/browse/toto.tsx
deleted file mode 100644
index 2a706490..00000000
--- a/front/packages/ui/src/browse/toto.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
- * 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/>.
- */
-
-const Item = ({ item, layout }: { item?: LibraryItem; layout: Layout }) => {
-	let href;
-	if (item?.type === ItemType.Movie) href = `/movie/${item.slug}`;
-	else if (item?.type === ItemType.Show) href = `/show/${item.slug}`;
-	else if (item?.type === ItemType.Collection) href = `/collection/${item.slug}`;
-
-	switch (layout) {
-		case Layout.Grid:
-			return (
-				<ItemGrid
-					href={href}
-					name={item?.name}
-					subtitle={item && item.type !== ItemType.Collection ? getDisplayDate(item) : null}
-					poster={item?.poster}
-					loading={!item}
-				/>
-			);
-		case Layout.List:
-			return (
-				<ItemList
-					href={href}
-					name={item?.name}
-					subtitle={item && item.type !== ItemType.Collection ? getDisplayDate(item) : null}
-					poster={item?.poster}
-					thumbnail={item?.thumbnail}
-					loading={!item}
-				/>
-			);
-	}
-};
-
-const SortByMenu = ({
-	sortKey,
-	setSort,
-	sortOrd,
-	setSortOrd,
-	anchor,
-	onClose,
-}: {
-	sortKey: SortBy;
-	setSort: (sort: SortBy) => void;
-	sortOrd: SortOrd;
-	setSortOrd: (sort: SortOrd) => void;
-	anchor: HTMLElement;
-	onClose: () => void;
-}) => {
-	const router = useRouter();
-	const { t } = useTranslation("browse");
-
-	return (
-		<Menu
-			id="sortby-menu"
-			MenuListProps={{
-				"aria-labelledby": "sortby",
-			}}
-			anchorEl={anchor}
-			open={!!anchor}
-			onClose={onClose}
-		>
-			{Object.values(SortBy).map((x) => (
-				<MenuItem
-					key={x}
-					selected={sortKey === x}
-					onClick={() => setSort(x)}
-					component={Link}
-					to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
-					shallow
-					replace
-				>
-					<ListItemText>{t(`browse.sortkey.${x}`)}</ListItemText>
-				</MenuItem>
-			))}
-			<Divider />
-			<MenuItem
-				selected={sortOrd === SortOrd.Asc}
-				onClick={() => setSortOrd(SortOrd.Asc)}
-				component={Link}
-				to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
-				shallow
-				replace
-			>
-				<ListItemIcon>
-					<South fontSize="small" />
-				</ListItemIcon>
-				<ListItemText>{t("browse.sortord.asc")}</ListItemText>
-			</MenuItem>
-			<MenuItem
-				selected={sortOrd === SortOrd.Desc}
-				onClick={() => setSortOrd(SortOrd.Desc)}
-				component={Link}
-				to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
-				shallow
-				replace
-			>
-				<ListItemIcon>
-					<North fontSize="small" />
-				</ListItemIcon>
-				<ListItemText>{t("browse.sortord.desc")}</ListItemText>
-			</MenuItem>
-		</Menu>
-	);
-};
-
-const BrowseSettings = ({
-	sortKey,
-	setSort,
-	sortOrd,
-	setSortOrd,
-	layout,
-	setLayout,
-}: {
-	sortKey: SortBy;
-	setSort: (sort: SortBy) => void;
-	sortOrd: SortOrd;
-	setSortOrd: (sort: SortOrd) => void;
-	layout: Layout;
-	setLayout: (layout: Layout) => void;
-}) => {
-	const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
-	const { t } = useTranslation("browse");
-
-	const switchViewTitle =
-		layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
-
-	return (
-		<>
-			<Box sx={{ display: "flex", justifyContent: "space-around" }}>
-				<ButtonGroup sx={{ m: 1 }}>
-					<Button disabled>
-						<FilterList />
-					</Button>
-					<Tooltip title={t("browse.sortby-tt")}>
-						<Button
-							id="sortby"
-							aria-label={t("browse.sortby-tt")}
-							aria-controls={sortAnchor ? "sorby-menu" : undefined}
-							aria-haspopup="true"
-							aria-expanded={sortAnchor ? "true" : undefined}
-							onClick={(event) => setSortAnchor(event.currentTarget)}
-						>
-							<Sort />
-							{t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
-							{sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
-						</Button>
-					</Tooltip>
-					<Tooltip title={switchViewTitle}>
-						<Button
-							onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}
-							aria-label={switchViewTitle}
-						>
-							{layout === Layout.List ? <GridView /> : <ViewList />}
-						</Button>
-					</Tooltip>
-				</ButtonGroup>
-			</Box>
-			{sortAnchor && (
-				<SortByMenu
-					sortKey={sortKey}
-					sortOrd={sortOrd}
-					setSort={setSort}
-					setSortOrd={setSortOrd}
-					anchor={sortAnchor}
-					onClose={() => setSortAnchor(null)}
-				/>
-			)}
-		</>
-	);
-};