diff --git a/src/lib/components/Carousel/Carousel.svelte b/src/lib/components/Carousel/Carousel.svelte
index bc88276..d82b474 100644
--- a/src/lib/components/Carousel/Carousel.svelte
+++ b/src/lib/components/Carousel/Carousel.svelte
@@ -40,7 +40,7 @@
 
 	<div class="relative">
 		<div
-			class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative scrollbar-hide"
+			class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative scrollbar-hide p-1"
 			bind:this={carousel}
 			tabindex="-1"
 			on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
diff --git a/src/lib/components/Carousel/UICarousel.svelte b/src/lib/components/Carousel/UICarousel.svelte
index 26c44de..f64c3c5 100644
--- a/src/lib/components/Carousel/UICarousel.svelte
+++ b/src/lib/components/Carousel/UICarousel.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div
-	class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative')}
+	class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative p-1')}
 	style={`mask-image: linear-gradient(to right, transparent 0%, ${
 		fadeLeft ? '' : 'black 0%, '
 	}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
index fd22448..c7472d9 100644
--- a/src/lib/components/IconButton.svelte
+++ b/src/lib/components/IconButton.svelte
@@ -10,7 +10,8 @@
 		{
 			'opacity-30 cursor-not-allowed pointer-events-none': disabled,
 			'cursor-pointer': !disabled
-		}
+		},
+		$$restProps.class
 	)}
 	on:click|stopPropagation
 >
diff --git a/src/lib/components/RequestModal/RequestModal.svelte b/src/lib/components/RequestModal/RequestModal.svelte
index 3ef0793..ce1313a 100644
--- a/src/lib/components/RequestModal/RequestModal.svelte
+++ b/src/lib/components/RequestModal/RequestModal.svelte
@@ -110,7 +110,9 @@
 		<div class="text-sm text-zinc-200 opacity-50 font-light p-4">Loading...</div>
 	{:then { releases, filtered, releasesSkipped }}
 		{#if showAllReleases ? releases?.length : filtered?.length}
-			<div class="flex flex-col divide-y divide-zinc-700 max-h-[60vh] overflow-y-scroll">
+			<div
+				class="flex flex-col divide-y divide-zinc-700 max-h-[60vh] overflow-y-scroll scrollbar-hide"
+			>
 				{#each showAllReleases ? releases : filtered as release}
 					<div>
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/src/lib/components/RequestModal/SeriesRequestModal.svelte b/src/lib/components/RequestModal/SeriesRequestModal.svelte
index eb4b440..e768bda 100644
--- a/src/lib/components/RequestModal/SeriesRequestModal.svelte
+++ b/src/lib/components/RequestModal/SeriesRequestModal.svelte
@@ -20,7 +20,8 @@
 				seasonPack: {
 					sonarrId,
 					seasonNumber
-				}
+				},
+				groupId: modalId
 			},
 			modalId
 		);
diff --git a/src/lib/components/VideoPlayer/VideoPlayer.svelte b/src/lib/components/VideoPlayer/VideoPlayer.svelte
index 767e676..a3a76da 100644
--- a/src/lib/components/VideoPlayer/VideoPlayer.svelte
+++ b/src/lib/components/VideoPlayer/VideoPlayer.svelte
@@ -18,7 +18,7 @@
 
 	export let modalId: Symbol;
 
-	let uiVisible = false;
+	let uiVisible = true;
 
 	let video: HTMLVideoElement;
 	let mouseMovementTimeout: NodeJS.Timeout;
@@ -37,7 +37,15 @@
 					return;
 				}
 
+				video.poster = item?.BackdropImageTags?.length
+					? `http://jellyfin.home/Items/${item?.Id}/Images/Backdrop?quality=100&tag=${item?.BackdropImageTags?.[0]}`
+					: '';
+
 				if (!directPlay) {
+					if (!Hls.isSupported()) {
+						throw new Error('HLS is not supported');
+					}
+
 					const hls = new Hls();
 
 					hls.loadSource(PUBLIC_JELLYFIN_URL + playbackUri);
@@ -76,32 +84,31 @@
 	}
 
 	function handleMouseMove() {
-		uiVisible = true;
-		clearTimeout(mouseMovementTimeout);
-		mouseMovementTimeout = setTimeout(() => {
-			uiVisible = false;
-		}, 2000);
+		// uiVisible = true;
+		// clearTimeout(mouseMovementTimeout);
+		// mouseMovementTimeout = setTimeout(() => {
+		// 	uiVisible = false;
+		// }, 2000);
 	}
 
 	onDestroy(() => clearInterval(progressInterval));
 
 	$: {
 		if (video && $playerState.jellyfinId) {
-			if (!Hls.isSupported()) {
-				throw new Error('HLS is not supported');
-			}
-
 			if (video.src === '') fetchPlaybackInfo($playerState.jellyfinId);
 		}
 	}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="bg-black w-screen h-screen relative" on:mousemove={handleMouseMove}>
+<div
+	class="bg-black w-screen h-screen relative flex items-center justify-center"
+	on:mousemove={handleMouseMove}
+>
 	<!-- svelte-ignore a11y-media-has-caption -->
-	<video controls bind:this={video} class="w-full h-full inset-0" />
+	<video controls bind:this={video} class="sm:w-full sm:h-full" />
 	<div
-		class={classNames('absolute top-4 right-8 transition-opacity', {
+		class={classNames('absolute top-4 right-8 transition-opacity z-50', {
 			'opacity-0': !uiVisible,
 			'opacity-100': uiVisible
 		})}
diff --git a/src/lib/stores/library.store.ts b/src/lib/stores/library.store.ts
index e86bec2..ddfb0ed 100644
--- a/src/lib/stores/library.store.ts
+++ b/src/lib/stores/library.store.ts
@@ -32,7 +32,7 @@ export interface PlayableItem {
 	posterUri: string;
 	download?: {
 		progress: number;
-		completionTime: string;
+		completionTime: string | undefined;
 	};
 	continueWatching?: {
 		progress: number;
@@ -50,8 +50,6 @@ export interface PlayableItem {
 	radarrDownloads?: RadarrDownload[];
 	sonarrSeries?: SonarrSeries;
 	sonarrDownloads?: SonarrDownload[];
-	// tmdbMovie?: TmdbMovieFull2;
-	// tmdbSeries?: TmdbSeriesFull2;
 }
 
 export interface Library {
@@ -101,10 +99,7 @@ async function getLibrary(): Promise<Library> {
 				? ((radarrDownload.size - radarrDownload.sizeleft) / radarrDownload.size) * 100
 				: undefined;
 		const completionTime = radarrDownload?.estimatedCompletionTime || undefined;
-		const download =
-			downloadProgress && completionTime
-				? { progress: downloadProgress, completionTime }
-				: undefined;
+		const download = downloadProgress ? { progress: downloadProgress, completionTime } : undefined;
 
 		const length = jellyfinItem?.RunTimeTicks
 			? jellyfinItem.RunTimeTicks / 10_000_000 / 60
@@ -117,14 +112,6 @@ async function getLibrary(): Promise<Library> {
 				? { length, progress: watchingProgress }
 				: undefined;
 
-		// const tmdbMovie = await getTmdbMovie(radarrMovie.tmdbId || 0);
-		// const backdropUrl = (
-		// 	tmdbMovie?.images?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
-		// 	tmdbMovie?.images?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
-		// 	tmdbMovie?.images?.backdrops?.find((b) => b.iso_639_1) ||
-		// 	tmdbMovie?.images?.backdrops?.[0]
-		// )?.file_path;
-
 		const backdropUrl = await getTmdbMovieBackdrop(radarrMovie.tmdbId || 0);
 		const posterUri = await getTmdbMoviePoster(radarrMovie.tmdbId || 0);
 
@@ -141,7 +128,6 @@ async function getLibrary(): Promise<Library> {
 			jellyfinItem,
 			radarrMovie,
 			radarrDownloads: itemRadarrDownloads
-			// tmdbMovie
 		};
 	});
 
@@ -159,10 +145,7 @@ async function getLibrary(): Promise<Library> {
 				? ((sonarrDownload.size - sonarrDownload.sizeleft) / sonarrDownload.size) * 100
 				: undefined;
 		const completionTime = sonarrDownload?.estimatedCompletionTime || undefined;
-		const download =
-			downloadProgress && completionTime
-				? { progress: downloadProgress, completionTime }
-				: undefined;
+		const download = downloadProgress ? { progress: downloadProgress, completionTime } : undefined;
 
 		const nextJellyfinEpisode = jellyfinItem
 			? jellyfinContinueWatching.find((i) => i.SeriesId === jellyfinItem?.Id) ||
@@ -183,14 +166,6 @@ async function getLibrary(): Promise<Library> {
 			: undefined;
 		const tmdbId = tmdbItem?.id || undefined;
 
-		// const tmdbSeries = await getTmdbSeries(tmdbId || 0);
-		// const backdropUrl = (
-		// 	tmdbSeries?.images?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
-		// 	tmdbSeries?.images?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
-		// 	tmdbSeries?.images?.backdrops?.find((b) => b.iso_639_1) ||
-		// 	tmdbSeries?.images?.backdrops?.[0]
-		// )?.file_path;
-
 		const backdropUrl = await getTmdbSeriesBackdrop(tmdbId || 0);
 		const posterUri = tmdbItem?.poster_path || '';
 
@@ -209,7 +184,6 @@ async function getLibrary(): Promise<Library> {
 			sonarrDownloads: itemSonarrDownloads,
 			jellyfinEpisodes: jellyfinEpisodes.filter((i) => i.SeriesId === jellyfinItem?.Id),
 			nextJellyfinEpisode
-			// tmdbSeries
 		};
 	});
 
@@ -232,7 +206,7 @@ let delayedRefreshTimeout: NodeJS.Timeout;
 function createLibraryStore() {
 	const { update, set, ...library } = writable<Promise<Library>>(getLibrary()); //TODO promise to undefined
 
-	async function filterNotInLibrary<T extends any>(toFilter: T[], getTmdbId: (item: T) => any) {
+	async function filterNotInLibrary<T>(toFilter: T[], getTmdbId: (item: T) => number) {
 		const libraryData = await get(library);
 
 		return toFilter.filter((item) => !(getTmdbId(item) in libraryData.items));
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5de3124..f6ba6d1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -57,31 +57,31 @@
 	}
 </script>
 
-{#await tmdbPopularMoviesPromise}
-	<div class="h-screen" />
-{:then movies}
-	{@const movie = movies[showcaseIndex]}
-	{#key movie?.id}
-		<TitleShowcase
-			tmdbId={movie?.id || 0}
-			type="movie"
-			title={movie?.title || ''}
-			genres={movie?.genres?.map((g) => g.name || '') || []}
-			runtime={movie?.runtime || 0}
-			releaseDate={new Date(movie?.release_date || Date.now())}
-			tmdbRating={movie?.vote_average || 0}
-			trailerId={movie?.videos?.results?.find((v) => v.site === 'YouTube' && v.type === 'Trailer')
-				?.key}
-			director={movie?.credits?.crew?.find((c) => c.job === 'Director')?.name}
-			backdropUri={movie?.backdrop_path || ''}
-			posterUri={movie?.poster_path || ''}
-			{onPrevious}
-			{onNext}
-			{showcaseIndex}
-			showcaseLength={movies.length}
-		/>
-	{/key}
-{/await}
+<div class="h-[80vh] sm:h-screen">
+	{#await tmdbPopularMoviesPromise then movies}
+		{@const movie = movies[showcaseIndex]}
+		{#key movie?.id}
+			<TitleShowcase
+				tmdbId={movie?.id || 0}
+				type="movie"
+				title={movie?.title || ''}
+				genres={movie?.genres?.map((g) => g.name || '') || []}
+				runtime={movie?.runtime || 0}
+				releaseDate={new Date(movie?.release_date || Date.now())}
+				tmdbRating={movie?.vote_average || 0}
+				trailerId={movie?.videos?.results?.find((v) => v.site === 'YouTube' && v.type === 'Trailer')
+					?.key}
+				director={movie?.credits?.crew?.find((c) => c.job === 'Director')?.name}
+				backdropUri={movie?.backdrop_path || ''}
+				posterUri={movie?.poster_path || ''}
+				{onPrevious}
+				{onNext}
+				{showcaseIndex}
+				showcaseLength={movies.length}
+			/>
+		{/key}
+	{/await}
+</div>
 
 <div class="py-8">
 	<Carousel gradientFromColor="from-stone-950" class="px-4 lg:px-16 2xl:px-32">
diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte
index a845246..9d57824 100644
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -70,11 +70,9 @@
 					subtitle: actor.known_for_department || ''
 				}))
 		);
-
-	const headerStyle = 'uppercase tracking-widest font-bold';
 </script>
 
-<div class="pt-24 bg-black pb-8">
+<div class="pt-24 bg-stone-950 pb-8">
 	<div class="max-w-screen-2xl mx-auto">
 		<Carousel gradientFromColor="from-black" heading="Trending" class="mx-2 sm:mx-8 2xl:mx-0">
 			{#await fetchTrendingProps()}
diff --git a/src/routes/library/+page.svelte b/src/routes/library/+page.svelte
index 5a1aef7..26b8851 100644
--- a/src/routes/library/+page.svelte
+++ b/src/routes/library/+page.svelte
@@ -20,6 +20,7 @@
 	let searchInput: HTMLInputElement | undefined;
 	let searchInputValue = '';
 
+	let openNextUpTab: 'downloading' | 'nextUp' = 'downloading';
 	let openTab: 'available' | 'watched' | 'unavailable' = 'available';
 
 	let items: PlayableItem[] = [];
@@ -211,19 +212,35 @@
 >
 	<div class="relative grid grid-cols-3 grid-rows-3 z-[1] max-w-screen-2xl mx-auto">
 		<div class="col-start-1 row-start-2 row-span-2 col-span-3 flex justify-end flex-col">
-			{#if downloadingProps.length}
-				<Carousel heading="Downloading Queue">
-					{#each downloadingProps as props (props.tmdbId)}
-						<Card {...props} size="md" />
-					{/each}
-				</Carousel>
-			{:else}
-				<Carousel heading="Next Up">
-					{#each nextUpProps as props (props.tmdbId)}
-						<Card {...props} size="md" />
-					{:else}
-						<CarouselPlaceholderItems />
-					{/each}
+			{#if downloadingProps.length || nextUpProps.length}
+				<Carousel>
+					<div slot="title" class="flex items-center gap-6 font-medium text-xl text-zinc-400">
+						<button
+							class={classNames('hover:text-zinc-300 selectable rounded px-1 -mx-1', {
+								'text-zinc-200': openNextUpTab === 'downloading'
+							})}
+							on:click={() => (openNextUpTab = 'downloading')}
+						>
+							Download Queue
+						</button>
+						<button
+							class={classNames('hover:text-zinc-300 selectable rounded px-1 -mx-1', {
+								'text-zinc-200': openNextUpTab === 'nextUp'
+							})}
+							on:click={() => (openNextUpTab = 'nextUp')}
+						>
+							Next Up
+						</button>
+					</div>
+					{#if downloadingProps.length && openNextUpTab === 'downloading'}
+						{#each downloadingProps as props (props.tmdbId)}
+							<Card {...props} size="md" />
+						{/each}
+					{:else if openNextUpTab === 'nextUp'}
+						{#each nextUpProps as props (props.tmdbId)}
+							<Card {...props} size="md" />
+						{/each}
+					{/if}
 				</Carousel>
 			{/if}
 		</div>
@@ -243,19 +260,29 @@
 			<UiCarousel>
 				<div class="flex gap-6 text-lg font-medium text-zinc-400">
 					<button
-						class={classNames('hover:text-zinc-300', { 'text-zinc-200': openTab === 'available' })}
-						on:click={() => (openTab = 'available')}>Available</button
+						class={classNames('hover:text-zinc-300 selectable rounded px-1 -mx-1', {
+							'text-zinc-200': openTab === 'available'
+						})}
+						on:click={() => (openTab = 'available')}
 					>
+						Available
+					</button>
 					<button
-						class={classNames('hover:text-zinc-300', { 'text-zinc-200': openTab === 'watched' })}
-						on:click={() => (openTab = 'watched')}>Watched</button
+						class={classNames('hover:text-zinc-300 selectable rounded px-1 -mx-1', {
+							'text-zinc-200': openTab === 'watched'
+						})}
+						on:click={() => (openTab = 'watched')}
 					>
+						Watched
+					</button>
 					<button
-						class={classNames('hover:text-zinc-300', {
+						class={classNames('hover:text-zinc-300 selectable rounded px-1 -mx-1', {
 							'text-zinc-200': openTab === 'unavailable'
 						})}
-						on:click={() => (openTab = 'unavailable')}>Unavailable</button
+						on:click={() => (openTab = 'unavailable')}
 					>
+						Unavailable
+					</button>
 				</div>
 			</UiCarousel>
 			<div class="flex items-center gap-3 justify-end flex-shrink-0 flex-initial relative">
@@ -272,13 +299,17 @@
 		</div>
 
 		{#if loading}
-			<div class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+			<div
+				class="grid gap-x-2 sm:gap-x-4 gap-y-4 sm:gap-y-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+			>
 				{#each [...Array(20).keys()] as index (index)}
 					<CardPlaceholder size="dynamic" {index} />
 				{/each}
 			</div>
 		{:else}
-			<div class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+			<div
+				class="grid gap-x-2 sm:gap-x-4 gap-y-4 sm:gap-y-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+			>
 				{#if openTab === 'available'}
 					{#each availableProps as props (props.tmdbId)}
 						<Card {...props} />
diff --git a/src/routes/movie/[id]/MoviePage.svelte b/src/routes/movie/[id]/MoviePage.svelte
index 606c343..2c8cf44 100644
--- a/src/routes/movie/[id]/MoviePage.svelte
+++ b/src/routes/movie/[id]/MoviePage.svelte
@@ -257,11 +257,13 @@
 					<div class="col-span-2 lg:col-span-1">
 						<p class="text-zinc-400 text-sm">Download Completed In</p>
 						<h2 class="font-medium">
-							{formatMinutesToTime(
-								(new Date($itemStore.item?.download.completionTime).getTime() - Date.now()) /
-									1000 /
-									60
-							)}
+							{$itemStore.item?.download.completionTime
+								? formatMinutesToTime(
+										(new Date($itemStore.item?.download.completionTime).getTime() - Date.now()) /
+											1000 /
+											60
+								  )
+								: 'Stalled'}
 						</h2>
 					</div>
 				{/if}
diff --git a/src/routes/series/[id]/SeriesPage.svelte b/src/routes/series/[id]/SeriesPage.svelte
index 1e51cd5..8f51a40 100644
--- a/src/routes/series/[id]/SeriesPage.svelte
+++ b/src/routes/series/[id]/SeriesPage.svelte
@@ -322,11 +322,13 @@
 					<div class="col-span-2 lg:col-span-1">
 						<p class="text-zinc-400 text-sm">Download Completed In</p>
 						<h2 class="font-medium">
-							{formatMinutesToTime(
-								(new Date($itemStore.item?.download.completionTime).getTime() - Date.now()) /
-									1000 /
-									60
-							)}
+							{$itemStore.item?.download.completionTime
+								? formatMinutesToTime(
+										(new Date($itemStore.item?.download.completionTime).getTime() - Date.now()) /
+											1000 /
+											60
+								  )
+								: 'Stalled'}
 						</h2>
 					</div>
 				{/if}