diff --git a/src/lib/apis/jellyfin/jellyfinApi.ts b/src/lib/apis/jellyfin/jellyfinApi.ts
index 31ec068..e3dd571 100644
--- a/src/lib/apis/jellyfin/jellyfinApi.ts
+++ b/src/lib/apis/jellyfin/jellyfinApi.ts
@@ -59,7 +59,7 @@ export const getJellyfinItems = () =>
 // 		}
 // 	}).then((r) => r.data?.Items || []);
 
-export const getJellyfinEpisodes = (seriesId: string) =>
+export const getJellyfinEpisodes = () =>
 	JellyfinApi.get('/Users/{userId}/Items', {
 		params: {
 			path: {
@@ -73,7 +73,10 @@ export const getJellyfinEpisodes = (seriesId: string) =>
 		headers: {
 			'cache-control': 'max-age=10'
 		}
-	}).then((r) => r.data?.Items?.filter((i) => i.SeriesId === seriesId) || []);
+	}).then((r) => r.data?.Items || []);
+
+export const getJellyfinEpisodesBySeries = (seriesId: string) =>
+	getJellyfinEpisodes().then((items) => items.filter((i) => i.SeriesId === seriesId) || []);
 
 export const getJellyfinItemByTmdbId = (tmdbId: string) =>
 	getJellyfinItems().then((items) => items.find((i) => i.ProviderIds?.Tmdb == tmdbId));
diff --git a/src/lib/apis/tmdb/tmdbApi.ts b/src/lib/apis/tmdb/tmdbApi.ts
index 0b8c216..d4ad83e 100644
--- a/src/lib/apis/tmdb/tmdbApi.ts
+++ b/src/lib/apis/tmdb/tmdbApi.ts
@@ -20,6 +20,7 @@ export interface TmdbMovieFull2 extends TmdbMovie2 {
 	videos: operations['movie-videos']['responses']['200']['content']['application/json'];
 	credits: operations['movie-credits']['responses']['200']['content']['application/json'];
 	external_ids: operations['movie-external-ids']['responses']['200']['content']['application/json'];
+	images: operations['movie-images']['responses']['200']['content']['application/json'];
 }
 
 export interface TmdbSeriesFull2 extends TmdbSeries2 {
@@ -43,7 +44,8 @@ export const getTmdbMovie = async (tmdbId: number) =>
 				movie_id: tmdbId
 			},
 			query: {
-				append_to_response: 'videos,credits,external_ids'
+				append_to_response: 'videos,credits,external_ids,images',
+				...({ include_image_language: get(settings).language + ',en,null' } as any)
 			}
 		}
 	}).then((res) => res.data as TmdbMovieFull2 | undefined);
diff --git a/src/lib/components/EpisodeCard/EpisodeCard.svelte b/src/lib/components/EpisodeCard/EpisodeCard.svelte
index cc78d6d..f846786 100644
--- a/src/lib/components/EpisodeCard/EpisodeCard.svelte
+++ b/src/lib/components/EpisodeCard/EpisodeCard.svelte
@@ -6,11 +6,13 @@
 	import { fade } from 'svelte/transition';
 
 	export let backdropPath: string;
-	export let title: string;
-	export let subtitle: string;
+
+	export let title = '';
+	export let subtitle = '';
 	export let episodeNumber: string | undefined = undefined;
-	export let runtime: number;
+	export let runtime = 0;
 	export let progress = 0;
+
 	export let handlePlay: (() => void) | undefined = undefined;
 
 	export let size: 'md' | 'dynamic' = 'md';
@@ -31,36 +33,49 @@
 	transition:fade|global
 >
 	<div
-		class="opacity-100 group-hover:opacity-0 flex flex-col justify-between p-2 lg:p-3 lg:px-3 bg-darken h-full transition-opacity"
+		class={classNames(
+			'flex flex-col justify-between h-full group-hover:opacity-0 transition-opacity',
+			{
+				'px-2 lg:px-3 pt-2': true,
+				' pb-4 lg:pb-6': progress,
+				'pb-2': !progress,
+				'bg-gradient-to-t from-darken': !!handlePlay,
+				'bg-darken': !handlePlay
+			}
+		)}
 	>
-		<div
-			class={classNames(
-				'flex justify-between items-center text-xs lg:text-sm font-medium text-zinc-300',
-				{
-					'opacity-60': !handlePlay
-				}
-			)}
-		>
+		<div class="flex justify-between items-center">
 			<div>
