diff --git a/src/Container.svelte b/src/Container.svelte
index 2346e96..d6010c7 100644
--- a/src/Container.svelte
+++ b/src/Container.svelte
@@ -2,18 +2,15 @@
 
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
-	import {
-		type NavigationActions,
-		type FocusHandler,
-		Selectable,
-		type EnterEvent
-	} from './lib/selectable';
+	import { type NavigationActions, Selectable, type EnterEvent } from './lib/selectable';
 	import classNames from 'classnames';
+
 	const dispatch = createEventDispatcher<{
 		click: MouseEvent;
 		select: null;
 		clickOrSelect: null;
 		enter: EnterEvent;
+		mount: Selectable;
 	}>();
 
 	export let name: string = '';
@@ -39,10 +36,9 @@
 			function stopPropagation() {
 				options.propagate = false;
 			}
+			console.log('here', selectable);
 
-			if (options.propagate) {
-				dispatch('enter', { selectable, options, stopPropagation });
-			}
+			dispatch('enter', { selectable, options, stopPropagation });
 		})
 		.setOnSelect(() => {
 			dispatch('select');
@@ -71,6 +67,8 @@
 	onMount(() => {
 		rest.container._mountSelectable(focusOnMount);
 
+		dispatch('mount', rest.container);
+
 		return () => {
 			rest.container._unmountContainer();
 		};
diff --git a/src/lib/components/SeriesPage/EpisodeCard.svelte b/src/lib/components/SeriesPage/EpisodeCard.svelte
index b1458fe..853a694 100644
--- a/src/lib/components/SeriesPage/EpisodeCard.svelte
+++ b/src/lib/components/SeriesPage/EpisodeCard.svelte
@@ -23,6 +23,9 @@
 	)}
 	let:hasFocus
 	on:select={handlePlay}
+	on:enter
+	on:mount
+	focusOnClick
 >
 	<div class="flex-1 flex flex-col justify-end z-10">
 		<h2 class="text-zinc-300 font-medium">Episode {episode.episode_number}</h2>
diff --git a/src/lib/components/SeriesPage/EpisodeCarousel.svelte b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
index 480b7fe..5345edc 100644
--- a/src/lib/components/SeriesPage/EpisodeCarousel.svelte
+++ b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
@@ -11,7 +11,7 @@
 	} from '../../apis/tmdb/tmdb-api';
 	import Carousel from '../Carousel/Carousel.svelte';
 	import Container from '../../../Container.svelte';
-	import { scrollElementIntoView, scrollIntoView } from '../../selectable';
+	import { scrollElementIntoView, scrollIntoView, Selectable } from '../../selectable';
 	import UICarousel from '../Carousel/UICarousel.svelte';
 	import classNames from 'classnames';
 	import ScrollHelper from '../ScrollHelper.svelte';
@@ -20,7 +20,9 @@
 	export let tmdbSeries: Readable<TmdbSeriesFull2 | undefined>;
 	export let jellyfinEpisodes: Readable<JellyfinItem[] | undefined>;
 	export let nextJellyfinEpisode: Readable<JellyfinItem | undefined>;
-	export let selectedTmdbEpisode: TmdbEpisode | undefined = undefined;
+
+	const containers = new Map<TmdbSeason | TmdbEpisode, Selectable>();
+	let scrollTop: number;
 
 	const { data: tmdbSeasons, isLoading: isTmdbSeasonsLoading } = useDependantRequest(
 		(seasons: number) => tmdbApi.getTmdbSeriesSeasons(id, seasons),
@@ -28,14 +30,11 @@
 		(series) => (series?.seasons?.length ? ([series.seasons.length] as const) : undefined)
 	);
 
-	const containers: Record<string, Container> = {};
-	let scrollTop: number;
-
 	function focusFirstEpisodeOf(season: TmdbSeason) {
 		let isAlreadySelected = false;
 
 		for (const episode of season.episodes || []) {
-			const selectable = containers[`episode-${episode.id}`]?.container;
+			const selectable = containers.get(episode);
 			if (selectable && get(selectable.hasFocusWithin)) {
 				isAlreadySelected = true;
 				break;
@@ -44,41 +43,38 @@
 
 		const episode = season.episodes?.[0];
 		if (episode && !isAlreadySelected) {
-			const selectable = containers[`episode-${episode.id}`]?.container;
+			const selectable = containers.get(episode);
 			if (selectable) selectable.focus({ setFocusedElement: false });
 		}
 	}
 
-	function focusSeasonOf(episode: TmdbEpisode) {
-		const seasonSelectable = containers[`season-${episode.season_number}`]?.container;
+	function focusSeason(season: TmdbSeason) {
+		const seasonSelectable = containers.get(season);
 		if (seasonSelectable) seasonSelectable.focus({ setFocusedElement: false });
 	}
 
-	tmdbSeasons.subscribe((seasons) => {
-		selectedTmdbEpisode = seasons?.[0]?.episodes?.[0];
-	});
+	function handleEpisodeMount(event: CustomEvent<Selectable>, tmdbEpisode: TmdbEpisode) {
+		containers.set(tmdbEpisode, event.detail);
+		const selectable = event.detail;
 
-	// Handle focus next episode
-	derived([tmdbSeasons, nextJellyfinEpisode], (r) => r).subscribe(
-		([$seasons, $jellyfinEpisode]) => {
-			const tmdbEpisode = $seasons
-				?.flatMap((s) => s.episodes)
-				.find(
-					(e) =>
-						e?.episode_number === $jellyfinEpisode?.IndexNumber &&
-						e?.season_number === $jellyfinEpisode?.ParentIndexNumber
-				);
-			if (tmdbEpisode) {
-				const container = containers[`episode-${tmdbEpisode.id}`]?.container;
-				container?.focus({
+		// Handle focus next episode
+		nextJellyfinEpisode.subscribe(($jellyfinEpisode) => {
+			console.log('got next jellyfin episode', $jellyfinEpisode, tmdbEpisode, selectable);
+
+			const isNextEpisode =
+				$jellyfinEpisode?.IndexNumber === tmdbEpisode.episode_number &&
+				$jellyfinEpisode?.ParentIndexNumber === tmdbEpisode.season_number;
+
+			if (isNextEpisode) {
+				selectable.focus({
 					setFocusedElement: false,
 					propagate: false
 				});
-				const element = container?.getHtmlElement();
-				if (element) scrollElementIntoView(element, { horizontal: 64 + 16 });
+				const el = selectable.getHtmlElement();
+				if (el) scrollElementIntoView(el, { left: 64 + 16 });
 			}
-		}
-	);
+		});
+	}
 </script>
 
 <ScrollHelper bind:scrollTop />
@@ -108,7 +104,7 @@
 							scrollIntoView({ horizontal: 64 })(event);
 							if (event.detail.options.setFocusedElement) focusFirstEpisodeOf(season);
 						}}
-						bind:this={containers[`season-${season.season_number}`]}
+						on:mount={(e) => containers.set(season, e.detail)}
 					>
 						<div
 							class={classNames(
@@ -131,17 +127,13 @@
 		<div class="flex -mx-2">
 			{#each $tmdbSeasons as season}
 				{#each season?.episodes || [] as episode}
-					<Container
-						class="mx-2"
-						bind:this={containers[`episode-${episode.id}`]}
-						on:enter={(event) => {
-							scrollIntoView({ left: 64 + 16 })(event);
-							selectedTmdbEpisode = episode;
-							if (event.detail.options.setFocusedElement) focusSeasonOf(episode);
-						}}
-						focusOnClick
-					>
+					<div class="mx-2">
 						<EpisodeCard
+							on:enter={(event) => {
+								scrollIntoView({ left: 64 + 16 })(event);
+								focusSeason(season);
+							}}
+							on:mount={(e) => handleEpisodeMount(e, episode)}
 							jellyfinEpisode={$jellyfinEpisodes?.find(
 								(i) =>
 									i.IndexNumber === episode.episode_number &&
@@ -149,7 +141,7 @@
 							)}
 							{episode}
 						/>
-					</Container>
+					</div>
 				{/each}
 			{/each}
 		</div>
diff --git a/src/lib/components/SeriesPage/SeriesPage.svelte b/src/lib/components/SeriesPage/SeriesPage.svelte
index ac80304..324d3cb 100644
--- a/src/lib/components/SeriesPage/SeriesPage.svelte
+++ b/src/lib/components/SeriesPage/SeriesPage.svelte
@@ -12,7 +12,6 @@
 	import Button from '../Button.svelte';
 	import { playerState } from '../VideoPlayer/VideoPlayer';
 	import { modalStack } from '../Modal/modal.store';
-	import ManageMediaModal from '../MediaManager/radarr/RadarrMediaMangerModal.svelte';
 	import { derived } from 'svelte/store';
 	import EpisodeCarousel from './EpisodeCarousel.svelte';
 	import { scrollIntoView, Selectable } from '../../selectable';
@@ -25,10 +24,7 @@
 		tmdbApi.getTmdbSeries,
 		Number(id)
 	);
-	const { promise: sonarrItem, data: sonarrItemData } = useRequest(
-		sonarrApi.getSeriesByTmdbId,
-		Number(id)
-	);
+	const { promise: sonarrItem } = useRequest(sonarrApi.getSeriesByTmdbId, Number(id));
 	const { promise: jellyfinItem, data: jellyfinItemData } = useRequest(
 		(id: string) => jellyfinApi.getLibraryItemFromTmdbId(id),
 		id
diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts
index 7d2e6c5..7b7438a 100644
--- a/src/lib/selectable.ts
+++ b/src/lib/selectable.ts
@@ -15,6 +15,10 @@ export type NavigationActions = {
 type FocusEventOptions = {
 	setFocusedElement: boolean;
 	propagate: boolean;
+	onFocus?: (
+		superOnFocus: FocusHandler,
+		...args: Parameters<FocusHandler>
+	) => ReturnType<FocusHandler>;
 };
 
 export type EnterEvent = {
@@ -46,13 +50,13 @@ export class Selectable {
 	private trapFocus: boolean = false;
 	private navigationActions: NavigationActions = {};
 	private isActive: boolean = true;
-	private onFocus?: FocusHandler;
+	private onFocus: FocusHandler = () => {};
 	private onSelect?: () => void;
 
 	private direction: FlowDirection = 'vertical';
 	private gridColumns: number = 0;
 
-	private static _initalizationStack: Selectable[] = [];
+	private static _initializationStack: Selectable[] = [];
 
 	static focusedObject: Writable<Selectable | undefined> = writable(undefined);
 
@@ -78,8 +82,6 @@ export class Selectable {
 	constructor(name: string = '') {
 		this.id = Symbol();
 		this.name = name;
-
-		// Find parents
 	}
 
 	setDirection(direction: FlowDirection) {
@@ -94,19 +96,19 @@ export class Selectable {
 	}
 
 	focus(options: Partial<FocusEventOptions> = {}) {
-		function propagateFocusUpdates(
-			options: FocusEventOptions,
-			parent: Selectable,
-			child?: Selectable
-		) {
-			if (!get(parent.hasFocusWithin) && options.propagate) parent.onFocus?.(parent, options);
+		function propagateFocusUpdates(options: FocusEventOptions, selectable: Selectable) {
+			if (options.propagate && options.onFocus)
+				options.onFocus(selectable.onFocus, selectable, options);
+			else if (options.propagate && !get(selectable.hasFocusWithin))
+				selectable.onFocus(selectable, options);
 
-			if (child) {
-				const index = parent.children.indexOf(child);
+			const parent = selectable.parent;
+
+			if (parent) {
+				const index = parent.children.indexOf(selectable);
 				parent.focusIndex.update((prev) => (index === -1 ? prev : index));
-			}
-			if (parent.parent) {
-				propagateFocusUpdates(options, parent.parent, parent);
+
+				propagateFocusUpdates(options, parent);
 			}
 		}
 
@@ -234,11 +236,11 @@ export class Selectable {
 	}
 
 	private static initializeTreeStructure() {
-		for (let i = 0; i < Selectable._initalizationStack.length; i++) {
-			const selectable = Selectable._initalizationStack[i];
+		for (let i = 0; i < Selectable._initializationStack.length; i++) {
+			const selectable = Selectable._initializationStack[i];
 			const htmlElement = selectable?.getHtmlElement();
 
-			const previousSelectable = Selectable._initalizationStack[i - 1];
+			const previousSelectable = Selectable._initializationStack[i - 1];
 			const previousHtmlElement = previousSelectable?.getHtmlElement();
 
 			const isParent =
@@ -246,10 +248,10 @@ export class Selectable {
 			if (isParent && selectable && previousSelectable && htmlElement && previousHtmlElement) {
 				// Add all previous elements as children
 				for (let j = i - 1; j >= 0; j--) {
-					const potentialChild = Selectable._initalizationStack[j];
+					const potentialChild = Selectable._initializationStack[j];
 					if (potentialChild && htmlElement.contains(potentialChild.htmlElement || null)) {
 						selectable.addChild(potentialChild, 0);
-						Selectable._initalizationStack.splice(j, 1);
+						Selectable._initializationStack.splice(j, 1);
 						i = j;
 					} else break;
 				}
@@ -334,7 +336,7 @@ export class Selectable {
 			return aboveSibling;
 		};
 
-		for (const child of this._initalizationStack) {
+		for (const child of this._initializationStack) {
 			const htmlElement = child.htmlElement;
 			const parentSelectable = htmlElement?.parentElement
 				? getParentSelectable(htmlElement.parentElement)
@@ -351,7 +353,7 @@ export class Selectable {
 			}
 		}
 
-		Selectable._initalizationStack = [];
+		Selectable._initializationStack = [];
 	}
 
 	/** TODO update docs
@@ -362,7 +364,7 @@ export class Selectable {
 	 * the parent-child relationships.
 	 */
 	_mountSelectable(focusOnMount: boolean = false) {
-		console.debug('Mounting', this, Selectable._initalizationStack.slice());
+		console.debug('Mounting', this, Selectable._initializationStack.slice());
 
 		Selectable.finalizeTreeStructure();
 
@@ -404,7 +406,7 @@ export class Selectable {
 		return (htmlElement: HTMLElement) => {
 			selectable.setHtmlElement(htmlElement);
 			console.debug('Registering', selectable);
-			Selectable._initalizationStack.push(selectable);
+			Selectable._initializationStack.push(selectable);
 			Selectable.initializeTreeStructure();
 
 			return {