diff --git a/src/lib/apis/tmdb/tmdb-api.ts b/src/lib/apis/tmdb/tmdb-api.ts
index eebbdab..d3215a9 100644
--- a/src/lib/apis/tmdb/tmdb-api.ts
+++ b/src/lib/apis/tmdb/tmdb-api.ts
@@ -5,7 +5,6 @@ import { TMDB_API_KEY, TMDB_BACKDROP_SMALL } from '../../constants';
 import { settings } from '../../stores/settings.store';
 import type { TitleType } from '../../types';
 import type { Api } from '../api.interface';
-import { appState } from '../../stores/app-state.store';
 
 const CACHE_ONE_DAY = 'max-age=86400';
 const CACHE_FOUR_DAYS = 'max-age=345600';
@@ -19,6 +18,9 @@ export type TmdbSeason =
 export type TmdbEpisode = NonNullable<TmdbSeason['episodes']>[0];
 export type TmdbPerson =
 	operations['person-details']['responses']['200']['content']['application/json'];
+export type TmdbCredit =
+	| NonNullable<TmdbSeriesFull2['aggregate_credits']['cast']>[0]
+	| NonNullable<TmdbMovieFull2['credits']['cast']>[0];
 
 export interface TmdbPersonFull extends TmdbPerson {
 	images: operations['person-images']['responses']['200']['content']['application/json'];
@@ -165,6 +167,15 @@ export class TmdbApi implements Api<paths> {
 			}
 		}).then((res) => res.data?.results || []);
 
+	getSeriesRecommendations = (tmdbId: number) =>
+		TmdbApiOpen.GET('/3/tv/{series_id}/recommendations', {
+			params: {
+				path: {
+					series_id: tmdbId
+				}
+			}
+		}).then((res) => res.data?.results || []);
+
 	// OTHER
 }
 
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index ec99fcc..83587c2 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -37,7 +37,7 @@
 				<slot name="icon" />
 			</div>
 		{/if}
-		<div class="flex-1 text-center">
+		<div class="flex-1 text-center text-nowrap">
 			<slot {hasFocus} />
 		</div>
 		{#if $$slots['icon-after']}
diff --git a/src/lib/components/Card/TmdbCard.svelte b/src/lib/components/Card/TmdbCard.svelte
index d29d60d..8e7a4dd 100644
--- a/src/lib/components/Card/TmdbCard.svelte
+++ b/src/lib/components/Card/TmdbCard.svelte
@@ -1,19 +1,35 @@
 <script lang="ts">
 	import Card from './Card.svelte';
-	import type { TmdbMovie2 } from '../../apis/tmdb/tmdb-api';
+	import type { TmdbMovie2, TmdbSeries2 } from '../../apis/tmdb/tmdb-api';
 	import type { ComponentProps } from 'svelte';
 	import { TMDB_POSTER_SMALL } from '../../constants';
+	import type { TitleType } from '../../types';
+
+	export let item: TmdbMovie2 | TmdbSeries2;
+	let title = '';
+	let subtitle = '';
+	let type: TitleType = 'movie';
+
+	if ('title' in item) {
+		title = item.title || title;
+		subtitle = item.release_date || subtitle;
+		type = 'movie';
+	} else if ('name' in item) {
+		title = item.name || title;
+		subtitle = item.first_air_date || subtitle;
+		type = 'series';
+	}
 
-	export let item: TmdbMovie2;
 	const props: ComponentProps<Card> = {
 		tmdbId: item.id,
-		title: item.title,
-		subtitle: item.release_date,
+		title,
+		subtitle,
 		backdropUrl: TMDB_POSTER_SMALL + item.poster_path,
-		type: 'movie',
+		type,
 		orientation: 'portrait',
-		rating: item.vote_average
+		rating: item.vote_average,
+		size: 'lg'
 	};
 </script>
 
-<Card {...props} />
+<Card {...$$restProps} {...props} on:enter />
diff --git a/src/lib/components/Carousel/Carousel.svelte b/src/lib/components/Carousel/Carousel.svelte
index cf3bf53..bb50c6c 100644
--- a/src/lib/components/Carousel/Carousel.svelte
+++ b/src/lib/components/Carousel/Carousel.svelte
@@ -6,7 +6,7 @@
 	import { PLATFORM_TV } from '../../constants';
 
 	export let gradientFromColor = 'from-secondary-500';
-	export let heading = '';
+	export let hideControls = false;
 
 	let carousel: HTMLDivElement | undefined;
 	let scrollX = 0;
@@ -15,15 +15,18 @@
 
 <div class={classNames('flex flex-col group/carousel', $$restProps.class)}>
 	<div class={'flex justify-between items-center mb-2 ' + scrollClass}>
-		<slot name="title">
-			<div class="font-semibold text-xl">{heading}</div>
-		</slot>
+		<div class="font-medium tracking-wide text-2xl">
+			<slot name="header" />
+		</div>
 		<div
 			class={classNames(
 				'flex gap-2 ml-4',
 				//'sm:opacity-0 transition-opacity sm:group-hover/carousel:opacity-100',
 				{
-					hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0) || PLATFORM_TV
+					hidden:
+						(carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0) ||
+						PLATFORM_TV ||
+						hideControls
 				}
 			)}
 		>
