diff --git a/src/app.css b/src/app.css
index 7ef7fc9..6ef239f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -7,8 +7,7 @@ a {
 }
 
 .placeholder {
-	@apply bg-[#ffffff11];
-	@apply animate-pulse;
+	@apply bg-zinc-700 bg-opacity-40 animate-pulse;
 }
 
 .selectable {
diff --git a/src/lib/apis/tmdb/tmdbApi.ts b/src/lib/apis/tmdb/tmdbApi.ts
index 89d8502..0b8c216 100644
--- a/src/lib/apis/tmdb/tmdbApi.ts
+++ b/src/lib/apis/tmdb/tmdbApi.ts
@@ -6,6 +6,9 @@ import createClient from 'openapi-fetch';
 import { get } from 'svelte/store';
 import type { operations, paths } from './tmdb.generated';
 
+const CACHE_ONE_DAY = 'max-age=86400';
+const CACHE_FOUR_DAYS = 'max-age=345600';
+
 export type TmdbMovie2 =
 	operations['movie-details']['responses']['200']['content']['application/json'];
 export type TmdbSeries2 =
@@ -23,6 +26,7 @@ export interface TmdbSeriesFull2 extends TmdbSeries2 {
 	videos: operations['tv-series-videos']['responses']['200']['content']['application/json'];
 	credits: operations['tv-series-credits']['responses']['200']['content']['application/json'];
 	external_ids: operations['tv-series-external-ids']['responses']['200']['content']['application/json'];
+	images: operations['tv-series-images']['responses']['200']['content']['application/json'];
 }
 
 export const TmdbApiOpen = createClient<paths>({
@@ -55,7 +59,7 @@ export const getTmdbSeriesFromTvdbId = async (tvdbId: number) =>
 			}
 		},
 		headers: {
-			'Cache-Control': 'max-age=86400'
+			'Cache-Control': CACHE_ONE_DAY
 		}
 	}).then((res) => res.data?.tv_results?.[0] as TmdbSeries2 | undefined);
 
@@ -69,8 +73,12 @@ export const getTmdbSeries = async (tmdbId: number): Promise<TmdbSeriesFull2 | u
 				series_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)
 			}
+		},
+		headers: {
+			'Cache-Control': CACHE_ONE_DAY
 		}
 	}).then((res) => res.data as TmdbSeriesFull2 | undefined);
 
@@ -100,7 +108,7 @@ export const getTmdbSeriesImages = async (tmdbId: number) =>
 			}
 		},
 		headers: {
-			'Cache-Control': 'max-age=345600' // 4 days
+			'Cache-Control': CACHE_FOUR_DAYS // 4 days
 		}
 	}).then((res) => res.data);
 
@@ -123,7 +131,7 @@ export const getTmdbMovieImages = async (tmdbId: number) =>
 			}
 		},
 		headers: {
-			'Cache-Control': 'max-age=345600' // 4 days
+			'Cache-Control': CACHE_FOUR_DAYS // 4 days
 		}
 	}).then((res) => res.data);
 
@@ -241,7 +249,7 @@ export const fetchTmdbMovieVideos = async (tmdbId: string): Promise<Video[]> =>
 export const fetchTmdbMovieImages = async (tmdbId: string): Promise<ImagesResponse> =>
 	await TmdbApi.get<ImagesResponse>('/movie/' + tmdbId + '/images', {
 		headers: {
-			'Cache-Control': 'max-age=345600' // 4 days
+			'Cache-Control': CACHE_FOUR_DAYS // 4 days
 		}
 	}).then((res) => res.data);
 
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 5af6391..8f98b02 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -9,7 +9,7 @@
 	export let disabled = false;
 
 	export let href: string | undefined = undefined;
-	export let target: string | undefined = undefined;
+	export let target: string | undefined = '_self';
 
 	let buttonStyle: string;
 	// $: buttonStyle = classNames(
