diff --git a/src/lib/jellyfin/jellyfin.ts b/src/lib/jellyfin/jellyfin.ts
index bbfdf80..a4a7850 100644
--- a/src/lib/jellyfin/jellyfin.ts
+++ b/src/lib/jellyfin/jellyfin.ts
@@ -15,19 +15,23 @@ export const JellyfinApi = createClient<paths>({
 });
 
 export const getJellyfinContinueWatching = () =>
-	request(() =>
-		JellyfinApi.get('/Users/{userId}/Items/Resume', {
-			params: {
-				path: {
-					userId: JELLYFIN_USER_ID
-				},
-				query: {
-					limit: 8,
-					mediaTypes: ['Video']
-				}
+	JellyfinApi.get('/Users/{userId}/Items/Resume', {
+		params: {
+			path: {
+				userId: JELLYFIN_USER_ID
+			},
+			query: {
+				limit: 8,
+				mediaTypes: ['Video'],
+				fields: ['ProviderIds']
 			}
-		}).then((r) => r.data?.Items)
-	);
+		}
+	}).then((r) => {
+		console.log(r.data);
+		return r.data?.Items;
+	});
+
+export const requestJellyfinContinueWatching = () => request(getJellyfinContinueWatching);
 
 export const getJellyfinItemByTmdbId = () =>
 	request((tmdbId: string) =>
diff --git a/src/lib/tmdb-api.ts b/src/lib/tmdb-api.ts
index 64fb682..d355127 100644
--- a/src/lib/tmdb-api.ts
+++ b/src/lib/tmdb-api.ts
@@ -28,6 +28,9 @@ export const fetchTmdbMovieVideos = async (tmdbId: string): Promise<Video[]> =>
 export const fetchTmdbMovieImages = async (tmdbId: string): Promise<ImagesResponse> =>
 	await TmdbApi.get<ImagesResponse>('/movie/' + tmdbId + '/images').then((res) => res.data);
 
+export const fetchTmdbMovieCredits = async (tmdbId: string): Promise<CastMember[]> =>
+	await TmdbApi.get<CreditsResponse>('/movie/' + tmdbId + '/credits').then((res) => res.data.cast);
+
 export interface TmdbMovieFull extends TmdbMovie {
 	videos: Video[];
 	images: {
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..bda6b41
--- /dev/null
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,35 @@
+import { fetchTmdbMovie, TmdbApi } from '$lib/tmdb-api';
+import type { TmdbMovie } from '$lib/tmdb-api';
+import { getJellyfinContinueWatching } from '$lib/jellyfin/jellyfin';
+import type { PageServerLoad } from './$types';
+
+export const load = (async () => {
+	const showcases = await TmdbApi.get('/movie/popular').then((res): TmdbMovie[] =>
+		res.data.results.slice(0, 5)
+	);
+
+	const continueWatching = getJellyfinContinueWatching().then(async (items) => {
+		const itemsFiltered = items?.filter((i) => i.ProviderIds?.Tmdb);
+		if (!itemsFiltered?.length) return;
+
+		console.log(itemsFiltered.map((i) => i.RunTimeTicks));
+
+		const firstMovie = await fetchTmdbMovie(String(itemsFiltered[0].ProviderIds?.Tmdb));
+
+		return {
+			items: itemsFiltered?.map((i) => ({
+				tmdbId: i.ProviderIds?.Tmdb,
+				progress: i.UserData?.PlayedPercentage,
+				length: (i.RunTimeTicks || 0) / 10_000_000 / 60
+			})),
+			backdrop: firstMovie.backdrop_path
+		};
+	});
+
+	return {
+		showcases,
+		streamed: {
+			continueWatching
+		}
+	};
+}) satisfies PageServerLoad;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 779cdb0..d2bf6db 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,33 +1,62 @@
 <script lang="ts">
-	import SmallPoster from './components/SmallPoster/SmallPoster.svelte';
+	import SmallPoster from './components/Poster/Poster.svelte';
 	import type { PageData } from './$types';
 	import ResourceDetails from './components/ResourceDetails/ResourceDetails.svelte';
 	import ResourceDetailsControls from './ResourceDetailsControls.svelte';
 	import { TMDB_IMAGES } from '$lib/constants';
+	import { fetchTmdbMovie } from '$lib/tmdb-api';
+	import { onMount } from 'svelte';
 
 	export let data: PageData;
-	let movies = data.showcases;
-	let movie = movies[0];
+	let movies = [];
+
+	let index = 0;
+
+	function onNext() {
+		index = (index + 1) % movies.length;
+	}
+
+	function onPrevious() {
+		index = (index - 1 + movies.length) % movies.length;
+	}
+
+	onMount(() => {
+		for (const showcase of data.showcases) {
+			movies = [...movies, fetchTmdbMovie(String(showcase.id))];
+		}
+	});
 </script>
 
-<ResourceDetails remoteResource={movie}>
-	<ResourceDetailsControls slot="page-controls" />
-</ResourceDetails>
+<div class="h-screen">
+	{#if movies[index]}
+		{#await Promise.all(movies) then awaitedMovies}
+			<ResourceDetails movie={awaitedMovies[index]}>
+				<ResourceDetailsControls
+					slot="page-controls"
+					{onNext}
+					{onPrevious}
+					{index}
+					length={movies.length}
+				/>
+			</ResourceDetails>
+		{/await}
+	{/if}
+</div>
 
-{#if !data?.showcases?.length}
-	<div>Loading</div>
-{:else}
-	<div
-		class="bg-cover bg-center"
-		style={"background-image: url('" + TMDB_IMAGES + movie.backdrop_path + "')"}
-	>
-		<div class="p-8 flex flex-col gap-6 backdrop-blur-xl bg-[#000000dd]">
-			<h1 class="uppercase tracking-widest font-bold">Continue Watching</h1>
-			<div class="flex gap-4 overflow-x-scroll">
-				{#each data.showcases.splice(0, 5) as item (item.id)}
-					<SmallPoster tmdbId={item.id} />
-				{/each}
+{#await data.streamed.continueWatching then continueWatching}
+	{#if continueWatching?.items?.length}
+		<div
+			class="bg-cover bg-center"
+			style={"background-image: url('" + TMDB_IMAGES + continueWatching.backdrop + "')"}
+		>
+			<div class="p-8 flex flex-col gap-6 backdrop-blur-xl bg-[#000000dd]">
+				<h1 class="uppercase tracking-widest font-bold">Continue Watching</h1>
+				<div class="flex gap-4 overflow-x-scroll">
+					{#each continueWatching.items.slice(0, 5) as item (item.tmdbId)}
+						<SmallPoster tmdbId={item.tmdbId} progress={item.progress || 0} length={item.length} />
+					{/each}
+				</div>
 			</div>
 		</div>
-	</div>
-{/if}
+	{/if}
+{/await}
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
deleted file mode 100644
index 0348c85..0000000
--- a/src/routes/+page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { PageLoad } from './$types';
-import { fetchFullMovieDetails, TmdbApi } from '$lib/tmdb-api';
-import { RadarrApi } from '$lib/radarr/radarr';
-
-export const load = (async () => {
-	const movies = await TmdbApi.get('/movie/popular').then((res) => res.data.results.slice(0, 5));
-
-	const showcases = await Promise.all(movies.map((m: any) => fetchFullMovieDetails(m.id)));
-	return { showcases };
-}) satisfies PageLoad;
diff --git a/src/routes/ResourceDetailsControls.svelte b/src/routes/ResourceDetailsControls.svelte
index 7b8f444..f0aba0c 100644
--- a/src/routes/ResourceDetailsControls.svelte
+++ b/src/routes/ResourceDetailsControls.svelte
@@ -1,22 +1,31 @@
 <script lang="ts">
 	import { ChevronDown, ChevronLeft, ChevronRight, DotFilled } from 'radix-icons-svelte';
+	import IconButton from './components/IconButton.svelte';
+
+	export let onNext: () => void;
+	export let onPrevious: () => void;
+	export let index = 0;
+	export let length = 0;
 </script>
 
 <div class="relative z-[1] flex gap-8 justify-between items-center col-span-2">
-	<div class="p-4 cursor-pointer text-zinc-200 hover:text-zinc-100">
+	<IconButton on:click={onPrevious}>
 		<ChevronLeft size="24" />
-	</div>
+	</IconButton>
+
 	<div class="flex gap-2">
-		<DotFilled size="15" />
-		<DotFilled size="15" class="opacity-20" />
-		<DotFilled size="15" class="opacity-20" />
-		<DotFilled size="15" class="opacity-20" />
-		<DotFilled size="15" class="opacity-20" />
+		{#each Array.from({ length }, (_, i) => i) as i}
+			{#if i === index}
+				<DotFilled size="15" class="opacity-100" />
+			{:else}
+				<DotFilled size="15" class="opacity-20" />
+			{/if}
+		{/each}
 	</div>
 
-	<div class="p-4 cursor-pointer text-zinc-200 hover:text-zinc-100">
+	<IconButton on:click={onNext}>
 		<ChevronRight size="24" />
-	</div>
+	</IconButton>
 </div>
 <!--<div class="absolute inset-x-0 bottom-6 flex justify-center mx-auto opacity-50">-->
 <!--	<ChevronDown size="20" />-->
diff --git a/src/routes/components/SmallPoster/SmallPoster.svelte b/src/routes/components/Poster/Poster.svelte
similarity index 89%
rename from src/routes/components/SmallPoster/SmallPoster.svelte
rename to src/routes/components/Poster/Poster.svelte
index af21bb6..8de6893 100644
--- a/src/routes/components/SmallPoster/SmallPoster.svelte
+++ b/src/routes/components/Poster/Poster.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { TmdbApi } from '$lib/tmdb-api';
+	import type { TmdbMovie } from '$lib/tmdb-api';
 	import { onMount } from 'svelte';
 	import { TMDB_IMAGES } from '$lib/constants';
+	import { formatMinutes } from '$lib/utils';
 
 	export let tmdbId;
 	export let progress = 0;
+	export let length = 0;
 	export let randomProgress = false;
 	if (randomProgress) progress = Math.random() > 0.5 ? Math.round(Math.random() * 100) : 100;
 
@@ -50,8 +53,10 @@
 					{:else}
 						<h2 class="text-xs uppercase text-zinc-300">S1 <b>E2</b></h2>
 					{/if}
-					{#if progress}
-						<h2 class="mt-2 text-sm tracking-wide text-zinc-300"><b>30min</b> left</h2>
+					{#if progress && length}
+						<h2 class="mt-2 text-sm tracking-wide text-zinc-300">
+							<b>{formatMinutes(length * (1 - progress / 100))}</b> left
+						</h2>
 					{/if}
 				</div>
 				<div class="flex flex-col gap-2">
diff --git a/src/routes/components/ResourceDetails/ResourceDetails.svelte b/src/routes/components/ResourceDetails/ResourceDetails.svelte
index f6a4481..cf1bca0 100644
--- a/src/routes/components/ResourceDetails/ResourceDetails.svelte
+++ b/src/routes/components/ResourceDetails/ResourceDetails.svelte
@@ -2,22 +2,30 @@
 	import { ChevronDown, Clock } from 'radix-icons-svelte';
 	import { onMount } from 'svelte';
 	import classNames from 'classnames';
-	import { fade } from 'svelte/transition';
+	import { fade, fly, blur, slide } from 'svelte/transition';
 	import { TMDB_IMAGES } from '$lib/constants';
 	import Button from '../Ui/Button.svelte';
-	import type { MovieResource } from '$lib/radarr/radarr';
-	import type { TmdbMovie, TmdbMovieFull } from '$lib/tmdb-api';
+	import type { CastMember, TmdbMovie, Video } from '$lib/tmdb-api';
+	import { fetchTmdbMovieCredits, fetchTmdbMovieVideos } from '$lib/tmdb-api';
 
-	export let resource: MovieResource;
+	export let movie: TmdbMovie;
+	export let videos: Video[];
+	export let castMembers: CastMember[];
 	export let trailer = true;
-	export let remoteResource: TmdbMovieFull;
-	let tmdbPageUrl = '';
-	$: tmdbPageUrl = 'https://www.themoviedb.org/movie/' + remoteResource.id;
 
-	let video: any = remoteResource.videos.filter(
-		(v) => v.site === 'YouTube' && v.type === 'Trailer'
-	)?.[0];
+	let showTrailer = false;
+	let focusTrailer = false;
+	let trailerStartTime = 0;
 
+	let video;
+	$: video = videos?.filter((v) => v.site === 'YouTube' && v.type === 'Trailer')?.[0];
+
+	let opacityStyle;
+	$: opacityStyle =
+		(focusTrailer ? 'opacity: 0;' : 'opacity: 100;') + 'transition: opacity 0.3s ease-in-out;';
+
+	// Transitions
+	const duration = 200;
 	const monthNames = [
 		'January',
 		'February',
@@ -32,11 +40,7 @@
 		'November',
 		'December'
 	];
-	const releaseDate = new Date(remoteResource.release_date);
-
-	let showTrailer = false;
-	let focusTrailer = false;
-	let trailerStartTime = 0;
+	const releaseDate = new Date(movie.release_date);
 
 	function openTrailer() {
 		window
@@ -50,160 +54,205 @@
 			.focus();
 	}
 
-	let opacityStyle;
+	let fadeIndex = -1;
+	const getFade = () => {
+		fadeIndex += 1;
+		return { duration: 200, delay: 500 + fadeIndex * 50 };
+	};
 
-	const transitionStyle = 'transition: opacity 0.3s ease-in-out;';
-	$: opacityStyle = (focusTrailer ? 'opacity: 0;' : 'opacity: 100;') + transitionStyle;
+	// onMount(() => {});
 
-	onMount(() => {
-		setTimeout(() => {
-			if (trailer) {
-				showTrailer = true;
-				trailerStartTime = Date.now();
-			}
-		}, 2500);
-		console.log(remoteResource);
-	});
+	let timeout;
+	$: {
+		fadeIndex = 0;
+		console.log('ran for ', movie?.id);
+		if (movie) {
+			showTrailer = false;
+			if (timeout) clearTimeout(timeout);
+
+			timeout = setTimeout(() => {
+				if (trailer) {
+					showTrailer = true;
+					trailerStartTime = Date.now();
+				}
+			}, 2500);
+		}
+
+		if (movie) {
+			fetchTmdbMovieVideos(String(movie.id)).then((result) => {
+				videos = result;
+			});
+		}
+
+		if (movie) {
+			fetchTmdbMovieCredits(String(movie.id)).then((result) => {
+				castMembers = result;
+			});
+		}
+	}
 </script>
 
-<div
-	class="h-screen w-screen bg-center bg-cover relative overflow-hidden"
-	style={"background-image: url('" + TMDB_IMAGES + remoteResource.backdrop_path + "')"}
->
-	<div class="youtube-container absolute h-full scale-[150%] hidden sm:block">
-		{#if video.key}
-			<iframe
-				class={classNames('transition-opacity', {
-					'opacity-100': showTrailer,
-					'opacity-0': !showTrailer
-				})}
-				transition:fade
-				src={'https://www.youtube.com/embed/' +
-					video.key +
-					'?autoplay=1&mute=1&loop=1&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1'}
-				title="YouTube video player"
-				frameborder="0"
-				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-				allowfullscreen
-			/>
-		{/if}
-	</div>
-	<div
-		class={classNames(
-			'bg-gradient-to-b from-darken via-20% via-transparent transition-opacity absolute inset-0 z-[1]',
-			{
-				'opacity-100': focusTrailer,
-				'opacity-0': !focusTrailer
-			}
-		)}
-	/>
-	<div
-		class={classNames(
-			'h-full w-full px-16 pb-8 pt-32',
-			'grid grid-cols-[1fr_max-content] grid-rows-[1fr_min-content] gap-x-16 gap-y-8 relative z-[2]',
-			'transition-colors',
-			{
-				'bg-darken': !focusTrailer,
-				'bg-transparent': focusTrailer
-			}
-		)}
-	>
-		<div class="flex flex-col justify-self-start min-w-0 row-span-full">
-			<div class="relative" style={opacityStyle}>
-				<h2 class="text-zinc-300 text-sm self-end">
-					<span class="font-bold uppercase tracking-wider"
-						>{monthNames[releaseDate.getMonth()]}</span
-					>
-					{releaseDate.getFullYear()}
-				</h2>
-				<h2
-					class="tracking-wider font-display font-extrabold text-amber-300 absolute opacity-10 text-8xl -ml-6 mt-8"
-				>
-					<slot name="reason">Popular Now</slot>
-				</h2>
-				<h1 class="uppercase text-8xl font-bold font-display z-[1] relative">
-					{remoteResource.original_title}
-				</h1>
-			</div>
-
-			<div class="mt-auto max-w-3xl flex flex-col gap-4" style={opacityStyle}>
-				<div class="text-xl font-semibold tracking-wider">{remoteResource.tagline}</div>
+<div class="h-screen w-screen relative overflow-hidden">
+	{#key video?.key + movie.id}
+		<div
+			class="absolute inset-0 bg-center bg-cover transition-[background-image] duration-500 delay-500"
+			style={"background-image: url('" + TMDB_IMAGES + movie.backdrop_path + "');"}
+			transition:fade
+		/>
+		<div class="youtube-container absolute h-full scale-[150%] hidden sm:block" transition:fade>
+			{#if video?.key}
+				<iframe
+					class={classNames('transition-opacity', {
+						'opacity-100': showTrailer,
+						'opacity-0': !showTrailer
+					})}
+					src={'https://www.youtube.com/embed/' +
+						video.key +
+						'?autoplay=1&mute=1&loop=1&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1'}
+					title="YouTube video player"
+					frameborder="0"
+					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+					allowfullscreen
+				/>
+			{/if}
+		</div>
+	{/key}
+	{#key movie.id}
+		<div
+			class={classNames(
+				'bg-gradient-to-b from-darken via-20% via-transparent transition-opacity absolute inset-0 z-[1]',
+				{
+					'opacity-100': focusTrailer,
+					'opacity-0': !focusTrailer
+				}
+			)}
+		/>
+		<div
+			class={classNames(
+				'h-full w-full px-16 pb-8 pt-32',
+				'grid grid-cols-[1fr_max-content] grid-rows-[1fr_min-content] gap-x-16 gap-y-8 relative z-[2]',
+				'transition-colors',
+				{
+					'bg-darken': !focusTrailer,
+					'bg-transparent': focusTrailer
+				}
+			)}
+		>
+			<div class="flex flex-col justify-self-start min-w-0 row-span-full">
 				<div
-					class="tracking-wider text-zinc-200 font-light leading-6 pl-4 border-l-2 border-zinc-300"
+					class="relative"
+					style={opacityStyle}
+					out:fade={{ duration: 200 }}
+					in:fly={{ x: -20, duration: 200, delay: 400 }}
 				>
-					{remoteResource.overview}
+					<h2 class="text-zinc-300 text-sm self-end">
+						<span class="font-bold uppercase tracking-wider"
+							>{monthNames[releaseDate.getMonth()]}</span
+						>
+						{releaseDate.getFullYear()}
+					</h2>
+					<h2
+						class="tracking-wider font-display font-extrabold text-amber-300 absolute opacity-10 text-8xl -ml-6 mt-8"
+					>
+						<slot name="reason">Popular Now</slot>
+					</h2>
+					<h1 class="uppercase text-8xl font-bold font-display z-[1] relative">
+						{movie.original_title}
+					</h1>
 				</div>
-			</div>
-			<div class="flex gap-6 mt-10">
-				<div class="flex gap-1">
-					<Button size="lg" style={opacityStyle}>Stream</Button>
+				<div
+					class="mt-auto max-w-3xl flex flex-col gap-4"
+					style={opacityStyle}
+					out:fade={{ duration: 200 }}
+					in:fly={{ x: -20, duration: 200, delay: 600 }}
+				>
+					<div class="text-xl font-semibold tracking-wider">{movie.tagline}</div>
 					<div
-						class="hidden items-center justify-center border-2 border-white w-10 cursor-pointer hover:bg-white hover:text-zinc-900 transition-colors"
+						class="tracking-wider text-zinc-200 font-light leading-6 pl-4 border-l-2 border-zinc-300"
 					>
-						<ChevronDown size="20" />
+						{movie.overview}
 					</div>
 				</div>
-				<Button
-					size="lg"
-					type="secondary"
-					on:mouseover={() => (focusTrailer = trailer)}
-					on:mouseleave={() => (focusTrailer = false)}
-					on:click={openTrailer}>Watch Trailer</Button
+				<div
+					class="flex gap-6 mt-10"
+					out:fade={{ duration: 200 }}
+					in:fly={{ x: -20, duration: 200, delay: 600 }}
 				>
-			</div>
-		</div>
-		<div class="flex flex-col gap-6 max-w-[14rem] row-span-full" style={opacityStyle}>
-			<h3 class="text-xs tracking-wide uppercase">Details</h3>
-			<div class="flex flex-col gap-1">
-				<div class="tracking-widest font-extralight text-sm">
-					{remoteResource.genres
-						.map((g) => g.name.charAt(0).toUpperCase() + g.name.slice(1))
-						.join(', ')}
-				</div>
-				<div class="flex gap-1.5 items-center">
-					<Clock size="14" />
-					<div class="tracking-widest font-extralight text-sm">
-						{Math.floor(remoteResource.runtime / 60)}h {remoteResource.runtime % 60}m
+					<div class="flex gap-1">
+						<Button size="lg" style={opacityStyle}>Stream</Button>
+						<div
+							class="hidden items-center justify-center border-2 border-white w-10 cursor-pointer hover:bg-white hover:text-zinc-900 transition-colors"
+						>
+							<ChevronDown size="20" />
+						</div>
 					</div>
-				</div>
-				<div class="tracking-widest font-extralight text-sm">Currently <b>Streaming</b></div>
-				<a
-					href={'https://www.themoviedb.org/movie/' + remoteResource.id}
-					target="_blank"
-					class="tracking-widest font-extralight text-sm"
-				>
-					<b>{remoteResource.vote_average.toFixed(1)}</b> TMDB
-				</a>
-				<div class="flex mt-4">
-					<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="text-white w-4"
-						><g
-							><path d="M0 0h24v24H0z" fill="none" /><path
-								d="M11.29 3.814l2.02 5.707.395 1.116.007-4.81.01-4.818h4.27L18 11.871c.003 5.98-.003 10.89-.015 10.9-.012.009-.209 0-.436-.027-.989-.118-2.29-.236-3.34-.282a14.57 14.57 0 0 1-.636-.038c-.003-.004-.273-.762-.776-2.184v-.004l-2.144-6.061-.34-.954-.008 4.586c-.006 4.365-.01 4.61-.057 4.61-.163 0-1.57.09-2.04.136-.308.027-.926.09-1.37.145-.446.051-.816.085-.823.078C6.006 22.77 6 17.867 6 11.883V1.002h.005V1h4.288l.028.08c.007.016.065.176.157.437l.641 1.778.173.496-.001.023z"
-								fill-rule="evenodd"
-								fill="currentColor"
-							/></g
-						></svg
+					<Button
+						size="lg"
+						type="secondary"
+						on:mouseover={() => (focusTrailer = trailer)}
+						on:mouseleave={() => (focusTrailer = false)}
+						on:click={openTrailer}>Watch Trailer</Button
 					>
 				</div>
 			</div>
-			<h3 class="text-xs tracking-wide uppercase">Starring</h3>
-			<div class="flex flex-col gap-1">
-				{#each remoteResource.credits.slice(0, 5) as a}
+			<div class="flex flex-col gap-6 max-w-[14rem] row-span-full" style={opacityStyle} out:fade>
+				<h3 class="text-xs tracking-wide uppercase" in:fade={getFade(0)}>Details</h3>
+				<div class="flex flex-col gap-1">
+					<div class="tracking-widest font-extralight text-sm" in:fade={getFade(1)}>
+						{movie.genres.map((g) => g.name.charAt(0).toUpperCase() + g.name.slice(1)).join(', ')}
+					</div>
+					<div class="flex gap-1.5 items-center" in:fade={getFade(2)}>
+						<Clock size="14" />
+						<div class="tracking-widest font-extralight text-sm">
+							{Math.floor(movie.runtime / 60)}h {movie.runtime % 60}m
+						</div>
+					</div>
+					<div class="tracking-widest font-extralight text-sm" in:fade={getFade(3)}>
+						Currently <b>Streaming</b>
+					</div>
 					<a
-						href={'https://www.themoviedb.org/person/' + a.id}
+						href={'https://www.themoviedb.org/movie/' + movie.id}
 						target="_blank"
-						class="tracking-widest font-extralight text-sm">{a.name}</a
+						class="tracking-widest font-extralight text-sm"
+						in:fade={getFade(4)}
 					>
-				{/each}
-				<a
-					href={'https://www.themoviedb.org/movie/' + remoteResource.id + '/cast'}
-					target="_blank"
-					class="tracking-widest font-extralight text-sm">View all...</a
-				>
+						<b>{movie.vote_average.toFixed(1)}</b> TMDB
+					</a>
+					<div class="flex mt-4" in:fade={getFade(5)}>
+						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="text-white w-4"
+							><g
+								><path d="M0 0h24v24H0z" fill="none" /><path
+									d="M11.29 3.814l2.02 5.707.395 1.116.007-4.81.01-4.818h4.27L18 11.871c.003 5.98-.003 10.89-.015 10.9-.012.009-.209 0-.436-.027-.989-.118-2.29-.236-3.34-.282a14.57 14.57 0 0 1-.636-.038c-.003-.004-.273-.762-.776-2.184v-.004l-2.144-6.061-.34-.954-.008 4.586c-.006 4.365-.01 4.61-.057 4.61-.163 0-1.57.09-2.04.136-.308.027-.926.09-1.37.145-.446.051-.816.085-.823.078C6.006 22.77 6 17.867 6 11.883V1.002h.005V1h4.288l.028.08c.007.016.065.176.157.437l.641 1.778.173.496-.001.023z"
+									fill-rule="evenodd"
+									fill="currentColor"
+								/></g
+							></svg
+						>
+					</div>
+				</div>
+				{#if castMembers?.length > 0}
+					<h3 class="text-xs tracking-wide uppercase" in:fade={getFade(6)}>Starring</h3>
+					<div class="flex flex-col gap-1">
+						{#each castMembers.slice(0, 5) as a}
+							<a
+								href={'https://www.themoviedb.org/person/' + a.id}
+								target="_blank"
+								class="tracking-widest font-extralight text-sm"
+								in:fade={getFade(7)}>{a.name}</a
+							>
+						{/each}
+						<a
+							href={'https://www.themoviedb.org/movie/' + movie.id + '/cast'}
+							target="_blank"
+							class="tracking-widest font-extralight text-sm"
+							in:fade={getFade(8)}>View all...</a
+						>
+					</div>
+				{/if}
 			</div>
+			<slot name="page-controls" />
 		</div>
-		<slot name="page-controls" />
-	</div>
+	{/key}
 </div>
 
 <style>