@@ -49,6 +52,7 @@
 			<div
 				class={classNames(
 					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
+					'[&>*]:p-4 -mx-4 w-full',
 					scrollClass
 				)}
 				bind:this={carousel}
diff --git a/src/lib/components/PersonCard/PersonCard.svelte b/src/lib/components/PersonCard/PersonCard.svelte
new file mode 100644
index 0000000..7a56736
--- /dev/null
+++ b/src/lib/components/PersonCard/PersonCard.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import Container from '../../../Container.svelte';
+	import AnimateScale from '../AnimateScale.svelte';
+	import type { Readable } from 'svelte/store';
+
+	export let tmdbId: number;
+	// export let type: TitleType = 'person';
+	export let backdropUrl: string;
+	export let name: string;
+	export let subtitle: string;
+	export let size: 'dynamic' | 'md' | 'lg' = 'md';
+
+	let hasFocus: Readable<boolean>;
+</script>
+
+<AnimateScale hasFocus={$hasFocus}>
+	<Container
+		class={classNames(
+			'flex flex-col justify-start rounded-xl overflow-hidden relative shadow-lg shrink-0 selectable hover:text-inherit hover:bg-stone-800 focus-visible:bg-stone-800 bg-stone-900 group text-left',
+			{
+				'w-56 h-80': size === 'md',
+				'h-52': size === 'lg',
+				'w-full': size === 'dynamic'
+			}
+		)}
+		on:clickOrSelect
+		on:click={() => {
+			// if (openInModal) {
+			// 	openTitleModal({ type, id: tmdbId, provider: 'tmdb' });
+			// } else {
+			// 	window.location.href = `/${type}/${tmdbId}`;
+			// }
+		}}
+		on:enter
+		bind:hasFocus
+	>
+		<!--		<div-->
+		<!--			class="mx-auto rounded-full overflow-hidden flex-shrink-0 aspect-square w-full bg-zinc-200 bg-opacity-20"-->
+		<!--		>-->
+		<!--			<div-->
+		<!--				style={"background-image: url('" + backdropUrl + "')"}-->
+		<!--				class="bg-center bg-cover group-hover:scale-105 group-focus-visible:scale-105 transition-transform w-full h-full"-->
+		<!--			/>-->
+		<!--		</div>-->
+
+		<div
+			style={"background-image: url('" + backdropUrl + "')"}
+			class="bg-center bg-cover w-full h-full"
+		/>
+		<div class="p-4">
+			<h2 class="text-sm text-zinc-300 font-medium line-clamp-1">{subtitle}</h2>
+			<h1 class="font-semibold line-clamp-2">
+				{name}
+			</h1>
+		</div>
+	</Container>
+</AnimateScale>
diff --git a/src/lib/components/PersonCard/TmdbPersonCard.svelte b/src/lib/components/PersonCard/TmdbPersonCard.svelte
new file mode 100644
index 0000000..79aef90
--- /dev/null
+++ b/src/lib/components/PersonCard/TmdbPersonCard.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import PersonCard from './PersonCard.svelte';
+	import type { TmdbCredit } from '../../apis/tmdb/tmdb-api';
+	import { TMDB_PROFILE_LARGE, TMDB_PROFILE_SMALL } from '../../constants';
+
+	export let tmdbCredit: TmdbCredit;
+	let subtitle = 'Uncredited';
+	if ('roles' in tmdbCredit) {
+		subtitle = tmdbCredit.roles?.[0]?.character || subtitle;
+	} else if ('character' in tmdbCredit) {
+		subtitle = tmdbCredit?.character || subtitle;
+	}
+</script>
+
+<PersonCard
+	tmdbId={tmdbCredit.id || -1}
+	name={tmdbCredit.original_name || 'Unknown'}
+	{subtitle}
+	backdropUrl={TMDB_PROFILE_LARGE + tmdbCredit.profile_path}
+	on:clickOrSelect
+	on:enter
+/>
diff --git a/src/lib/components/SeriesPage/EpisodeCarousel.svelte b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
index 49dde6a..929053b 100644
--- a/src/lib/components/SeriesPage/EpisodeCarousel.svelte
+++ b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
@@ -90,7 +90,7 @@
 			'-translate-y-20': scrollTop < 140
 		})}
 	>