-				<slot name="left-info">
-					{episodeNumber}
+				<slot name="left-top">
+					{#if episodeNumber}
+						<p class="text-xs lg:text-sm font-medium text-zinc-300">{episodeNumber}</p>
+					{/if}
 				</slot>
 			</div>
 			<div>
-				<slot name="right-info">
-					{runtime} min
+				<slot name="right-top">
+					{#if runtime}
+						<p class="text-xs lg:text-sm font-medium text-zinc-300">
+							{runtime} min
+						</p>
+					{/if}
 				</slot>
 			</div>
 		</div>
-		<div
-			class={classNames({
-				'opacity-60': !handlePlay
-			})}
-		>
-			<div class="text-xs lg:text-sm text-zinc-300 font-medium tracking-wide">{subtitle}</div>
-			<div class="font-semibold lg:text-lg">
-				{title}
-			</div>
+		<div class="flex items-bottom justify-between">
+			<slot name="left-bottom">
+				<div class="flex flex-col">
+					{#if subtitle}
+						<div class="text-zinc-300 text-sm font-medium">{subtitle}</div>
+					{/if}
+					{#if title}
+						<div class="font-medium">
+							{title}
+						</div>
+					{/if}
+				</div>
+			</slot>
+			<slot name="right-bottom" />
 		</div>
 	</div>
 	<div class="absolute inset-0 flex items-center justify-center">
@@ -72,5 +87,11 @@
 			</IconButton>
 		</div>
 	</div>
-	<div style={'width: ' + progress + '%'} class="h-[2px] bg-zinc-200 bottom-0 absolute z-[1]" />
+	{#if progress}
+		<div
+			class="absolute h-1 bg-zinc-300 bg-opacity-50 bottom-2 lg:bottom-3 inset-x-2 lg:inset-x-3 rounded-full overflow-hidden group-hover:opacity-0 transition-opacity"
+		>
+			<div style={'width: ' + progress + '%'} class="h-full bg-zinc-200" />
+		</div>
+	{/if}
 </div>
diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
index 88b62a0..34d90fb 100644
--- a/src/lib/components/IconButton.svelte
+++ b/src/lib/components/IconButton.svelte
@@ -4,7 +4,7 @@
 	export let disabled = false;
 </script>
 
-<div
+<button
 	class={classNames('text-zinc-300 hover:text-zinc-50 p-1 flex items-center justify-center', {
 		'opacity-30 cursor-not-allowed pointer-events-none': disabled,
 		'cursor-pointer': !disabled
@@ -12,4 +12,4 @@
 	on:click|stopPropagation
 >
 	<slot />
-</div>
+</button>
diff --git a/src/lib/components/ResourceDetails/LibraryDetails.svelte b/src/lib/components/ResourceDetails/LibraryDetails.svelte
index 5ff1c3a..68a81b3 100644
--- a/src/lib/components/ResourceDetails/LibraryDetails.svelte
+++ b/src/lib/components/ResourceDetails/LibraryDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getJellyfinEpisodes } from '$lib/apis/jellyfin/jellyfinApi';
+	import { getJellyfinEpisodesBySeries } from '$lib/apis/jellyfin/jellyfinApi';
 	import {
 		addMovieToRadarr,
 		cancelDownloadRadarrMovie,
@@ -50,7 +50,7 @@
 			: undefined;
 		const jellyfinEpisodesPromise =
 			item.jellyfinItem?.Id && item.sonarrSeries?.id
-				? getJellyfinEpisodes(item.jellyfinItem?.Id)
+				? getJellyfinEpisodesBySeries(item.jellyfinItem?.Id)
 				: undefined;
 
 		const sonarrEpisodes = await sonarrEpisodesPromise;
diff --git a/src/lib/components/ResourceDetails/SeasonsDetails.svelte b/src/lib/components/ResourceDetails/SeasonsDetails.svelte
index 0bf783e..339df7e 100644
--- a/src/lib/components/ResourceDetails/SeasonsDetails.svelte
+++ b/src/lib/components/ResourceDetails/SeasonsDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getJellyfinEpisodes } from '$lib/apis/jellyfin/jellyfinApi';
+	import { getJellyfinEpisodesBySeries } from '$lib/apis/jellyfin/jellyfinApi';
 	import { getTmdbSeriesSeasons } from '$lib/apis/tmdb/tmdbApi';
 	import classNames from 'classnames';
 	import { Check, StarFilled } from 'radix-icons-svelte';
@@ -20,7 +20,9 @@
 
 	async function fetchSeriesData() {
 		const tmdbSeasonsPromise = getTmdbSeriesSeasons(tmdbId, totalSeasons);
-		const jellyfinEpisodesPromise = jellyfinId ? getJellyfinEpisodes(jellyfinId) : undefined;
+		const jellyfinEpisodesPromise = jellyfinId
+			? getJellyfinEpisodesBySeries(jellyfinId)
+			: undefined;
 
 		const tmdbSeasons = await tmdbSeasonsPromise;
 		const jellyfinEpisodes = await jellyfinEpisodesPromise;
diff --git a/src/lib/stores/library.store.ts b/src/lib/stores/library.store.ts
index 8d0d95e..c090a5b 100644
--- a/src/lib/stores/library.store.ts
+++ b/src/lib/stores/library.store.ts
@@ -1,5 +1,7 @@
 import {
 	getJellyfinContinueWatching,
+	getJellyfinEpisodes,
+	getJellyfinEpisodesBySeries,
 	getJellyfinItems,
 	type JellyfinItem
 } from '$lib/apis/jellyfin/jellyfinApi';
@@ -16,15 +18,16 @@ import {
 	type SonarrSeries
 } from '$lib/apis/sonarr/sonarrApi';
 import {
+	getTmdbMovie,
 	getTmdbMovieBackdrop,
+	getTmdbSeries,
 	getTmdbSeriesBackdrop,
 	getTmdbSeriesFromTvdbId
 } from '$lib/apis/tmdb/tmdbApi';
 import { get, writable } from 'svelte/store';
+import { settings } from './settings.store';
 
 export interface PlayableItem {
-	type: 'movie' | 'series';
-	tmdbId: number;
 	tmdbRating: number;
 	cardBackdropUrl: string;
 	download?: {
@@ -37,7 +40,11 @@ export interface PlayableItem {
 	};
 	isPlayed: boolean;
 	jellyfinId?: string;
+
+	type: 'movie' | 'series';
+	tmdbId: number;
 	jellyfinItem?: JellyfinItem;
+	jellyfinEpisodes?: JellyfinItem[];
 	radarrMovie?: RadarrMovie;
 	radarrDownloads?: RadarrDownload[];
 	sonarrSeries?: SonarrSeries;
@@ -59,6 +66,7 @@ async function getLibrary(): Promise<Library> {
 
 	const continueWatchingPromise = getJellyfinContinueWatching();
 	const jellyfinLibraryItemsPromise = getJellyfinItems();
+	const jellyfinEpisodesPromise = getJellyfinEpisodes();
 
 	const radarrMovies = await radarrMoviesPromise;
 	const radarrDownloads = await radarrDownloadsPromise;
@@ -68,6 +76,9 @@ async function getLibrary(): Promise<Library> {
 
 	const jellyfinContinueWatching = await continueWatchingPromise;
 	const jellyfinLibraryItems = await jellyfinLibraryItemsPromise;
+	const jellyfinEpisodes = await jellyfinEpisodesPromise.then((episodes) =>
+		episodes?.sort((a, b) => (a.IndexNumber || 99) - (b.IndexNumber || 99))
+	);
 
 	const items: Record<string, PlayableItem> = {};
 
@@ -101,7 +112,15 @@ async function getLibrary(): Promise<Library> {
 				? { length, progress: watchingProgress }
 				: undefined;
 
-		const backdropUrl = await getTmdbMovieBackdrop(radarrMovie.tmdbId || 0);
+		const backdropUrl = await getTmdbMovie(radarrMovie.tmdbId || 0).then(
+			(r) =>
+				(
+					r?.images?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
+					r?.images?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
+					r?.images?.backdrops?.find((b) => b.iso_639_1) ||
+					r?.images?.backdrops?.[0]
+				)?.file_path
+		);
 
 		return {
 			type: 'movie' as const,
@@ -153,7 +172,15 @@ async function getLibrary(): Promise<Library> {
 			: undefined;
 		const tmdbId = tmdbItem?.id || undefined;
 
-		const backdropUrl = tmdbId ? await getTmdbSeriesBackdrop(tmdbId) : undefined;
+		const backdropUrl = await getTmdbSeries(tmdbId || 0).then(
+			(r) =>
+				(
+					r?.images?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
+					r?.images?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
+					r?.images?.backdrops?.find((b) => b.iso_639_1) ||
+					r?.images?.backdrops?.[0]
+				)?.file_path
+		);
 
 		return {
 			type: 'series' as const,
@@ -166,7 +193,8 @@ async function getLibrary(): Promise<Library> {
 			jellyfinId: jellyfinItem?.Id,
 			jellyfinItem,
 			sonarrSeries,
-			sonarrDownloads: itemSonarrDownloads
+			sonarrDownloads: itemSonarrDownloads,
+			jellyfinEpisodes: jellyfinEpisodes.filter((i) => i.SeriesId === jellyfinItem?.Id)
 		};
 	});
 
@@ -200,3 +228,29 @@ function createLibraryStore() {
 }
 
 export const library = createLibraryStore();
+
+function _createLibraryItemStore(tmdbId: number) {
+	const store = writable<{ loading: boolean; item?: PlayableItem }>({
+		loading: true,
+		item: undefined
+	});
+
+	library.subscribe(async (library) => {
+		const item = (await library).items[tmdbId];
+		store.set({ loading: false, item });
+	});
+
+	return {
+		subscribe: store.subscribe
+	};
+}
+
+const itemStores: Record<string, ReturnType<typeof _createLibraryItemStore>> = {};
+
+export function createLibraryItemStore(tmdbId: number) {
+	if (!itemStores[tmdbId]) {
+		itemStores[tmdbId] = _createLibraryItemStore(tmdbId);
+	}
+
+	return itemStores[tmdbId];
+}
diff --git a/src/routes/series/[id]/+page.svelte b/src/routes/series/[id]/+page.svelte
index 6954ad1..9747b2c 100644
--- a/src/routes/series/[id]/+page.svelte
+++ b/src/routes/series/[id]/+page.svelte
@@ -5,14 +5,19 @@
 	import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
 	import EpisodeCard from '$lib/components/EpisodeCard/EpisodeCard.svelte';
 	import { TMDB_IMAGES_ORIGINAL, TMDB_POSTER_SMALL } from '$lib/constants';
-	import { library } from '$lib/stores/library.store';
+	import { createLibraryItemStore, library } from '$lib/stores/library.store';
 	import classNames from 'classnames';
 	import { ChevronRight, DotFilled } from 'radix-icons-svelte';
 	import type { ComponentProps } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import type { PageData } from './$types';
+	import { playerState } from '$lib/components/VideoPlayer/VideoPlayer';
+	import { capitalize } from '$lib/utils';
 
 	export let data: PageData;
+	let tmdbId = Number(data.tmdbId);
+
+	const itemStore = createLibraryItemStore(tmdbId);
 
 	let visibleSeason = 1;
 
@@ -30,26 +35,31 @@
 		};
 	})();
 
-	tmdbSeriesPromise.seasons.then((seasons) => {
-		seasons.forEach((season) => {
+	itemStore.subscribe(async (libraryItem) => {
+		const tmdbSeasons = await tmdbSeriesPromise.seasons;
+
+		tmdbSeasons.forEach((season) => {
 			const episodes: ComponentProps<EpisodeCard>[] = [];
-			season?.episodes?.forEach((episode) => {
+			season?.episodes?.forEach((tmdbEpisode) => {
+				const jellyfinEpisode = libraryItem.item?.jellyfinEpisodes?.find(
+					(e) =>
+						e?.IndexNumber === tmdbEpisode?.episode_number &&
+						e?.ParentIndexNumber === tmdbEpisode?.season_number
+				);
+
 				episodes.push({
-					title: episode?.name || '',
-					backdropPath: episode?.still_path || '',
-					subtitle: `S${episode?.season_number}E${episode?.episode_number}`,
-					runtime: episode?.runtime || 0
+					title: tmdbEpisode?.name || '',
+					subtitle: `Episode ${tmdbEpisode?.episode_number}`,
+					backdropPath: tmdbEpisode?.still_path || '',
+					progress: jellyfinEpisode?.UserData?.PlayedPercentage || 0,
+					handlePlay: jellyfinEpisode?.Id
+						? () => playerState.streamJellyfinId(jellyfinEpisode?.Id || '')
+						: undefined
 				});
 			});
 			episodeProps[season?.season_number || 0] = episodes;
 		});
 	});
-
-	async function updateEpisodeProps(tmdbSeasons: TmdbSeason[]) {
-		const libraryItem = await $library.then((l) => l.items[Number(data.tmdbId)]);
-	}
-
-	tmdbSeriesPromise.seasons.then((seasons) => updateEpisodeProps(seasons));
 </script>
 
 <div class="fixed inset-0 bg-black -z-20" />
@@ -69,8 +79,10 @@
 				/>
 				<div class="flex-1 flex gap-4 justify-between flex-col lg:flex-row lg:items-end">
 					<div>
-						<div class="text-zinc-300 text-sm uppercase font-medium flex items-center gap-1">
-							<p class="">2014</p>
+						<div class="text-zinc-300 text-sm uppercase font-semibold flex items-center gap-1">
+							<p>{new Date(series?.first_air_date || Date.now()).getFullYear()}</p>
+							<DotFilled />
+							<p>{series?.status}</p>
 							<DotFilled />
 							<p>{series?.genres?.map((g) => g.name).join(', ')}</p>
 							<DotFilled />
@@ -87,10 +99,11 @@
 		<div>
 			<Carousel gradientFromColor="from-black">
 				<div slot="title" class="flex gap-6">
-					{#each series?.seasons || [] as season, i}
+					{#each [...Array(series?.number_of_seasons || 0).keys()].map((i) => i + 1) as seasonNumber}
+						{@const season = series?.seasons?.find((s) => s.season_number === seasonNumber)}
 						{@const isSelected = season?.season_number === visibleSeason}
 						<button
-							class={classNames('text-lg font-medium', {
+							class={classNames('text-lg font-semibold tracking-wide', {
 								'text-zinc-200 cursor-default': isSelected,
 								'text-zinc-500 hover:text-zinc-200 cursor-pointer': !isSelected
 							})}
@@ -101,7 +114,17 @@
 					{/each}
 				</div>
 				{#each episodeProps[visibleSeason] || [] as props}
-					<EpisodeCard {...props} />
+					<div class="flex flex-col gap-3">
+						<EpisodeCard {...props} />
+						<!-- <EpisodeCard backdropPath={props.backdropPath} />
+						<div class="flex items-end justify-between">
+							<div>
+								<div class="text-zinc-400 text-xs font-medium">{props.episodeNumber}</div>
+								<h1 class="font-medium text-lg line-clamp-1">{props.title}</h1>
+							</div>
+							<div class="flex-shrink-0 text-zinc-300 font-medium">{props.runtime} min</div>
+						</div> -->
+					</div>
 				{:else}
 					<CarouselPlaceholderItems />
 				{/each}
@@ -109,18 +132,67 @@
 		</div>
 	</div>
 
-	<div class="flex gap-4 p-8 flex-col md:flex-row">
+	<div class="flex gap-8 p-8 flex-col xl:flex-row">
 		<div class="flex-1">
 			<div class="flex flex-col gap-3 max-w-5xl">
 				<h1 class="font-semibold text-2xl">{series?.tagline || series?.name}</h1>
 				<p class="pl-4 border-l-2">{series?.overview}</p>
 			</div>
 		</div>
-		<div class="flex-1 grid grid-cols-3">
+		<div class="flex-1 grid grid-cols-3 gap-4">
 			<div>
-				<p class="text-zinc-400 text-sm">Directed By</p>
+				<p class="text-zinc-400 text-sm">Created By</p>
 				<h2 class="font-medium">{series?.created_by?.map((c) => c.name).join(', ')}</h2>
 			</div>
+			{#if series?.first_air_date}
+				<div>
+					<p class="text-zinc-400 text-sm">First Air Date</p>
+					<h2 class="font-medium">
+						{new Date(series?.first_air_date).toLocaleDateString('en', {
+							year: 'numeric',
+							month: 'short',
+							day: 'numeric'
+						})}
+					</h2>
+				</div>
+			{/if}
+			{#if series?.next_episode_to_air}
+				<div>
+					<p class="text-zinc-400 text-sm">Next Air Date</p>
+					<h2 class="font-medium">
+						{new Date(series.next_episode_to_air?.air_date).toLocaleDateString('en', {
+							year: 'numeric',
+							month: 'short',
+							day: 'numeric'
+						})}
+					</h2>
+				</div>
+			{:else if series?.last_air_date}
+				<div>
+					<p class="text-zinc-400 text-sm">Last Air Date</p>
+					<h2 class="font-medium">
+						{new Date(series.last_air_date).toLocaleDateString('en', {
+							year: 'numeric',
+							month: 'short',
+							day: 'numeric'
+						})}
+					</h2>
+				</div>
+			{/if}
+			<div>
+				<p class="text-zinc-400 text-sm">Networks</p>
+				<h2 class="font-medium">{series?.networks?.map((n) => n.name).join(', ')}</h2>
+			</div>
+			<div>
+				<p class="text-zinc-400 text-sm">Episode Run Time</p>
+				<h2 class="font-medium">{series?.episode_run_time} Minutes</h2>
+			</div>
+			<div>
+				<p class="text-zinc-400 text-sm">Spoken Languages</p>
+				<h2 class="font-medium">
+					{series?.spoken_languages?.map((l) => capitalize(l.name || '')).join(', ')}
+				</h2>
+			</div>
 		</div>
 	</div>
 	<div class="flex items-center justify-between p-8">