diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte
index c34a0e7..08c4712 100644
--- a/src/lib/components/Card/Card.svelte
+++ b/src/lib/components/Card/Card.svelte
@@ -7,6 +7,7 @@
 	import ContextMenuItem from '../ContextMenu/ContextMenuItem.svelte';
 	import { setJellyfinItemUnwatched, setJellyfinItemWatched } from '$lib/apis/jellyfin/jellyfinApi';
 	import { library } from '$lib/stores/library.store';
+	import { titlePageModal } from '../TitlePageLayout/TitlePageModal';
 
 	export let tmdbId: number;
 	export let jellyfinId: string | undefined = undefined;
@@ -48,7 +49,7 @@
 			Mark as unwatched
 		</ContextMenuItem>
 	</svelte:fragment>
-	<a
+	<button
 		class={classNames(
 			'rounded overflow-hidden relative shadow-lg shrink-0 aspect-video selectable block hover:text-inherit',
 			{
@@ -57,7 +58,7 @@
 				'w-full': size === 'dynamic'
 			}
 		)}
-		href={`/${type}/${tmdbId}`}
+		on:click={() => titlePageModal.set(tmdbId, type)}
 	>
 		<div
 			style={'width: ' + (progress ? Math.max(progress, 2) : progress) + '%'}
@@ -67,7 +68,7 @@
 			class="h-full w-full opacity-0 hover:opacity-100 transition-opacity flex flex-col justify-between cursor-pointer p-2 px-3 relative z-[1] peer"
 			style={progress > 0 ? 'padding-bottom: 0.6rem;' : ''}
 		>
-			<div>
+			<div class="text-left">
 				<h1 class="font-bold tracking-wider text-lg">{title}</h1>
 				<div class="text-xs text-zinc-300 tracking-wider font-medium">
 					{genres.map((genre) => genre.charAt(0).toUpperCase() + genre.slice(1)).join(', ')}
@@ -119,5 +120,5 @@
 				'bg-[#00000055] peer-hover:bg-darken': !available
 			})}
 		/>
-	</a>
+	</button>
 </ContextMenu>
diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
index 38a2816..fd22448 100644
--- a/src/lib/components/IconButton.svelte
+++ b/src/lib/components/IconButton.svelte
@@ -6,7 +6,7 @@
 
 <button
 	class={classNames(
-		'text-zinc-300 hover:text-zinc-50 p-1 flex items-center justify-center selectable rounded-sm',
+		'text-zinc-300 hover:text-zinc-50 p-1 flex items-center justify-center selectable rounded-sm flex-shrink-0',
 		{
 			'opacity-30 cursor-not-allowed pointer-events-none': disabled,
 			'cursor-pointer': !disabled
diff --git a/src/lib/components/Modal/Modal.ts b/src/lib/components/Modal/Modal.ts
index 0a99d9a..ef4ad3c 100644
--- a/src/lib/components/Modal/Modal.ts
+++ b/src/lib/components/Modal/Modal.ts
@@ -6,6 +6,8 @@ function createModalStack() {
 		top: undefined
 	});
 
+	store.subscribe(console.log);
+
 	return {
 		...store,
 		push: (symbol: Symbol) => {
diff --git a/src/lib/components/Modal/ModalContainer.svelte b/src/lib/components/Modal/ModalContainer.svelte
index d0b3c43..87690fa 100644
--- a/src/lib/components/Modal/ModalContainer.svelte
+++ b/src/lib/components/Modal/ModalContainer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fade, fly } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
 </script>
 
 <div
diff --git a/src/lib/components/RequestModal/SeriesRequestModal.svelte b/src/lib/components/RequestModal/SeriesRequestModal.svelte
index b77d6ff..c479459 100644
--- a/src/lib/components/RequestModal/SeriesRequestModal.svelte
+++ b/src/lib/components/RequestModal/SeriesRequestModal.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
+	import type { SonarrEpisode } from '$lib/apis/sonarr/sonarrApi';
+	import { ChevronRight } from 'radix-icons-svelte';
 	import type { ComponentProps } from 'svelte';
+	import Button from '../Button.svelte';
 	import { createModalProps, type ModalProps } from '../Modal/Modal';
 	import Modal from '../Modal/Modal.svelte';
 	import ModalContainer from '../Modal/ModalContainer.svelte';
 	import ModalContent from '../Modal/ModalContent.svelte';
 	import ModalHeader from '../Modal/ModalHeader.svelte';
-	import RoundedButton from '../RoundedButton.svelte';
 	import EpisodeSelectModal from './EpisodeSelectModal.svelte';
 	import RequestModal from './RequestModal.svelte';
-	import type { SonarrEpisode } from '$lib/apis/sonarr/sonarrApi';
-	import Button from '../Button.svelte';
-	import { ChevronRight } from 'radix-icons-svelte';
 
 	export let modalProps: ModalProps;
 	export let sonarrId: number;
diff --git a/src/lib/components/TitlePageLayout.svelte b/src/lib/components/TitlePageLayout/TitlePageLayout.svelte
similarity index 76%
rename from src/lib/components/TitlePageLayout.svelte
rename to src/lib/components/TitlePageLayout/TitlePageLayout.svelte
index 18126fe..9475f94 100644
--- a/src/lib/components/TitlePageLayout.svelte
+++ b/src/lib/components/TitlePageLayout/TitlePageLayout.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
 	import { TMDB_IMAGES_ORIGINAL, TMDB_POSTER_SMALL } from '$lib/constants';
-	import { DotFilled } from 'radix-icons-svelte';
+	import classNames from 'classnames';
+	import { ChevronLeft, DotFilled, ExternalLink } from 'radix-icons-svelte';
 	import { fade } from 'svelte/transition';
-	import Carousel from './Carousel/Carousel.svelte';
-	import CarouselPlaceholderItems from './Carousel/CarouselPlaceholderItems.svelte';
+	import Carousel from '../Carousel/Carousel.svelte';
+	import CarouselPlaceholderItems from '../Carousel/CarouselPlaceholderItems.svelte';
+	import IconButton from '../IconButton.svelte';
+
+	export let isModal = false;
+	export let handleCloseModal: () => void = () => {};
+
+	export let tmdbId: number;
+	export let type: 'movie' | 'series';
 
 	export let backdropUriCandidates: string[];
 	export let posterPath: string;
@@ -12,10 +20,11 @@
 	export let tagline: string;
 	export let overview: string;
 
+	let topHeight: number;
 	let bottomHeight: number;
 	let windowHeight: number;
 	let imageHeight: number;
-	$: imageHeight = windowHeight - bottomHeight * 0.3;
+	$: imageHeight = isModal && topHeight ? topHeight : windowHeight - bottomHeight * 0.3;
 
 	function getBackdropUri(uris: string[]) {
 		return uris[Math.max(2, Math.floor(uris.length / 8))] || uris[uris.length - 1] || '';
@@ -31,7 +40,10 @@
 		"'); height: " +
 		imageHeight.toFixed() +
 		'px'}
-	class="hidden sm:block fixed inset-x-0 bg-center bg-cover z-[-10]"
+	class={classNames('hidden sm:block inset-x-0 bg-center bg-cover z-[-10]', {
+		absolute: isModal,
+		fixed: !isModal
+	})}
 >
 	<div class="absolute inset-0 bg-darken" />
 </div>
@@ -48,8 +60,32 @@
 	<div class="absolute inset-0 bg-darken" />
 </div>
 
-<div class="flex flex-col h-[85vh] sm:h-screen" transition:fade>
-	<div class="flex-1 relative flex pt-24 px-4 sm:px-8 pb-6">
+<div
+	class={classNames('flex flex-col', {
+		'h-[85vh] sm:h-screen': !isModal,
+		'': isModal
+	})}
+	transition:fade
+>
+	<div
+		class={classNames('flex-1 relative flex pt-24 px-4 sm:px-8 pb-6', {
+			'min-h-[60vh]': isModal
+		})}
+		bind:clientHeight={topHeight}
+	>
+		{#if isModal}
+			<a href={`/${type}/${tmdbId}`} class="absolute top-8 right-4 sm:right-8 z-10">
+				<IconButton>
+					<ExternalLink size={20} />
+				</IconButton>
+			</a>
+			<div class="sm:hidden absolute top-8 left-4 sm:left-8 z-10">
+				<button class="flex items-center" on:click={handleCloseModal}>
+					<ChevronLeft size={20} />
+					Back
+				</button>
+			</div>
+		{/if}
 		<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
@@ -86,7 +122,11 @@
 	</div>
 </div>
 
-<div class="flex flex-col gap-6 bg-stone-950 px-2 sm:px-4 lg:px-8 2xl:px-0 pb-6">
+<div
+	class={classNames('flex flex-col gap-6 bg-stone-950 px-2 sm:px-4 lg:px-8 pb-6', {
+		'2xl:px-0': !isModal
+	})}
+>
 	<div
 		class="grid grid-cols-4 sm:grid-cols-6 gap-4 sm:gap-x-8 rounded-xl max-w-screen-2xl 2xl:mx-auto py-4"
 	>
diff --git a/src/lib/components/TitlePageLayout/TitlePageModal.svelte b/src/lib/components/TitlePageLayout/TitlePageModal.svelte
new file mode 100644
index 0000000..1bc3b43
--- /dev/null
+++ b/src/lib/components/TitlePageLayout/TitlePageModal.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import MoviePage from '../../../routes/movie/[id]/MoviePage.svelte';
+	import SeriesPage from '../../../routes/series/[id]/SeriesPage.svelte';
+	import { createModalProps } from '../Modal/Modal';
+	import Modal from '../Modal/Modal.svelte';
+	import { titlePageModal } from './TitlePageModal';
+	import { onMount } from 'svelte';
+
+	const modalProps = createModalProps(() => {
+		titlePageModal.close();
+	});
+
+	function handleCloseModal() {
+		modalProps.close();
+	}
+
+	onMount(() => {
+		console.log('modal mounted');
+
+		return () => modalProps.close();
+	});
+</script>
+
+{#if $titlePageModal.tmdbId}
+	{@const tmdbId = $titlePageModal.tmdbId}
+	<Modal {...modalProps}>
+		<div
+			class="max-w-screen-2xl overflow-x-hidden overflow-y-scroll h-screen sm:mx-4 lg:mx-12 xl:mx-16 scrollbar-hide"
+		>
+			<div
+				class="relative overflow-hidden"
+				in:fly|global={{ y: 20, duration: 200, delay: 200 }}
+				out:fly|global={{ y: 20, duration: 200 }}
+			>
+				{#if $titlePageModal.type === 'movie'}
+					<MoviePage {tmdbId} isModal={true} {handleCloseModal} />
+				{:else}
+					<SeriesPage {tmdbId} isModal={true} {handleCloseModal} />
+				{/if}
+			</div>
+		</div>
+	</Modal>
+{/if}
diff --git a/src/lib/components/TitlePageLayout/TitlePageModal.ts b/src/lib/components/TitlePageLayout/TitlePageModal.ts
new file mode 100644
index 0000000..c929c4d
--- /dev/null
+++ b/src/lib/components/TitlePageLayout/TitlePageModal.ts
@@ -0,0 +1,18 @@
+import { writable } from 'svelte/store';
+
+type Type = 'movie' | 'series' | undefined;
+
+function createTitlePageModalStore() {
+	const store = writable<{ tmdbId: number | undefined; type: Type }>({
+		tmdbId: undefined,
+		type: undefined
+	});
+
+	return {
+		subscribe: store.subscribe,
+		set: (tmdbId: number | undefined, type: Type) => store.set({ tmdbId, type }),
+		close: () => store.set({ tmdbId: undefined, type: undefined })
+	};
+}
+
+export let titlePageModal = createTitlePageModalStore();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 400f1b5..b2fe6c5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
 	import ModalBackground from '$lib/components/Modal/ModalBackground.svelte';
 	import Navbar from '$lib/components/Navbar/Navbar.svelte';
 	import SetupRequired from '$lib/components/SetupRequired/SetupRequired.svelte';
+	import TitlePageModal from '$lib/components/TitlePageLayout/TitlePageModal.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer/VideoPlayer.svelte';
 	import '../app.css';
 	import type { LayoutData } from './$types';
@@ -17,6 +18,7 @@
 		</main>
 		<VideoPlayer />
 		<ModalBackground />
+		<TitlePageModal />
 
 		<!--	<footer>-->
 		<!--		<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>-->
diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte
index 78012ac..108f2c1 100644
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -76,7 +76,7 @@
 
 <div class="pt-24 bg-black pb-8">
 	<div class="max-w-screen-2xl mx-auto">
-		<Carousel gradientFromColor="from-black" heading="Trending">
+		<Carousel gradientFromColor="from-black" heading="Trending" class="mx-2 sm:mx-8 2xl:mx-0">
 			{#await fetchTrendingProps()}
 				<CarouselPlaceholderItems size="lg" />
 			{:then props}
diff --git a/src/routes/library/+page.svelte b/src/routes/library/+page.svelte
index 66040b8..cbbbb58 100644
--- a/src/routes/library/+page.svelte
+++ b/src/routes/library/+page.svelte
@@ -3,6 +3,7 @@
 	import CardPlaceholder from '$lib/components/Card/CardPlaceholder.svelte';
 	import Carousel from '$lib/components/Carousel/Carousel.svelte';
 	import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
+	import UiCarousel from '$lib/components/Carousel/UICarousel.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { TMDB_IMAGES_ORIGINAL } from '$lib/constants';
 	import { library, type PlayableItem } from '$lib/stores/library.store';
@@ -188,19 +189,23 @@
 <svelte:window on:keydown={handleShortcuts} />
 
 <div
-	class="pt-24 pb-4 px-2 md:px-8 bg-black relative bg-center bg-cover"
 	style={"background-image: url('" +
 		TMDB_IMAGES_ORIGINAL +
 		(downloadingProps[0]?.backdropUri || nextUpProps[0]?.backdropUri) +
-		// '/4ke48uabb0K6uDcLlSED2ZvvYEb.jpg' +
 		"');"}
+	class="absolute inset-0 h-[50vh] bg-center bg-cover"
+>
+	<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-80% to-darken" />
+</div>
+
+<div
+	class="pt-24 pb-4 px-2 md:px-8 relative bg-center bg-cover"
 	in:fade|global={{
 		duration: $settings.animationDuration,
 		delay: $settings.animationDuration
 	}}
 	out:fade|global={{ duration: $settings.animationDuration }}
 >
-	<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-30% to-darken" />
 	<!-- <div class="max-w-screen-2xl mx-auto">
 		<div class="grid grid-cols-1 lg:grid-cols-2 items-center justify-center gap-4">
 			<RadarrStats />
@@ -269,13 +274,15 @@
 	out:fade|global={{ duration: $settings.animationDuration }}
 >
 	<div class="max-w-screen-2xl m-auto flex flex-col gap-4">
-		<div class="flex items-center justify-between">
-			<div class="flex gap-6 text-lg font-medium text-zinc-400">
-				<div class="text-zinc-200">Available</div>
-				<div>Watched</div>
-				<div>Unavailable</div>
-			</div>
-			<div class="flex items-center gap-3">
+		<div class="flex items-center justify-between gap-2">
+			<UiCarousel>
+				<div class="flex gap-6 text-lg font-medium text-zinc-400">
+					<div class="text-zinc-200">Available</div>
+					<div>Watched</div>
+					<div>Unavailable</div>
+				</div>
+			</UiCarousel>
+			<div class="flex items-center gap-3 justify-end flex-shrink-0 flex-initial relative">
 				<IconButton>
 					<div class="flex gap-0.5 items-center text-sm">
 						<span>By Title</span>
diff --git a/src/routes/movie/[id]/MoviePage.svelte b/src/routes/movie/[id]/MoviePage.svelte
index 5e35bd1..3452ac7 100644
--- a/src/routes/movie/[id]/MoviePage.svelte
+++ b/src/routes/movie/[id]/MoviePage.svelte
@@ -9,18 +9,20 @@
 	import Card from '$lib/components/Card/Card.svelte';
 	import { fetchCardTmdbProps } from '$lib/components/Card/card';
 	import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
-	import TitlePageLayout from '$lib/components/TitlePageLayout.svelte';
 	import { createModalProps } from '$lib/components/Modal/Modal';
 	import PeopleCard from '$lib/components/PeopleCard/PeopleCard.svelte';
+	import ProgressBar from '$lib/components/ProgressBar.svelte';
 	import RequestModal from '$lib/components/RequestModal/RequestModal.svelte';
+	import TitlePageLayout from '$lib/components/TitlePageLayout/TitlePageLayout.svelte';
 	import { playerState } from '$lib/components/VideoPlayer/VideoPlayer';
 	import { createLibraryItemStore, library } from '$lib/stores/library.store';
 	import { formatMinutesToTime, formatSize } from '$lib/utils';
 	import { Archive, ChevronRight, Plus } from 'radix-icons-svelte';
 	import type { ComponentProps } from 'svelte';
-	import ProgressBar from '$lib/components/ProgressBar.svelte';
 
 	export let tmdbId: number;
+	export let isModal = false;
+	export let handleCloseModal: () => void = () => {};
 	const tmdbUrl = 'https://www.themoviedb.org/movie/' + tmdbId;
 
 	const itemStore = createLibraryItemStore(tmdbId);
@@ -66,6 +68,10 @@
 
 {#await tmdbMoviePromise then movie}
 	<TitlePageLayout
+		{isModal}
+		{tmdbId}
+		{handleCloseModal}
+		type="movie"
 		title={movie?.title || 'Movie'}
 		backdropUriCandidates={movie?.images?.backdrops?.map((b) => b.file_path || '') || []}
 		posterPath={movie?.poster_path || ''}
diff --git a/src/routes/series/[id]/SeriesPage.svelte b/src/routes/series/[id]/SeriesPage.svelte
index b960ce2..6d33a1c 100644
--- a/src/routes/series/[id]/SeriesPage.svelte
+++ b/src/routes/series/[id]/SeriesPage.svelte
@@ -17,7 +17,7 @@
 	import { createModalProps } from '$lib/components/Modal/Modal';
 	import PeopleCard from '$lib/components/PeopleCard/PeopleCard.svelte';
 	import SeriesRequestModal from '$lib/components/RequestModal/SeriesRequestModal.svelte';
-	import TitlePageLayout from '$lib/components/TitlePageLayout.svelte';
+	import TitlePageLayout from '$lib/components/TitlePageLayout/TitlePageLayout.svelte';
 	import { playerState } from '$lib/components/VideoPlayer/VideoPlayer';
 	import { createLibraryItemStore, library } from '$lib/stores/library.store';
 	import { capitalize, formatMinutesToTime, formatSize, log } from '$lib/utils';
@@ -26,6 +26,8 @@
 	import type { ComponentProps } from 'svelte';
 
 	export let tmdbId: number;
+	export let isModal = false;
+	export let handleCloseModal: () => void = () => {};
 	const tmdbUrl = 'https://www.themoviedb.org/tv/' + tmdbId;
 
 	const itemStore = createLibraryItemStore(tmdbId);
@@ -146,6 +148,10 @@
 
 {#await tmdbSeriesPromise then series}
 	<TitlePageLayout
+		{tmdbId}
+		type="series"
+		{isModal}
+		{handleCloseModal}
 		backdropUriCandidates={series?.images?.backdrops?.map((b) => b.file_path || '') || []}
 		posterPath={series?.poster_path || ''}
 		title={series?.name || ''}
@@ -179,7 +185,12 @@
 		</svelte:fragment>
 
 		<div slot="episodes-carousel">
-			<Carousel gradientFromColor="from-stone-950" class="px-2 sm:px-4 lg:px-8 2xl:px-0">
+			<Carousel
+				gradientFromColor="from-stone-950"
+				class={classNames('px-2 sm:px-4 lg:px-8', {
+					'2xl:px-0': !isModal
+				})}
+			>
 				<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)}