diff --git a/src/Container.svelte b/src/Container.svelte
index 0f19825..46d116a 100644
--- a/src/Container.svelte
+++ b/src/Container.svelte
@@ -1,9 +1,10 @@
 <svelte:options accessors />
 
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import { type NavigationActions, type FocusHandler, Selectable } from './lib/selectable';
 	import classNames from 'classnames';
+	const dispatch = createEventDispatcher();
 
 	export let name: string = '';
 	export let direction: 'vertical' | 'horizontal' | 'grid' = 'vertical';
@@ -13,6 +14,7 @@
 	export let trapFocus = false;
 	export let debugOutline = false;
 	export let handleFocus: FocusHandler = () => {};
+	export let focusOnClick = false;
 
 	export let active = true;
 
@@ -36,6 +38,14 @@
 	$: container.setIsActive(active);
 	$: container.setGridColumns(gridCols);
 
+	function handleClick(e: MouseEvent) {
+		if (focusOnClick) {
+			container.focus();
+		}
+
+		dispatch('click', e);
+	}
+
 	onMount(() => {
 		rest.container._initializeSelectable();
 
@@ -51,7 +61,7 @@
 
 <svelte:element
 	this={tag}
-	on:click
+	on:click={handleClick}
 	tabindex={active ? 0 : -1}
 	{...$$restProps}
 	class={classNames($$restProps.class, {
diff --git a/src/lib/components/SeriesPage/EpisodeCard.svelte b/src/lib/components/SeriesPage/EpisodeCard.svelte
index 3d91dfd..40791a4 100644
--- a/src/lib/components/SeriesPage/EpisodeCard.svelte
+++ b/src/lib/components/SeriesPage/EpisodeCard.svelte
@@ -9,7 +9,7 @@
 
 <Container
 	class={classNames(
-		'rounded-xl overflow-hidden',
+		'rounded-xl overflow-hidden cursor-pointer',
 		'h-56 w-96 px-4 py-3',
 		'flex flex-col shrink-0 relative selectable'
 	)}
diff --git a/src/lib/components/SeriesPage/EpisodeCarousel.svelte b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
index 4dfd481..782c2f6 100644
--- a/src/lib/components/SeriesPage/EpisodeCarousel.svelte
+++ b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
@@ -2,7 +2,7 @@
 	import type { JellyfinItem } from '../../apis/jellyfin/jellyfin-api';
 	import EpisodeCard from './EpisodeCard.svelte';
 	import { useDependantRequest } from '../../stores/data.store';
-	import { get, type Readable } from 'svelte/store';
+	import { derived, get, type Readable } from 'svelte/store';
 	import {
 		tmdbApi,
 		type TmdbEpisode,
@@ -17,7 +17,7 @@
 
 	export let id: number;
 	export let tmdbSeries: Readable<TmdbSeriesFull2 | undefined>;
-	export let nextEpisode: JellyfinItem | undefined = undefined;
+	export let nextJellyfinEpisode: Readable<JellyfinItem | undefined>;
 	export let selectedTmdbEpisode: TmdbEpisode | undefined = undefined;
 
 	const { data: tmdbSeasons, isLoading: isTmdbSeasonsLoading } = useDependantRequest(
@@ -28,7 +28,7 @@
 
 	const containers: Record<string, Container> = {};
 
-	function handleSelectSeason(season: TmdbSeason) {
+	function focusFirstEpisodeOf(season: TmdbSeason) {
 		let isAlreadySelected = false;
 
 		for (const episode of season.episodes || []) {
@@ -42,18 +42,40 @@
 		const episode = season.episodes?.[0];
 		if (episode && !isAlreadySelected) {
 			const selectable = containers[`episode-${episode.id}`]?.container;
-			if (selectable) selectable.focus(false);
+			if (selectable) selectable.focus({ setFocusedElement: false });
 		}
 	}
 
-	function handleFocusEpisode(episode: TmdbEpisode) {
+	function focusSeasonOf(episode: TmdbEpisode) {
 		const seasonSelectable = containers[`season-${episode.season_number}`]?.container;
-		if (seasonSelectable) seasonSelectable.focus(false);
+		if (seasonSelectable) seasonSelectable.focus({ setFocusedElement: false });
 	}
 
 	tmdbSeasons.subscribe((seasons) => {
 		selectedTmdbEpisode = seasons?.[0]?.episodes?.[0];
 	});
+
+	// 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({
+					setFocusedElement: false,
+					propagate: false
+				});
+				const element = container?.getHtmlElement();
+				if (element) scrollElementIntoView(element, { horizontal: 64 + 16 });
+			}
+		}
+	);
 </script>
 
 {#if $isTmdbSeasonsLoading}
@@ -65,19 +87,21 @@
 				<Container
 					let:hasFocus
 					class="mx-2 text-nowrap"
-					on:click={() => handleSelectSeason(season)}
+					on:click={() => focusFirstEpisodeOf(season)}
 					handleFocus={(s, options) => {
-						const element = s.getHtmlElement();
-						if (element) scrollElementIntoView(element, { horizontal: 64 });
-						if (options.didNavigate) handleSelectSeason(season);
+						scrollIntoView({ horizontal: 64 })(s);
+						if (options.setFocusedElement) focusFirstEpisodeOf(season);
 					}}
 					bind:this={containers[`season-${season.season_number}`]}
 				>
 					<div
-						class={classNames({
-							'font-semibold tracking-wide': hasFocus,
-							'text-zinc-300 font-medium': !hasFocus
-						})}
+						class={classNames(
+							'cursor-pointer hover:font-semibold hover:tracking-wide hover:text-white',
+							{
+								'font-semibold tracking-wide': hasFocus,
+								'text-zinc-300 font-medium': !hasFocus
+							}
+						)}
 					>
 						Season {season.season_number}
 					</div>
@@ -93,8 +117,9 @@
 						handleFocus={(s, options) => {
 							scrollIntoView({ left: 64 + 16 })(s);
 							selectedTmdbEpisode = episode;
-							if (options.didNavigate) handleFocusEpisode(episode);
+							if (options.setFocusedElement) focusSeasonOf(episode);
 						}}
+						focusOnClick
 					>
 						<EpisodeCard {episode} />
 					</Container>
diff --git a/src/lib/components/SeriesPage/SeriesPage.svelte b/src/lib/components/SeriesPage/SeriesPage.svelte
index 71dbfe3..0686709 100644
--- a/src/lib/components/SeriesPage/SeriesPage.svelte
+++ b/src/lib/components/SeriesPage/SeriesPage.svelte
@@ -49,7 +49,7 @@
 	let episodesSelectable: Selectable;
 
 	let scrollTop: number;
-	$: showEpisodeInfo = scrollTop > 200;
+	$: showEpisodeInfo = scrollTop > 140;
 </script>
 
 <DetachedPage>
@@ -58,11 +58,7 @@
 		class="h-screen flex flex-col py-12 px-20 relative"
 		handleFocus={scrollIntoView({ top: 0 })}
 		handleNavigateOut={{
-			down: () => {
-				console.log('Here', episodesSelectable);
-				episodesSelectable?.focusChildren(1);
-				return true;
-			}
+			down: () => episodesSelectable?.focusChildren(1)
 		}}
 	>
 		<HeroCarousel
@@ -194,6 +190,11 @@
 		</HeroCarousel>
 	</Container>
 	<Container handleFocus={scrollIntoView({ vertical: 64 })} bind:container={episodesSelectable}>
-		<EpisodeCarousel id={Number(id)} tmdbSeries={tmdbSeriesData} bind:selectedTmdbEpisode />
+		<EpisodeCarousel
+			id={Number(id)}
+			tmdbSeries={tmdbSeriesData}
+			{nextJellyfinEpisode}
+			bind:selectedTmdbEpisode
+		/>
 	</Container>
 </DetachedPage>
diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts
index 54c3cdf..0ffc4d1 100644
--- a/src/lib/selectable.ts
+++ b/src/lib/selectable.ts
@@ -13,14 +13,14 @@ export type NavigationActions = {
 };
 
 type FocusHandlerOptions = {
-	didNavigate: boolean;
+	setFocusedElement: boolean;
 	propagate: boolean;
 	stopPropagation: () => void;
 };
 
 const createFocusHandlerOptions = (): FocusHandlerOptions => {
 	const options: Partial<FocusHandlerOptions> = {
-		didNavigate: true,
+		setFocusedElement: true,
 		propagate: true
 	};
 
@@ -94,7 +94,7 @@ export class Selectable {
 		return this;
 	}
 
-	focus(didNavigate = true) {
+	focus(options: Partial<FocusHandlerOptions> = {}) {
 		function propagateFocusUpdates(
 			options: FocusHandlerOptions,
 			parent: Selectable,
@@ -115,12 +115,12 @@ export class Selectable {
 			const focusIndex = get(this.focusIndex);
 
 			if (this.children[focusIndex]?.isFocusable()) {
-				this.children[focusIndex]?.focus(didNavigate);
+				this.children[focusIndex]?.focus(options);
 			} else {
 				let i = focusIndex;
 				while (i < this.children.length) {
 					if (this.children[i]?.isFocusable()) {
-						this.children[i]?.focus(didNavigate);
+						this.children[i]?.focus(options);
 						// this.onFocus?.(this);
 						return;
 					}
@@ -129,7 +129,7 @@ export class Selectable {
 				i = focusIndex - 1;
 				while (i >= 0) {
 					if (this.children[i]?.isFocusable()) {
-						this.children[i]?.focus(didNavigate);
+						this.children[i]?.focus(options);
 						// this.onFocus?.(this);
 						return;
 					}
@@ -137,21 +137,23 @@ export class Selectable {
 				}
 			}
 		} else if (this.htmlElement) {
-			const options = createFocusHandlerOptions();
-			options.didNavigate = didNavigate;
-			propagateFocusUpdates(options, this);
+			const _options: FocusHandlerOptions = {
+				...createFocusHandlerOptions(),
+				...options
+			};
+			propagateFocusUpdates(_options, this);
 
-			if (didNavigate) {
+			if (_options.setFocusedElement) {
 				this.htmlElement.focus({ preventScroll: true });
 				Selectable.focusedObject.set(this);
 			}
 		}
 	}
 
-	focusChildren(index: number, didNavigate = true): boolean {
+	focusChildren(index: number, options?: Partial<FocusHandlerOptions>): boolean {
 		const child = this.children[index];
 		if (child && child.isFocusable()) {
-			child.focus(didNavigate);
+			child.focus(options);
 			return true;
 		}