-		<svelte:fragment slot="title">
+		<svelte:fragment slot="header">
 			<UICarousel
 				class={classNames('flex -mx-2 transition-opacity', {
 					'opacity-0': scrollTop < 140
diff --git a/src/lib/components/SeriesPage/SeriesPage.svelte b/src/lib/components/SeriesPage/SeriesPage.svelte
index ef1fa5e..090c82b 100644
--- a/src/lib/components/SeriesPage/SeriesPage.svelte
+++ b/src/lib/components/SeriesPage/SeriesPage.svelte
@@ -17,6 +17,10 @@
 	import { scrollIntoView, Selectable } from '../../selectable';
 	import ScrollHelper from '../ScrollHelper.svelte';
 	import SonarrMediaMangerModal from '../MediaManager/sonarr/SonarrMediaMangerModal.svelte';
+	import Carousel from '../Carousel/Carousel.svelte';
+	import PersonCard from '../PersonCard/PersonCard.svelte';
+	import TmdbPersonCard from '../PersonCard/TmdbPersonCard.svelte';
+	import TmdbCard from '../Card/TmdbCard.svelte';
 
 	export let id: string;
 
@@ -29,6 +33,7 @@
 		(id: string) => jellyfinApi.getLibraryItemFromTmdbId(id),
 		id
 	);
+	const { promise: recommendations } = useRequest(tmdbApi.getSeriesRecommendations, Number(id));
 	const { data: jellyfinEpisodes } = useDependantRequest(
 		jellyfinApi.getJellyfinEpisodes,
 		jellyfinItemData,
@@ -199,7 +204,7 @@
 				</div>
 			</HeroCarousel>
 		</Container>
-		<Container on:enter={scrollIntoView({ vertical: 64 })} bind:selectable={episodesSelectable}>
+		<Container on:enter={scrollIntoView({ bottom: 32 })} bind:selectable={episodesSelectable}>
 			<EpisodeCarousel
 				id={Number(id)}
 				tmdbSeries={tmdbSeriesData}
@@ -208,5 +213,27 @@
 				bind:selectedTmdbEpisode
 			/>
 		</Container>
+		<Container on:enter={scrollIntoView({ top: 0 })} class="min-h-screen flex flex-col">
+			{#await $tmdbSeries then series}
+				<Carousel scrollClass="px-20" class="mt-8">
+					<div slot="header">Show Cast</div>
+					{#each series?.aggregate_credits?.cast?.slice(0, 15) || [] as credit}
+						<TmdbPersonCard
+							on:enter={scrollIntoView({ horizontal: 64 + 30 })}
+							tmdbCredit={credit}
+						/>
+					{/each}
+				</Carousel>
+			{/await}
+			{#await $recommendations then recommendations}
+				<Carousel scrollClass="px-20" class="mt-8">
+					<div slot="header">Recommendations</div>
+					{#each recommendations || [] as recommendation}
+						<TmdbCard item={recommendation} on:enter={scrollIntoView({ horizontal: 64 + 30 })} />
+					{/each}
+				</Carousel>
+			{/await}
+			<Container class="flex-1 bg-secondary-950 mt-4 pt-4">More info</Container>
+		</Container>
 	</div>
 </DetachedPage>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 971f041..226449a 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -4,6 +4,7 @@ export const TMDB_IMAGES_ORIGINAL = 'https://www.themoviedb.org/t/p/original';
 export const TMDB_BACKDROP_SMALL = 'https://www.themoviedb.org/t/p/w780';
 export const TMDB_POSTER_SMALL = 'https://www.themoviedb.org/t/p/w342';
 export const TMDB_PROFILE_SMALL = 'https://www.themoviedb.org/t/p/w185';
+export const TMDB_PROFILE_LARGE = 'https://www.themoviedb.org/t/p/h632';
 
 export const PLACEHOLDER_BACKDROP = '/plcaeholder.jpg';
 
diff --git a/src/lib/pages/MoviesHomePage.svelte b/src/lib/pages/MoviesHomePage.svelte
index 6d9536f..345cfc5 100644
--- a/src/lib/pages/MoviesHomePage.svelte
+++ b/src/lib/pages/MoviesHomePage.svelte
@@ -31,7 +31,7 @@
 	</div>
 	<div class="mt-16">
 		<Carousel scrollClass="px-20" on:enter={scrollIntoView({ vertical: 64 })}>
-			<div class="text-xl font-semibold text-zinc-300" slot="title">
+			<div slot="header">
 				{$isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length)
 					? 'Loading...'
 					: $continueWatching?.length
@@ -49,13 +49,11 @@
 					{/each}
 				</div>
 			{:else if $recentlyAdded?.length}
-				<div class="flex -mx-4">
-					{#each $recentlyAdded as item (item.Id)}
-						<Container class="m-4" on:enter={scrollIntoView({ horizontal: 64 + 20 })}>
-							<JellyfinCard size="lg" {item} />
-						</Container>
-					{/each}
-				</div>
+				{#each $recentlyAdded as item (item.Id)}
+					<Container on:enter={scrollIntoView({ horizontal: 64 + 20 })}>
+						<JellyfinCard size="lg" {item} />
+					</Container>
+				{/each}
 			{/if}
 		</Carousel>
 	</div>
diff --git a/src/lib/pages/SeriesHomePage.svelte b/src/lib/pages/SeriesHomePage.svelte
index 81638cd..67de0b3 100644
--- a/src/lib/pages/SeriesHomePage.svelte
+++ b/src/lib/pages/SeriesHomePage.svelte
@@ -79,7 +79,7 @@
 	</div>
 	<div class="mt-16">
 		<Carousel scrollClass="px-20" on:enter={scrollIntoView({ vertical: 64 })}>
-			<div class="text-xl font-semibold text-zinc-300" slot="title">
+			<div class="text-xl font-semibold text-zinc-300" slot="header">
 				{$isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length)
 					? 'Loading...'
 					: $continueWatching?.length