@@ -44,8 +44,7 @@
 
 	const handleClick = (event: MouseEvent) => {
 		if (href) {
-			if (target === '_blank') window.open(href, target)?.focus();
-			else window.open(href, target as string);
+			window.open(href, target)?.focus();
 		} else {
 			dispatch('click', event);
 		}
diff --git a/src/lib/components/Card/CardPlaceholder.svelte b/src/lib/components/Card/CardPlaceholder.svelte
index 8ce49bc..d39fdc0 100644
--- a/src/lib/components/Card/CardPlaceholder.svelte
+++ b/src/lib/components/Card/CardPlaceholder.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
 	import classNames from 'classnames';
+	import { fade } from 'svelte/transition';
 
 	export let index = 0;
 	export let size: 'dynamic' | 'md' | 'lg' = 'md';
 </script>
 
 <div
-	class={classNames('rounded overflow-hidden shadow-2xl placeholder shrink-0 aspect-video', {
+	class={classNames('rounded overflow-hidden shadow-lg placeholder shrink-0 aspect-video', {
 		'h-40': size === 'md',
 		'h-60': size === 'lg',
 		'w-full': size === 'dynamic'
 	})}
 	style={'animation-delay: ' + ((index * 100) % 2000) + 'ms;'}
+	transition:fade|global
 />
diff --git a/src/lib/components/Carousel/CarouselPlaceholderItems.svelte b/src/lib/components/Carousel/CarouselPlaceholderItems.svelte
index cd24876..1dcb72c 100644
--- a/src/lib/components/Carousel/CarouselPlaceholderItems.svelte
+++ b/src/lib/components/Carousel/CarouselPlaceholderItems.svelte
@@ -4,5 +4,5 @@
 </script>
 
 {#each Array(10) as _, i (i)}
-	<CardPlaceholder {size} />
+	<CardPlaceholder {size} index={i} />
 {/each}
diff --git a/src/lib/components/EpisodeCard/EpisodeCard.svelte b/src/lib/components/EpisodeCard/EpisodeCard.svelte
index ba1ba6c..cc78d6d 100644
--- a/src/lib/components/EpisodeCard/EpisodeCard.svelte
+++ b/src/lib/components/EpisodeCard/EpisodeCard.svelte
@@ -3,6 +3,7 @@
 	import classNames from 'classnames';
 	import { TriangleRight } from 'radix-icons-svelte';
 	import IconButton from '../IconButton.svelte';
+	import { fade } from 'svelte/transition';
 
 	export let backdropPath: string;
 	export let title: string;
@@ -18,7 +19,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
 	class={classNames(
-		'aspect-video bg-center bg-cover bg-no-repeat rounded-lg overflow-hidden transition-all shadow-lg relative cursor-pointer selectable',
+		'aspect-video bg-center bg-cover bg-no-repeat rounded-lg overflow-hidden transition-all shadow-lg relative cursor-pointer selectable flex-shrink-0',
 		{
 			'h-40': size === 'md',
 			'h-full': size === 'dynamic',
@@ -27,6 +28,7 @@
 	)}
 	tabindex="0"
 	style={"background-image: url('" + TMDB_BACKDROP_SMALL + backdropPath + "');"}
+	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"
diff --git a/src/lib/components/ResourceDetails/ResourceDetails.svelte b/src/lib/components/ResourceDetails/ResourceDetails.svelte
index 795092a..3f0dd52 100644
--- a/src/lib/components/ResourceDetails/ResourceDetails.svelte
+++ b/src/lib/components/ResourceDetails/ResourceDetails.svelte
@@ -283,14 +283,7 @@
 								</Button>
 							</div> -->
 						<div style={opacityStyle} class:hidden={showDetails}>
-							<Button
-								size="lg"
-								type="secondary"
-								on:click={() => {
-									detailsVisible = true;
-									localDetails?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-								}}
-							>
+							<Button href={`/${type}/${tmdbId}`}>
 								<span>Details</span>
 								<ChevronRight size={20} />
 							</Button>
diff --git a/src/lib/stores/library.store.ts b/src/lib/stores/library.store.ts
index 4b5fcca..8d0d95e 100644
--- a/src/lib/stores/library.store.ts
+++ b/src/lib/stores/library.store.ts
@@ -16,11 +16,9 @@ import {
 	type SonarrSeries
 } from '$lib/apis/sonarr/sonarrApi';
 import {
-	fetchTmdbMovieImages,
 	getTmdbMovieBackdrop,
 	getTmdbSeriesBackdrop,
-	getTmdbSeriesFromTvdbId,
-	getTmdbSeriesImages
+	getTmdbSeriesFromTvdbId
 } from '$lib/apis/tmdb/tmdbApi';
 import { get, writable } from 'svelte/store';
 
@@ -159,7 +157,7 @@ async function getLibrary(): Promise<Library> {
 
 		return {
 			type: 'series' as const,
-			tmdbId,
+			tmdbId: tmdbId || 0,
 			tmdbRating: tmdbItem?.vote_average || 0,
 			cardBackdropUrl: backdropUrl || '',
 			download,
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 4a21992..363a9ab 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -75,7 +75,7 @@ export const getFadeIndex = () => {
 	return obj;
 };
 
-export function log(arg: any) {
+export function log<T>(arg: T): T {
 	console.log('LOGGER', arg);
 	return arg;
 }
diff --git a/src/routes/series/[id]/+page.svelte b/src/routes/series/[id]/+page.svelte
index e8578c3..6954ad1 100644
--- a/src/routes/series/[id]/+page.svelte
+++ b/src/routes/series/[id]/+page.svelte
@@ -1,40 +1,145 @@
 <script lang="ts">
-	import ResourceDetails from '$lib/components/ResourceDetails/ResourceDetails.svelte';
+	import { getTmdbSeries, getTmdbSeriesSeasons, type TmdbSeason } from '$lib/apis/tmdb/tmdbApi';
+	import Button from '$lib/components/Button.svelte';
+	import Carousel from '$lib/components/Carousel/Carousel.svelte';
+	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 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';
+
 	export let data: PageData;
+
+	let visibleSeason = 1;
+
+	let selectedEpisode;
+	let episodeProps: ComponentProps<EpisodeCard>[][] = [];
+
+	let tmdbSeriesPromise = (() => {
+		const tmdbId = Number(data.tmdbId);
+		const series = getTmdbSeries(tmdbId);
+		const seasons = series.then((s) => getTmdbSeriesSeasons(tmdbId, s?.number_of_seasons || 0));
+
+		return {
+			series,
+			seasons
+		};
+	})();
+
+	tmdbSeriesPromise.seasons.then((seasons) => {
+		seasons.forEach((season) => {
+			const episodes: ComponentProps<EpisodeCard>[] = [];
+			season?.episodes?.forEach((episode) => {
+				episodes.push({
+					title: episode?.name || '',
+					backdropPath: episode?.still_path || '',
+					subtitle: `S${episode?.season_number}E${episode?.episode_number}`,
+					runtime: episode?.runtime || 0
+				});
+			});
+			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>
 
-{#if data.series}
-	{@const series = data.series}
-	{@const lastEpisode = series.last_episode_to_air}
-	<ResourceDetails
-		tmdbId={series.id || 0}
-		type="tv"
-		title={series.name || ''}
-		releaseDate={new Date(series.first_air_date || Date.now())}
-		endDate={series.last_air_date && !series.in_production
-			? new Date(series.last_air_date)
-			: undefined}
-		seasons={series.number_of_seasons || 0}
-		tagline={series.tagline || ''}
-		overview={series.overview || ''}
-		backdropPath={series.backdrop_path || ''}
-		genres={series.genres?.map((g) => g.name || '') || []}
-		runtime={series.episode_run_time?.[0] || 0}
-		tmdbRating={series.vote_average || 0}
-		starring={series.credits?.cast || []}
-		videos={series.videos?.results || []}
-		showDetails={true}
-		lastEpisode={lastEpisode?.still_path && lastEpisode?.name
-			? {
-					backdropPath: lastEpisode.still_path,
-					title: lastEpisode.name,
-					subtitle: 'Latest Episode',
-					runtime: lastEpisode.runtime || 0,
-					episodeNumber:
-						(lastEpisode.season_number ? `S${lastEpisode.season_number}` : '') +
-						(lastEpisode.episode_number ? `E${lastEpisode.episode_number}` : '')
-			  }
-			: undefined}
-	/>
-{/if}
+<div class="fixed inset-0 bg-black -z-20" />
+
+{#await tmdbSeriesPromise.series then series}
+	<div class="flex flex-col max-h-screen bg-black">
+		<div
+			transition:fade
+			style={"background-image: url('" + TMDB_IMAGES_ORIGINAL + series?.backdrop_path + "')"}
+			class="flex-shrink relative flex pt-24 aspect-video min-h-[50vh] p-8 bg-center bg-cover w-screen"
+		>
+			<div class="absolute inset-0 bg-gradient-to-t from-black to-50% to-darken" />
+			<div class="z-[1] flex-1 flex justify-end gap-8 items-end">
+				<div
+					class="aspect-[2/3] w-52 bg-center bg-cover rounded-md hidden sm:block"
+					style={"background-image: url('" + TMDB_POSTER_SMALL + series?.poster_path + "')"}
+				/>
+				<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>
+							<DotFilled />
+							<p>{series?.genres?.map((g) => g.name).join(', ')}</p>
+							<DotFilled />
+							<p>{series?.vote_average?.toFixed(1)} TMDB</p>
+						</div>
+						<h1 class="text-6xl font-semibold">{series?.name}</h1>
+					</div>
+					<div class="flex-shrink-0">
+						<Button type="primary"><span>Add to Sonarr</span><ChevronRight size={20} /></Button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div>
+			<Carousel gradientFromColor="from-black">
+				<div slot="title" class="flex gap-6">
+					{#each series?.seasons || [] as season, i}
+						{@const isSelected = season?.season_number === visibleSeason}
+						<button
+							class={classNames('text-lg font-medium', {
+								'text-zinc-200 cursor-default': isSelected,
+								'text-zinc-500 hover:text-zinc-200 cursor-pointer': !isSelected
+							})}
+							on:click={() => (visibleSeason = season?.season_number || 1)}
+						>
+							Season {season?.season_number}
+						</button>
+					{/each}
+				</div>
+				{#each episodeProps[visibleSeason] || [] as props}
+					<EpisodeCard {...props} />
+				{:else}
+					<CarouselPlaceholderItems />
+				{/each}
+			</Carousel>
+		</div>
+	</div>
+
+	<div class="flex gap-4 p-8 flex-col md: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>
+				<p class="text-zinc-400 text-sm">Directed By</p>
+				<h2 class="font-medium">{series?.created_by?.map((c) => c.name).join(', ')}</h2>
+			</div>
+		</div>
+	</div>
+	<div class="flex items-center justify-between p-8">
+		<div>
+			<h1 class="font-medium text-lg">No sources found</h1>
+			<p class="text-sm text-zinc-400">Check your source settings</p>
+		</div>
+		<Button type="primary" size="sm">Add to Sonarr</Button>
+	</div>
+	<Carousel gradientFromColor="from-black">
+		<div slot="title" class="font-medium">Cast & Crew</div>
+		<CarouselPlaceholderItems />
+	</Carousel>
+	<Carousel gradientFromColor="from-black">
+		<div slot="title" class="font-medium">Recommended</div>
+		<CarouselPlaceholderItems />
+	</Carousel>
+	<Carousel gradientFromColor="from-black">
+		<div slot="title" class="font-medium">Similar Titles</div>
+		<CarouselPlaceholderItems />
+	</Carousel>
+{/await}
diff --git a/src/routes/series/[id]/+page.ts b/src/routes/series/[id]/+page.ts
index 9df4ade..7f19f60 100644
--- a/src/routes/series/[id]/+page.ts
+++ b/src/routes/series/[id]/+page.ts
@@ -1,8 +1,7 @@
-import { getTmdbSeries } from '$lib/apis/tmdb/tmdbApi';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
 	return {
-		series: await getTmdbSeries(Number(params.id))
+		tmdbId: params.id
 	};
 }) satisfies PageLoad;