diff --git a/src/lib/components/EpisodeCard/EpisodeCard.svelte b/src/lib/components/EpisodeCard/EpisodeCard.svelte
index 2626cb6..5525c6b 100644
--- a/src/lib/components/EpisodeCard/EpisodeCard.svelte
+++ b/src/lib/components/EpisodeCard/EpisodeCard.svelte
@@ -63,7 +63,7 @@
 	<button
 		on:click
 		class={classNames(
-			'aspect-video bg-center bg-cover bg-no-repeat rounded-lg overflow-hidden transition-all shadow-lg relative selectable flex-shrink-0 placeholder-image',
+			'aspect-video bg-center bg-cover bg-no-repeat rounded-lg overflow-hidden transition-all shadow-lg relative selectable flex-shrink-0 placeholder-image flex',
 			{
 				'h-40': size === 'md',
 				'h-full': size === 'dynamic',
@@ -77,7 +77,7 @@
 	>
 		<div
 			class={classNames(
-				'flex flex-col justify-between h-full group-hover:opacity-0 transition-all',
+				'flex-1 flex flex-col justify-between group-hover:opacity-0 transition-all',
 				{
 					'px-2 lg:px-3 pt-2': true,
 					'pb-4 lg:pb-6': progress,
diff --git a/src/lib/components/TitlePageLayout.svelte b/src/lib/components/TitlePageLayout.svelte
index 53c48a2..4d25014 100644
--- a/src/lib/components/TitlePageLayout.svelte
+++ b/src/lib/components/TitlePageLayout.svelte
@@ -5,7 +5,7 @@
 	import Carousel from './Carousel/Carousel.svelte';
 	import CarouselPlaceholderItems from './Carousel/CarouselPlaceholderItems.svelte';
 
-	export let backdropPath: string;
+	export let backdropUriCandidates: string[];
 	export let posterPath: string;
 	export let title: string;
 
@@ -16,6 +16,10 @@
 	let windowHeight: number;
 	let imageHeight: number;
 	$: imageHeight = windowHeight - bottomHeight * 0.3;
+
+	function getBackdropUri(uris: string[]) {
+		return uris[Math.max(2, Math.floor(uris.length / 8))] || uris[uris.length - 1] || '';
+	}
 </script>
 
 <svelte:window bind:innerHeight={windowHeight} />
@@ -23,7 +27,7 @@
 <div
 	style={"background-image: url('" +
 		TMDB_IMAGES_ORIGINAL +
-		backdropPath +
+		getBackdropUri(backdropUriCandidates) +
 		"'); height: " +
 		imageHeight.toFixed() +
 		'px'}
@@ -34,8 +38,8 @@
 
 <div class="flex flex-col h-screen" transition:fade>
 	<div class="flex-1 relative flex pt-24 px-4 sm:px-8">
-		<div class="absolute inset-0 bg-gradient-to-t from-black to-30%" />
-		<div class="z-[1] flex-1 flex justify-end gap-8 items-end">
+		<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-30%" />
+		<div class="z-[1] flex-1 flex justify-end gap-8 items-end max-w-screen-2xl mx-auto">
 			<div
 				class="aspect-[2/3] w-52 bg-center bg-cover rounded-md hidden sm:block"
 				style={"background-image: url('" + TMDB_POSTER_SMALL + posterPath + "')"}
@@ -63,14 +67,18 @@
 			</div>
 		</div>
 	</div>
-	<div class="py-6 bg-black" bind:clientHeight={bottomHeight}>
-		<slot name="episodes-carousel" />
+	<div bind:clientHeight={bottomHeight} class="py-6 bg-stone-950">
+		<div class="max-w-screen-2xl mx-auto">
+			<div class="2xl:-mx-8">
+				<slot name="episodes-carousel" />
+			</div>
+		</div>
 	</div>
 </div>
 
-<div class="flex flex-col gap-8 bg-black">
+<div class="flex flex-col gap-6 bg-stone-950">
 	<div
-		class="mx-4 sm:mx-8 py-4 sm:py-6 px-6 sm:px-10 grid grid-cols-4 sm:grid-cols-6 gap-4 sm:gap-x-8 bg-stone-900 rounded-xl"
+		class="mx-4 sm:mx-8 grid grid-cols-4 sm:grid-cols-6 gap-4 sm:gap-x-8 rounded-xl py-6 max-w-screen-2xl 2xl:mx-auto"
 	>
 		<slot name="info-description">
 			<div
@@ -118,28 +126,34 @@
 			</div>
 		</slot>
 	</div>
-	<div>
-		<Carousel gradientFromColor="from-black">
-			<slot name="cast-crew-carousel-title" slot="title" />
-			<slot name="cast-crew-carousel">
-				<CarouselPlaceholderItems />
-			</slot>
-		</Carousel>
+	<div class="max-w-screen-2xl 2xl:mx-auto">
+		<div class="2xl:-mx-8">
+			<Carousel gradientFromColor="from-stone-950">
+				<slot name="cast-crew-carousel-title" slot="title" />
+				<slot name="cast-crew-carousel">
+					<CarouselPlaceholderItems />
+				</slot>
+			</Carousel>
+		</div>
 	</div>
-	<div>
-		<Carousel gradientFromColor="from-black">
-			<slot name="recommendations-carousel-title" slot="title" />
-			<slot name="recommendations-carousel">
-				<CarouselPlaceholderItems />
-			</slot>
-		</Carousel>
+	<div class="max-w-screen-2xl 2xl:mx-auto">
+		<div class="2xl:-mx-8">
+			<Carousel gradientFromColor="from-stone-950">
+				<slot name="recommendations-carousel-title" slot="title" />
+				<slot name="recommendations-carousel">
+					<CarouselPlaceholderItems />
+				</slot>
+			</Carousel>
+		</div>
 	</div>
-	<div>
-		<Carousel gradientFromColor="from-black">
-			<slot name="similar-carousel-title" slot="title" />
-			<slot name="similar-carousel">
-				<CarouselPlaceholderItems />
-			</slot>
-		</Carousel>
+	<div class="max-w-screen-2xl 2xl:mx-auto">
+		<div class="2xl:-mx-8">
+			<Carousel gradientFromColor="from-stone-950">
+				<slot name="similar-carousel-title" slot="title" />
+				<slot name="similar-carousel">
+					<CarouselPlaceholderItems />
+				</slot>
+			</Carousel>
+		</div>
 	</div>
 </div>
diff --git a/src/routes/movie/[id]/MoviePage.svelte b/src/routes/movie/[id]/MoviePage.svelte
index 1da338d..bcf501c 100644
--- a/src/routes/movie/[id]/MoviePage.svelte
+++ b/src/routes/movie/[id]/MoviePage.svelte
@@ -67,7 +67,7 @@
 {#await tmdbMoviePromise then movie}
 	<TitlePageLayout
 		title={movie?.title || 'Movie'}
-		backdropPath={movie?.backdrop_path || ''}
+		backdropUriCandidates={movie?.images?.backdrops?.map((b) => b.file_path || '') || []}
 		posterPath={movie?.poster_path || ''}
 		tagline={movie?.tagline || movie?.title || ''}
 		overview={movie?.overview || ''}
diff --git a/src/routes/series/[id]/SeriesPage.svelte b/src/routes/series/[id]/SeriesPage.svelte
index 7ed1cf0..a5ba5f2 100644
--- a/src/routes/series/[id]/SeriesPage.svelte
+++ b/src/routes/series/[id]/SeriesPage.svelte
@@ -20,7 +20,7 @@
 	import TitlePageLayout from '$lib/components/TitlePageLayout.svelte';
 	import { playerState } from '$lib/components/VideoPlayer/VideoPlayer';
 	import { createLibraryItemStore, library } from '$lib/stores/library.store';
-	import { capitalize, formatMinutesToTime, formatSize } from '$lib/utils';
+	import { capitalize, formatMinutesToTime, formatSize, log } from '$lib/utils';
 	import classNames from 'classnames';
 	import { Archive, ChevronLeft, ChevronRight, Plus } from 'radix-icons-svelte';
 	import type { ComponentProps } from 'svelte';
@@ -57,7 +57,7 @@
 		.then((r) => r.filter((p) => p.backdropUri));
 	const castProps: Promise<ComponentProps<PeopleCard>[]> = tmdbSeriesPromise.then((s) =>
 		Promise.all(
-			s?.aggregate_credits?.cast?.map((m) => ({
+			s?.aggregate_credits?.cast?.slice(0, 20)?.map((m) => ({
 				tmdbId: m.id || 0,
 				backdropUri: m.profile_path || '',
 				name: m.name || '',
@@ -146,7 +146,7 @@
 
 {#await tmdbSeriesPromise then series}
 	<TitlePageLayout
-		backdropPath={series?.backdrop_path || ''}
+		backdropUriCandidates={series?.images?.backdrops?.map((b) => b.file_path || '') || []}
 		posterPath={series?.poster_path || ''}
 		title={series?.name || ''}
 		tagline={series?.tagline || series?.name || ''}
@@ -179,14 +179,14 @@
 		</svelte:fragment>
 
 		<div slot="episodes-carousel">
-			<Carousel gradientFromColor="from-black">
+			<Carousel gradientFromColor="from-stone-950">
 				<UiCarousel slot="title" class="flex gap-6">
 					{#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 === (visibleSeasonNumber || 1)}
 						<button
 							class={classNames(
-								'text-lg font-medium tracking-wide transition-colors flex-shrink-0 flex items-center gap-1',
+								'font-medium tracking-wide transition-colors flex-shrink-0 flex items-center gap-1',
 								{
 									'text-zinc-200': isSelected && seasonSelectVisible,
 									'text-zinc-500 hover:text-zinc-200 cursor-pointer':
@@ -209,7 +209,7 @@
 							}}
 						>
 							<ChevronLeft
-								size={22}
+								size={20}
 								class={(seasonSelectVisible || series?.number_of_seasons === 1) && 'hidden'}
 							/>
 							Season {season?.season_number}
@@ -218,7 +218,7 @@
 				</UiCarousel>
 				{#key visibleSeasonNumber}
 					{#each episodeProps[visibleSeasonNumber || 1] || [] as props, i}
-						<div class="flex flex-col gap-3" bind:this={episodeComponents[i]}>
+						<div bind:this={episodeComponents[i]}>
 							<EpisodeCard {...props} on:click={() => (visibleEpisodeIndex = i)} />
 						</div>
 					{:else}