diff --git a/src/Container.svelte b/src/Container.svelte
index e0dd568..d5b728e 100644
--- a/src/Container.svelte
+++ b/src/Container.svelte
@@ -31,8 +31,6 @@
 	export let debugOutline = false;
 	export let focusOnClick = false;
 
-	export let registrar: Registrar = () => () => {};
-
 	export let active = true;
 
 	const { registerer, ...rest } = new Selectable(name)
@@ -93,8 +91,6 @@
 		})
 		.getStores();
 
-	$: unregister = registrar(rest.container);
-
 	export const selectable = rest.container;
 	export const hasFocus = rest.hasFocus;
 	export const hasFocusWithin = rest.hasFocusWithin;
@@ -120,7 +116,6 @@
 		dispatch('mount', rest.container);
 
 		return () => {
-			unregister();
 			rest.container._unmountContainer();
 		};
 	});
diff --git a/src/lib/components/CardGrid.svelte b/src/lib/components/CardGrid.svelte
index d5b5584..e370c0b 100644
--- a/src/lib/components/CardGrid.svelte
+++ b/src/lib/components/CardGrid.svelte
@@ -1,18 +1,33 @@
 <script lang="ts">
 	import Container from '../../Container.svelte';
 	import { onMount } from 'svelte';
+	import classNames from 'classnames';
+
+	export let direction: 'horizontal' | 'vertical' = 'vertical';
 
 	let cols: number = 1;
 	const calculateRows = () => {
 		const width = window.innerWidth;
-		if (width >= 1536) {
-			cols = 5;
-		} else if (width >= 1280) {
-			cols = 4;
-		} else if (width >= 768) {
-			cols = 3;
+		if (direction === 'vertical') {
+			if (width >= 1536) {
+				cols = 6;
+			} else if (width >= 1280) {
+				cols = 5;
+			} else if (width >= 768) {
+				cols = 4;
+			} else {
+				cols = 3;
+			}
 		} else {
-			cols = 2;
+			if (width >= 1536) {
+				cols = 4;
+			} else if (width >= 1280) {
+				cols = 3;
+			} else if (width >= 768) {
+				cols = 2;
+			} else {
+				cols = 1;
+			}
 		}
 	};
 
@@ -24,7 +39,16 @@
 <Container
 	direction="grid"
 	gridCols={cols}
-	class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+	class={classNames(
+		'grid gap-x-4 gap-y-8',
+		{
+			'grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4': direction === 'horizontal',
+			'grid-cols-4 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6': direction === 'vertical'
+		},
+
+		$$restProps.class
+	)}
+	on:mount
 >
 	<slot />
 </Container>
diff --git a/src/lib/components/Carousel/UICarousel.svelte b/src/lib/components/Carousel/UICarousel.svelte
index 5e91907..062d88e 100644
--- a/src/lib/components/Carousel/UICarousel.svelte
+++ b/src/lib/components/Carousel/UICarousel.svelte
@@ -28,7 +28,7 @@
 	direction="horizontal"
 	class={classNames(
 		$$restProps.class,
-		'overflow-x-scroll scrollbar-hide relative p-1 overflow-y-visible'
+		'overflow-x-auto scrollbar-hide relative p-1 overflow-y-visible'
 	)}
 	style={`mask-image: linear-gradient(to right, transparent 0%, ${
 		fadeLeft ? '' : 'black 0%, '
diff --git a/src/lib/components/EpisodeCard/EpisodeCard.svelte b/src/lib/components/EpisodeCard/EpisodeCard.svelte
index 9facd8a..044095e 100644
--- a/src/lib/components/EpisodeCard/EpisodeCard.svelte
+++ b/src/lib/components/EpisodeCard/EpisodeCard.svelte
@@ -16,9 +16,9 @@
 <AnimateScale hasFocus={$hasFocus}>
 	<Container
 		class={classNames(
-			'w-[420px] h-[236.25px] ',
+			'w-full h-64',
 			'flex flex-col shrink-0',
-			'overflow-hidden rounded-xl cursor-pointer group relative px-4 py-3 selectable'
+			'overflow-hidden rounded-2xl cursor-pointer group relative px-4 py-3 selectable'
 		)}
 		on:select={handlePlay}
 		on:enter
@@ -35,7 +35,7 @@
 			style={`background-image: url('${backdropUrl}')`}
 		/>
 		<div
-			class="absolute inset-0 bg-gradient-to-t from-stone-950 via-transparent via-40% to-transparent"
+			class="absolute inset-0 bg-gradient-to-t from-secondary-900/75 from-10% via-transparent via-40% to-transparent"
 		/>
 		{#if handlePlay}
 			<div
diff --git a/src/lib/components/SeriesPage/EpisodeGrid.svelte b/src/lib/components/SeriesPage/EpisodeGrid.svelte
new file mode 100644
index 0000000..654387e
--- /dev/null
+++ b/src/lib/components/SeriesPage/EpisodeGrid.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { type Readable } from 'svelte/store';
+	import { tmdbApi, type TmdbSeriesFull2 } from '../../apis/tmdb/tmdb-api';
+	import Container from '../../../Container.svelte';
+	import { useDependantRequest } from '../../stores/data.store';
+	import type { JellyfinItem } from '../../apis/jellyfin/jellyfin-api';
+	import TmdbEpisodeCard from '../EpisodeCard/TmdbEpisodeCard.svelte';
+	import { scrollIntoView, useRegistrars } from '../../selectable';
+	import { playerState } from '../VideoPlayer/VideoPlayer';
+	import CardGrid from '../CardGrid.svelte';
+	import UICarousel from '../Carousel/UICarousel.svelte';
+	import classNames from 'classnames';
+
+	export let id: number;
+	export let tmdbSeries: Readable<TmdbSeriesFull2 | undefined>;
+	export let jellyfinEpisodes: Readable<JellyfinItem[] | undefined>;
+	export let currentJellyfinEpisode: Readable<JellyfinItem | undefined>;
+	export let hideSeasons = false;
+
+	const { data: tmdbSeasons } = useDependantRequest(
+		(seasons: number) => tmdbApi.getTmdbSeriesSeasons(id, seasons),
+		tmdbSeries,
+		(series) => (series?.seasons?.length ? ([series.seasons.length] as const) : undefined)
+	);
+
+	const seasonButtons = useRegistrars<number>();
+	const episodeCards = useRegistrars<string>();
+	let seasonIndex = 0;
+
+	currentJellyfinEpisode.subscribe((episode) => {
+		if (!episode) return;
+
+		seasonIndex = episode.ParentIndexNumber ? episode.ParentIndexNumber - 1 : seasonIndex;
+
+		const seasonButton = seasonButtons.get(episode?.ParentIndexNumber || -1);
+		const episodeCard = episodeCards.get(`${episode?.ParentIndexNumber}-${episode?.IndexNumber}`);
+
+		seasonButton.subscribe((s) => s?.focus({ setFocusedElement: false, propagate: false }));
+		episodeCard.subscribe((e) => e?.focus({ setFocusedElement: false, propagate: false }));
+	});
+</script>
+
+<Container
+	on:enter
+	class={classNames('transition-transform mx-20', {
+		'-translate-y-20': hideSeasons
+	})}
+>
+	<UICarousel
+		class={classNames('flex -mx-2 transition-opacity mb-8', {
+			'opacity-0': hideSeasons
+		})}
+	>
+		{#each $tmdbSeasons || [] as season, i}
+			<Container
+				on:mount={seasonButtons.registrar(season.season_number || -1)}
+				let:hasFocus
+				on:enter={(event) => {
+					scrollIntoView({ horizontal: 64 })(event);
+					seasonIndex = i;
+				}}
+				registrar={seasonButtons.registrar(i)}
+				focusOnClick
+			>
+				<div
+					class={classNames(
+						'px-3 py-1 cursor-pointer whitespace-nowrap text-xl tracking-wide font-medium rounded-lg',
+						'hover:font-semibold hover:tracking-wide hover:text-white',
+						{
+							'bg-primary-500 text-black': hasFocus,
+							//'bg-stone-800/50': hasFocus,
+							'text-zinc-400': !(seasonIndex === i),
+							'text-white': seasonIndex === i && !hasFocus
+						}
+					)}
+				>
+					Season {season.season_number}
+				</div>
+			</Container>
+		{/each}
+	</UICarousel>
+	<CardGrid direction="horizontal" on:mount>
+		{#each $tmdbSeasons?.[seasonIndex]?.episodes || [] as episode}
+			{@const jellyfinEpisodeId = $jellyfinEpisodes?.find(
+				(i) =>
+					i.IndexNumber === episode.episode_number && i.ParentIndexNumber === episode.season_number
+			)?.Id}
+			<TmdbEpisodeCard
+				on:mount={episodeCards.registrar(`${episode.season_number}-${episode.episode_number}`)}
+				{episode}
+				handlePlay={jellyfinEpisodeId
+					? () => playerState.streamJellyfinId(jellyfinEpisodeId)
+					: undefined}
+			/>
+		{/each}
+	</CardGrid>
+</Container>
diff --git a/src/lib/components/SeriesPage/SeriesPage.svelte b/src/lib/components/SeriesPage/SeriesPage.svelte
index 4538cdf..33812be 100644
--- a/src/lib/components/SeriesPage/SeriesPage.svelte
+++ b/src/lib/components/SeriesPage/SeriesPage.svelte
@@ -13,13 +13,13 @@
 	import { playerState } from '../VideoPlayer/VideoPlayer';
 	import { modalStack } from '../Modal/modal.store';
 	import { derived } from 'svelte/store';
-	import EpisodeCarousel from './EpisodeCarousel.svelte';
 	import { scrollIntoView, useRegistrar } from '../../selectable';
 	import ScrollHelper from '../ScrollHelper.svelte';
 	import SonarrMediaMangerModal from '../MediaManager/sonarr/SonarrMediaMangerModal.svelte';
 	import Carousel from '../Carousel/Carousel.svelte';
 	import TmdbPersonCard from '../PersonCard/TmdbPersonCard.svelte';
 	import TmdbCard from '../Card/TmdbCard.svelte';
+	import EpisodeGrid from './EpisodeGrid.svelte';
 
 	export let id: string;
 
@@ -50,7 +50,7 @@
 	const episodeCards = useRegistrar();
 
 	let scrollTop: number;
-	$: showEpisodeInfo = scrollTop > 140;
+	$: showEpisodeInfo = false; // scrollTop > 140;
 </script>
 
 <DetachedPage let:handleGoBack let:registrar>
@@ -152,7 +152,7 @@
 							focusOnMount
 							on:navigate={handleGoBack}
 							on:back={handleGoBack}
-							{registrar}
+							on:mount={registrar}
 						>
 							{#if $nextJellyfinEpisode}
 								<Button
@@ -204,14 +204,13 @@
 				</div>
 			</HeroCarousel>
 		</Container>
-		<EpisodeCarousel
-			on:enter={scrollIntoView({ bottom: 32 })}
+		<EpisodeGrid
+			on:enter={scrollIntoView({ top: 32 })}
 			id={Number(id)}
 			tmdbSeries={tmdbSeriesData}
 			{jellyfinEpisodes}
-			{nextJellyfinEpisode}
-			bind:selectedTmdbEpisode
-			registrar={episodeCards.registrar}
+			currentJellyfinEpisode={nextJellyfinEpisode}
+			on:mount={episodeCards.registrar}
 		/>
 		<Container on:enter={scrollIntoView({ top: 0 })} class="pt-8">
 			{#await $tmdbSeries then series}
diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts
index 169caa7..f61b00a 100644
--- a/src/lib/selectable.ts
+++ b/src/lib/selectable.ts
@@ -2,7 +2,7 @@ import { derived, get, type Readable, type Writable, writable } from 'svelte/sto
 import { getScrollParent } from './utils';
 
 export type Registerer = (htmlElement: HTMLElement) => { destroy: () => void };
-export type Registrar = (selectable: Selectable) => () => void;
+export type Registrar = (e: CustomEvent<Selectable>) => () => void;
 
 export type Direction = 'up' | 'down' | 'left' | 'right';
 export type FlowDirection = 'vertical' | 'horizontal';
@@ -815,17 +815,17 @@ export const scrollIntoView: (...args: [Offsets]) => (e: CustomEvent<EnterEvent>
 export const useRegistrar = (): { registrar: Registrar } & Readable<Selectable | undefined> => {
 	const selectable = writable<Selectable | undefined>();
 
-	function registrar(_selectable: Selectable) {
+	const registrar: Registrar = (e) => {
 		selectable.update((prev) => {
 			if (prev) {
-				console.warn('Overwriting existing selectable', prev, _selectable);
+				console.warn('Overwriting existing selectable', prev, e.detail);
 			}
 
-			return _selectable;
+			return e.detail;
 		});
 
 		return () => selectable.set(undefined);
-	}
+	};
 
 	return {
 		registrar,
@@ -833,6 +833,48 @@ export const useRegistrar = (): { registrar: Registrar } & Readable<Selectable |
 	};
 };
 
+export const useRegistrars = <T extends string | number>(): {
+	registrar: (key: T) => Registrar;
+	get: (key: T) => Readable<Selectable | undefined>;
+} => {
+	const map = new Map<T, Writable<Selectable | undefined>>();
+
+	const registrar =
+		(key: T): Registrar =>
+		(e) => {
+			if (!map.has(key)) {
+				map.set(key, writable<Selectable | undefined>());
+			}
+
+			const store = map.get(key);
+			store?.update((prev) => {
+				if (prev) {
+					console.warn('Overwriting existing selectable', prev, e.detail);
+				}
+
+				return e.detail;
+			});
+
+			return () => store?.set(undefined);
+		};
+
+	const get = (key: T): Readable<Selectable | undefined> => {
+		const store = map.get(key);
+		if (!store) {
+			const newStore = writable<Selectable | undefined>();
+			map.set(key, newStore);
+			return newStore;
+		} else {
+			return store;
+		}
+	};
+
+	return {
+		registrar,
+		get
+	};
+};
+
 const sidebar = useRegistrar();
 const episodeCards = useRegistrar();
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b658c63..fb60c41 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { type Readable, writable } from 'svelte/store';
 
 export function formatMinutesToTime(minutes: number) {
 	const days = Math.floor(minutes / 60 / 24);
@@ -105,3 +105,11 @@ export function getScrollParent(
 		}
 	}
 }
+
+export function subscribeUntil<T>(store: Readable<T>, fn: (value: T) => boolean) {
+	const unsubscribe = store.subscribe((v) => {
+		if (fn(v)) {
+			unsubscribe();
+		}
+	});
+}