diff --git a/backend/package-lock.json b/backend/package-lock.json
index dcbab6b..1c59a3e 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -25,7 +25,6 @@
         "@types/express-http-proxy": "^1.6.6",
         "cache-manager": "^5.7.6",
         "express-http-proxy": "^2.0.0",
-        "plugin-types": "file:plugins/plugin-types",
         "reflect-metadata": "^0.2.1",
         "rxjs": "^7.8.1",
         "sqlite3": "^5.1.7",
@@ -8840,10 +8839,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/plugin-types": {
-      "resolved": "plugins/plugin-types",
-      "link": true
-    },
     "node_modules/pluralize": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -11644,7 +11639,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@aleksilassila/reiverr-plugin": "*",
+        "@aleksilassila/reiverr-plugin": "^1.0.0",
         "@types/axios": "^0.14.4",
         "axios": "^1.7.8",
         "express-http-proxy": "^2.1.1",
@@ -11654,6 +11649,7 @@
     },
     "plugins/plugin-types": {
       "version": "1.0.0",
+      "extraneous": true,
       "license": "ISC",
       "devDependencies": {}
     },
diff --git a/src/lib/components/HeroShowcase/HeroShowcase.svelte b/src/lib/components/HeroShowcase/HeroShowcase.svelte
index 32b5465..d486923 100644
--- a/src/lib/components/HeroShowcase/HeroShowcase.svelte
+++ b/src/lib/components/HeroShowcase/HeroShowcase.svelte
@@ -1,19 +1,30 @@
 <script lang="ts">
-	import classNames from 'classnames';
-	import { DotFilled } from 'radix-icons-svelte';
+	import HeroTitleInfo from '$lib/pages/TitlePages/HeroTitleInfo.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { get } from 'svelte/store';
 	import { TMDB_IMAGES_ORIGINAL, TMDB_POSTER_SMALL } from '../../constants';
 	import { registrars } from '../../selectable.js';
 	import HeroCarousel from '../HeroCarousel/HeroCarousel.svelte';
-	import type { ShowcaseItemProps } from './HeroShowcase';
+
+	type ShowcaseItem = {
+		id: number;
+		type: 'movie' | 'tv';
+		posterUri: string;
+		backdropUri: string;
+		trailerUrl?: string;
+		title: string;
+		overview: string;
+		infoProperties: { label: string; href?: string }[];
+		url?: string;
+	};
+
+	export let items: Promise<ShowcaseItem[]> = Promise.resolve([]);
 
 	const dispatch = createEventDispatcher<{
-		select: ShowcaseItemProps | undefined;
+		select: ShowcaseItem | undefined;
 	}>();
 
-	export let items: Promise<ShowcaseItemProps[]> = Promise.resolve([]);
-	let awaitedItems: undefined | ShowcaseItemProps[];
+	let awaitedItems: undefined | ShowcaseItem[];
 	items.then((items) => (awaitedItems = items));
 
 	function openItem() {
@@ -24,7 +35,7 @@
 </script>
 
 <HeroCarousel
-	urls={items.then((items) => items.map((i) => `${TMDB_IMAGES_ORIGINAL}${i.backdropUrl}`))}
+	urls={items.then((items) => items.map((i) => `${TMDB_IMAGES_ORIGINAL}${i.backdropUri}`))}
 	bind:index={showcaseIndex}
 	on:enter
 	on:navigate={({ detail }) => {
@@ -50,46 +61,20 @@
 				<div class="flex-1 flex items-end">
 					<div class="mr-8">
 						<!--						<Card orientation="portrait" backdropUrl={TMDB_POSTER_SMALL + item.posterUrl} />-->
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
 							class="bg-center bg-cover rounded-xl w-44 h-64 cursor-pointer"
-							style={`background-image: url("${TMDB_POSTER_SMALL + item.posterUrl}")`}
+							style={`background-image: url("${TMDB_POSTER_SMALL + item.posterUri}")`}
 							on:click={openItem}
 						/>
 					</div>
 					<div class="flex flex-col">
-						<div
-							class={classNames(
-								'text-left font-medium tracking-wider text-stone-200 hover:text-amber-200 max-w-xl mt-2',
-								{
-									'text-4xl sm:text-5xl 2xl:text-6xl': item?.title.length < 15,
-									'text-3xl sm:text-4xl 2xl:text-5xl': item?.title.length >= 15
-								}
-							)}
-							on:click={openItem}
-						>
-							{item?.title}
-						</div>
-						<div
-							class="flex items-center gap-1 uppercase text-zinc-300 font-semibold tracking-wider mt-2"
-						>
-							<p class="flex-shrink-0">{item.year}</p>
-							<!-- <DotFilled />
-								<p class="flex-shrink-0">{item.runtime}</p> -->
-							<DotFilled />
-							<p class="flex-shrink-0"><a href={item.url}>{item.rating} TMDB</a></p>
-						</div>
-						<div class="text-stone-300 font-medium line-clamp-3 opacity-75 max-w-2xl mt-4">
-							{item.overview}
-						</div>
-						<!-- <div class="flex items-center">
-								{#each item?.genres.slice(0, 3) as genre}
-									<span
-										class="backdrop-blur-lg rounded-full bg-zinc-400 bg-opacity-20 p-1.5 px-4 font-medium text-sm flex-grow-0 mr-4"
-									>
-										{genre}
-									</span>
-								{/each}
-							</div> -->
+						<HeroTitleInfo
+							title={item.title}
+							properties={item.infoProperties}
+							overview={item.overview ?? ''}
+							onClickTitle={openItem}
+						/>
 					</div>
 				</div>
 			{/if}
diff --git a/src/lib/components/HeroShowcase/HeroShowcase.ts b/src/lib/components/HeroShowcase/HeroShowcase.ts
deleted file mode 100644
index db0be36..0000000
--- a/src/lib/components/HeroShowcase/HeroShowcase.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { formatMinutesToTime } from '../../utils';
-import type { tmdbApi } from '../../apis/tmdb/tmdb-api';
-
-export type RatingSource = 'tmdb'; // TODO: Add more rating sources & move elsewhere
-
-export type ShowcaseItemProps = {
-	posterUrl: string;
-	backdropUrl: string;
-
-	id: number;
-	trailerUrl?: string;
-
-	title: string;
-	overview?: string;
-	year?: number;
-	runtime?: string;
-	rating?: string;
-	ratingSource?: RatingSource;
-	genres: string[];
-	url?: string;
-};
-
-export async function getShowcasePropsFromTmdbMovie(
-	response: Awaited<ReturnType<typeof tmdbApi.getPopularMovies>>
-): Promise<ShowcaseItemProps[]> {
-	return response.slice(0, 10).map((movie) => ({
-		id: movie.id || 0,
-		title: movie.title || '',
-		posterUrl: movie.poster_path || '',
-		backdropUrl: movie.backdrop_path || '',
-		rating: movie.vote_average?.toFixed(1) || '0',
-		genres: [], //(movie as any)?.genres?.map((genre: any) => genre?.name),
-		year: movie.release_date ? new Date(movie.release_date).getFullYear() : undefined,
-		runtime: formatMinutesToTime((movie as any).runtime || 0),
-		ratingSource: 'tmdb',
-		trailerUrl: '',
-		url: `https://www.themoviedb.org/movie/${movie.id}`,
-		overview: movie.overview || ''
-	}));
-}
-
-export async function getShowcasePropsFromTmdbSeries(
-	response: Awaited<ReturnType<typeof tmdbApi.getPopularSeries>>
-): Promise<ShowcaseItemProps[]> {
-	return response.slice(0, 10).map((series) => ({
-		id: series.id || 0,
-		title: series.name || '',
-		posterUrl: series.poster_path || '',
-		backdropUrl: series.backdrop_path || '',
-		rating: series.vote_average?.toFixed(1) || '0',
-		genres: [], //(series as any)?.genres?.map((genre: any) => genre?.name),
-		year: series.first_air_date ? new Date(series.first_air_date).getFullYear() : undefined,
-		runtime: formatMinutesToTime((series as any).runtime || 0),
-		ratingSource: 'tmdb',
-		trailerUrl: '',
-		url: `https://www.themoviedb.org/movie/${series.id}`,
-		overview: series.overview || ''
-	}));
-}
diff --git a/src/lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte b/src/lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte
new file mode 100644
index 0000000..190d2f0
--- /dev/null
+++ b/src/lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { TmdbMovie2 } from '$lib/apis/tmdb/tmdb-api';
+	import { formatMinutesToTime, formatThousands } from '$lib/utils';
+	import { navigate } from '../StackRouter/StackRouter';
+	import HeroShowcase from './HeroShowcase.svelte';
+
+	export let movies: Promise<TmdbMovie2[]>;
+	$: items = movies.then((movies) =>
+		movies.map((movie) => ({
+			id: movie.id ?? 0,
+			type: 'movie' as const,
+			posterUri: movie.poster_path ?? '',
+			backdropUri: movie.backdrop_path ?? '',
+			title: `${movie.title}`,
+			overview: movie.overview ?? '',
+			infoProperties: [
+				...(movie.release_date
+					? [{ label: new Date(movie.release_date).getFullYear().toString() }]
+					: []),
+				...(movie.runtime ? [{ label: formatMinutesToTime(movie.runtime) }] : []),
+				...(movie.vote_average
+					? [
+							{
+								label: `${movie.vote_average.toFixed(1)} TMDB (${formatThousands(
+									movie.vote_count ?? 0
+								)})`,
+								href: `https://www.themoviedb.org/movie/${movie.id}`
+							}
+					  ]
+					: []),
+				...(movie.genres ? [{ label: movie.genres.map((genre) => genre.name).join(', ') }] : [])
+			]
+		}))
+	);
+</script>
+
+<HeroShowcase on:select={({ detail }) => navigate(`/movie/${detail?.id}`)} {items} />
diff --git a/src/lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte b/src/lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte
new file mode 100644
index 0000000..792692f
--- /dev/null
+++ b/src/lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { TmdbMovie2, TmdbSeries2 } from '$lib/apis/tmdb/tmdb-api';
+	import { formatMinutesToTime, formatThousands } from '$lib/utils';
+	import { navigate } from '../StackRouter/StackRouter';
+	import HeroShowcase from './HeroShowcase.svelte';
+
+	export let series: Promise<TmdbSeries2[]>;
+	$: items = series.then((series) =>
+		series.map((series) => ({
+			id: series.id ?? 0,
+			type: 'movie' as const,
+			posterUri: series.poster_path ?? '',
+			backdropUri: series.backdrop_path ?? '',
+			title: `${series.name}`,
+			overview: series.overview ?? '',
+			infoProperties: [
+				...(series.status !== 'Ended'
+					? [{ label: `Since ${new Date(series.first_air_date ?? 0).getFullYear()}` }]
+					: series.last_air_date
+					? [{ label: `Ended ${new Date(series.last_air_date).getFullYear()}` }]
+					: []),
+				...(series.vote_average
+					? [
+							{
+								label: `${series.vote_average.toFixed(1)} TMDB (${formatThousands(
+									series.vote_count ?? 0
+								)})`,
+								href: `https://www.themoviedb.org/tv/${series.id}`
+							}
+					  ]
+					: []),
+				...(series.genres ? [{ label: series.genres.map((genre) => genre.name).join(', ') }] : [])
+			]
+		}))
+	);
+</script>
+
+<HeroShowcase on:select={({ detail }) => navigate(`/series/${detail?.id}`)} {items} />
diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
index aaa0e06..0cd47a3 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 flex-shrink-0 bg-transparent',
+		'text-zinc-300 hover:text-zinc-50 p-1 flex items-center justify-center rounded-sm flex-shrink-0 bg-transparent',
 		{
 			'opacity-30 cursor-not-allowed pointer-events-none': disabled,
 			'cursor-pointer': !disabled
diff --git a/src/lib/components/Sidebar/Sidebar.svelte b/src/lib/components/Sidebar/Sidebar.svelte
index 09ccc21..2e5ee17 100644
--- a/src/lib/components/Sidebar/Sidebar.svelte
+++ b/src/lib/components/Sidebar/Sidebar.svelte
@@ -105,7 +105,7 @@
 	<!-- Background -->
 	<div
 		class={classNames(
-			'absolute inset-y-0 left-0 w-[25vw] transition-opacity bg-gradient-to-r from-secondary-900 to-transparent',
+			'absolute inset-y-0 left-0 min-w-[40rem] w-[25vw] transition-opacity bg-gradient-to-r from-secondary-900 to-transparent',
 			{
 				'opacity-0': !$isNavBarOpen,
 				'group-hover:opacity-100 pointer-events-none': true
@@ -146,7 +146,7 @@
 			<Person class="w-8 h-8" />
 			<span
 				class={classNames(
-					'text-xl font-medium transition-opacity flex items-center absolute inset-y-0 left-20',
+					'text-xl font-medium transition-opacity flex items-center absolute inset-y-0 left-20 text-nowrap',
 					{
 						'opacity-0 pointer-events-none': $isNavBarOpen === false,
 						'group-hover:opacity-100 group-hover:pointer-events-auto': true
diff --git a/src/lib/pages/MoviesHomePage.svelte b/src/lib/pages/MoviesHomePage.svelte
index 7d94115..6643994 100644
--- a/src/lib/pages/MoviesHomePage.svelte
+++ b/src/lib/pages/MoviesHomePage.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
+	import TmdbMoviesHeroShowcase from '$lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte';
 	import { libraryItemsDataStore } from '$lib/stores/data.store';
 	import { derived } from 'svelte/store';
-	import { jellyfinApi } from '../apis/jellyfin/jellyfin-api';
 	import { TMDB_MOVIE_GENRES, TmdbApi, tmdbApi } from '../apis/tmdb/tmdb-api';
 	import TmdbCard from '../components/Card/TmdbCard.svelte';
 	import Carousel from '../components/Carousel/Carousel.svelte';
 	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
-	import { getShowcasePropsFromTmdbMovie } from '../components/HeroShowcase/HeroShowcase';
-	import HeroShowcase from '../components/HeroShowcase/HeroShowcase.svelte';
-	import { navigate } from '../components/StackRouter/StackRouter';
 	import { scrollIntoView } from '../selectable';
 	import { formatDateToYearMonthDay } from '../utils';
 
@@ -32,17 +29,14 @@
 		return movies.map((i) => i.metadata);
 	});
 
-	// const continueWatching = jellyfinApi.getContinueWatching('movie');
-	// const recentlyAdded = jellyfinApi.getRecentlyAdded('movie');
-
 	const popularMovies = tmdbApi.getPopularMovies();
 
 	const newDigitalReleases = getDigitalReleases();
 	const upcomingMovies = getUpcomingMovies();
 	const recommendedMovies = tmdbApi.getRecommendedMovies();
 	const mostRecommendedGenres: Promise<number[]> = recommendedMovies.then(({ genreIdToMovie }) => {
-		const allGenres = Object.keys(genreIdToMovie);
-		allGenres.sort((a, b) => (genreIdToMovie[b]?.length || 0) - (genreIdToMovie[a].length || 0));
+		const allGenres = Object.keys(genreIdToMovie).map((k) => Number(k));
+		allGenres.sort((a, b) => (genreIdToMovie[b]?.length || 0) - (genreIdToMovie[a]?.length || 0));
 		return allGenres;
 	});
 
@@ -82,11 +76,7 @@
 
 <DetachedPage class="flex flex-col relative">
 	<div class="h-[calc(100vh-12rem)] flex px-32">
-		<HeroShowcase
-			items={recommendedMovies.then(({ top10 }) => getShowcasePropsFromTmdbMovie(top10))}
-			on:enter={scrollIntoView({ top: 0 })}
-			on:select={({ detail }) => navigate(`/movie/${detail?.id}`)}
-		/>
+		<TmdbMoviesHeroShowcase movies={recommendedMovies.then(({ top10 }) => top10)} />
 	</div>
 	<div class="my-16 space-y-8 relative z-10">
 		{#if $libraryContinueWatching.length}
@@ -98,28 +88,6 @@
 			</Carousel>
 		{/if}
 
-		<!-- {#await continueWatching then continueWatching}
-			{#if continueWatching?.length}
-				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">Continue Watching</span>
-					{#each continueWatching as item (item.Id)}
-						<JellyfinCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
-					{/each}
-				</Carousel>
-			{:else}
-				{#await recentlyAdded then recentlyAdded}
-					{#if recentlyAdded?.length}
-						<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-							<span slot="header">Recently Added</span>
-							{#each recentlyAdded as item (item.Id)}
-								<JellyfinCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
-							{/each}
-						</Carousel>
-					{/if}
-				{/await}
-			{/if}
-		{/await} -->
-
 		{#await popularMovies then popularMovies}
 			<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
 				<span slot="header">Popular</span>
diff --git a/src/lib/pages/SeriesHomePage.svelte b/src/lib/pages/SeriesHomePage.svelte
index 3e73068..a81a349 100644
--- a/src/lib/pages/SeriesHomePage.svelte
+++ b/src/lib/pages/SeriesHomePage.svelte
@@ -1,19 +1,15 @@
 <script lang="ts">
 	import { TmdbApi, tmdbApi } from '../apis/tmdb/tmdb-api';
 
-	import { jellyfinApi } from '../apis/jellyfin/jellyfin-api';
-	import Carousel from '../components/Carousel/Carousel.svelte';
-	import HeroShowcase from '../components/HeroShowcase/HeroShowcase.svelte';
-	import { getShowcasePropsFromTmdbSeries } from '../components/HeroShowcase/HeroShowcase';
-	import { scrollIntoView } from '../selectable';
-	import JellyfinCard from '../components/Card/JellyfinCard.svelte';
-	import { formatDateToYearMonthDay } from '../utils';
-	import TmdbCard from '../components/Card/TmdbCard.svelte';
-	import { navigate } from '../components/StackRouter/StackRouter';
-	import { TMDB_SERIES_GENRES } from '../apis/tmdb/tmdb-api.js';
-	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
+	import TmdbSeriesHeroShowcase from '$lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte';
 	import { libraryItemsDataStore } from '$lib/stores/data.store';
 	import { derived } from 'svelte/store';
+	import { TMDB_SERIES_GENRES } from '../apis/tmdb/tmdb-api.js';
+	import TmdbCard from '../components/Card/TmdbCard.svelte';
+	import Carousel from '../components/Carousel/Carousel.svelte';
+	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
+	import { scrollIntoView } from '../selectable';
+	import { formatDateToYearMonthDay } from '../utils';
 
 	const { ...libraryData } = libraryItemsDataStore.getRequest();
 	const libraryContinueWatching = derived(libraryData, (libraryData) => {
@@ -35,9 +31,6 @@
 		return series.map((i) => i.metadata);
 	});
 
-	// const continueWatching = jellyfinApi.getContinueWatchingSeries();
-	// const recentlyAdded = jellyfinApi.getRecentlyAdded('series');
-
 	const nowStreaming = getNowStreaming();
 	const upcomingSeries = fetchUpcomingSeries();
 	const popular = tmdbApi.getPopularSeries();
@@ -77,11 +70,7 @@
 
 <DetachedPage class="flex flex-col relative">
 	<div class="h-[calc(100vh-12rem)] flex px-32">
-		<HeroShowcase
-			items={recommendations.then(({ top10 }) => getShowcasePropsFromTmdbSeries(top10))}
-			on:enter={scrollIntoView({ top: 0 })}
-			on:select={({ detail }) => navigate(`/series/${detail?.id}`)}
-		/>
+		<TmdbSeriesHeroShowcase series={recommendations.then(({ top10 }) => top10)} />
 	</div>
 	<div class="my-16 space-y-8 relative z-10">
 		{#if $libraryContinueWatching.length}
@@ -93,28 +82,6 @@
 			</Carousel>
 		{/if}
 
-		<!-- {#await continueWatching then continueWatching}
-			{#if continueWatching?.length}
-				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">Continue Watching</span>
-					{#each continueWatching as item (item.Id)}
-						<JellyfinCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
-					{/each}
-				</Carousel>
-			{:else}
-				{#await recentlyAdded then recentlyAdded}
-					{#if recentlyAdded?.length}
-						<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-							<span slot="header">Recently Added</span>
-							{#each recentlyAdded as item (item.Id)}
-								<JellyfinCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
-							{/each}
-						</Carousel>
-					{/if}
-				{/await}
-			{/if}
-		{/await} -->
-
 		{#await popular then popular}
 			<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
 				<span slot="header">Popular</span>
@@ -129,7 +96,7 @@
 			{@const genreItems = genreIdToMovie[genre || '']}
 			{#if genreItems?.length}
 				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">{TMDB_SERIES_GENRES.find((g) => g.id == genre)?.name}</span>
+					<span slot="header">{TMDB_SERIES_GENRES.find((g) => String(g.id) == genre)?.name}</span>
 					{#each genreItems || [] as item}
 						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
 					{/each}
@@ -151,7 +118,7 @@
 			{@const genreItems = genreIdToMovie[genre || '']}
 			{#if genreItems?.length}
 				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">{TMDB_SERIES_GENRES.find((g) => g.id == genre)?.name}</span>
+					<span slot="header">{TMDB_SERIES_GENRES.find((g) => String(g.id) == genre)?.name}</span>
 					{#each genreItems || [] as item}
 						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
 					{/each}
@@ -173,7 +140,7 @@
 			{@const genreItems = genreIdToMovie[genre || '']}
 			{#if genreItems?.length}
 				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">{TMDB_SERIES_GENRES.find((g) => g.id == genre)?.name}</span>
+					<span slot="header">{TMDB_SERIES_GENRES.find((g) => String(g.id) == genre)?.name}</span>
 					{#each genreItems || [] as item}
 						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
 					{/each}
@@ -186,7 +153,7 @@
 			{@const genreItems = genreIdToMovie[genre || '']}
 			{#if genreItems?.length}
 				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">{TMDB_SERIES_GENRES.find((g) => g.id == genre)?.name}</span>
+					<span slot="header">{TMDB_SERIES_GENRES.find((g) => String(g.id) == genre)?.name}</span>
 					{#each genreItems || [] as item}
 						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
 					{/each}
@@ -201,7 +168,7 @@
 			{@const genreItems = genreIdToMovie[genre || '']}
 			{#if genreItems?.length}
 				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">{TMDB_SERIES_GENRES.find((g) => g.id == genre)?.name}</span>
+					<span slot="header">{TMDB_SERIES_GENRES.find((g) => String(g.id) == genre)?.name}</span>
 					{#each genreItems || [] as item}
 						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
 					{/each}
@@ -214,7 +181,7 @@
 			{@const genreItems = genreIdToMovie[genre || '']}
 			{#if genreItems?.length}
 				<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
-					<span slot="header">{TMDB_SERIES_GENRES.find((g) => g.id == genre)?.name}</span>
+					<span slot="header">{TMDB_SERIES_GENRES.find((g) => String(g.id) == genre)?.name}</span>
 					{#each genreItems || [] as item}
 						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
 					{/each}
diff --git a/src/lib/pages/TitlePages/EpisodePage.svelte b/src/lib/pages/TitlePages/EpisodePage.svelte
index 0376bea..edc5be2 100644
--- a/src/lib/pages/TitlePages/EpisodePage.svelte
+++ b/src/lib/pages/TitlePages/EpisodePage.svelte
@@ -20,7 +20,7 @@
 	import { createModal } from '../../components/Modal/modal.store';
 	import { PLATFORM_WEB, TMDB_IMAGES_ORIGINAL } from '../../constants';
 	import { formatThousands, retry } from '../../utils';
-	import TitleProperties from './TitleProperties.svelte';
+	import TitleProperties from './HeroTitleInfo.svelte';
 
 	export let id: string; // Series tmdbId
 	export let season: string;
@@ -216,7 +216,7 @@
 
 	onDestroy(() => {
 		unsubscribe();
-	})
+	});
 </script>
 
 <DetachedPage let:handleGoBack let:registrar>
@@ -306,38 +306,38 @@
 					{/if}
 					<Check slot="icon" size={19} />
 				</Button>
-				{#await Promise.all([jellyfinEpisode, sonarrEpisode])}
+				<!-- {#await Promise.all([jellyfinEpisode, sonarrEpisode])}
 					<ButtonGhost>Play</ButtonGhost>
 					<ButtonGhost>Manage Media</ButtonGhost>
 					<ButtonGhost>Delete Files</ButtonGhost>
 				{:then [jellyfinEpisode]}
 					{#if jellyfinEpisode?.MediaSources?.length}
-						<!-- <Button
+						<Button
 							on:clickOrSelect={() =>
 								jellyfinEpisode?.Id && playerState.streamJellyfinId(jellyfinEpisode.Id)}
 						>
 							Play
 							<Play size={19} slot="icon" />
-						</Button> -->
+						</Button>
 					{:else}
 						<Button action={handleRequestEpisode}>
 							Request
 							<Plus size={19} slot="icon" />
 						</Button>
 					{/if}
-				{/await}
+				{/await} -->
 				<!--				<Button-->
 				<!--					on:clickOrSelect={() =>-->
 				<!--						openEpisodeMediaManager(Number(id), Number(season), Number(episode))}-->
 				<!--					>Manage Media <File slot="icon" size={19} /></Button-->
 				<!--				>-->
-				{#await sonarrFiles then files}
+				<!-- {#await sonarrFiles then files}
 					{#if files?.length}
-						<Button on:clickOrSelect={() => createConfirmDeleteFiles(files)}
-							>Delete Files <Trash slot="icon" size={19} /></Button
-						>
+						<Button on:clickOrSelect={() => createConfirmDeleteFiles(files)}>
+							Delete Files <Trash slot="icon" size={19} />
+						</Button>
 					{/if}
-				{/await}
+				{/await} -->
 
 				{#if PLATFORM_WEB}
 					<Button>
diff --git a/src/lib/pages/TitlePages/TitleProperties.svelte b/src/lib/pages/TitlePages/HeroTitleInfo.svelte
similarity index 77%
rename from src/lib/pages/TitlePages/TitleProperties.svelte
rename to src/lib/pages/TitlePages/HeroTitleInfo.svelte
index b5aecb1..31f83ed 100644
--- a/src/lib/pages/TitlePages/TitleProperties.svelte
+++ b/src/lib/pages/TitlePages/HeroTitleInfo.svelte
@@ -8,13 +8,17 @@
 		label?: string;
 	}[] = [];
 	export let overview: string;
+	export let onClickTitle: (() => void) | undefined = undefined;
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class={classNames('text-left font-medium tracking-wider text-stone-200 mt-1', {
 		'text-4xl sm:text-5xl 2xl:text-6xl': title.length || 0 < 15,
-		'text-3xl sm:text-4xl 2xl:text-5xl': title.length || 0 >= 15
+		'text-3xl sm:text-4xl 2xl:text-5xl': title.length || 0 >= 15,
+		'hover:text-amber-200 cursor-pointer': !!onClickTitle
 	})}
+	on:click={onClickTitle}
 >
 	{title}
 </div>
diff --git a/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte b/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
index 523b69d..349e6f2 100644
--- a/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
+++ b/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
@@ -17,11 +17,11 @@
 	import { tmdbMovieDataStore, useRequest } from '$lib/stores/data.store';
 	import { useMovieUserData } from '$lib/stores/media-user-data.store';
 	import { reiverrApiNew, user } from '$lib/stores/user.store';
-	import { formatThousands } from '$lib/utils';
+	import { formatMinutesToTime, formatThousands } from '$lib/utils';
 	import classNames from 'classnames';
 	import { Bookmark, Check, DotFilled, ExternalLink, Minus, Play, Plus } from 'radix-icons-svelte';
 	import { writable } from 'svelte/store';
-	import TitleProperties from '../TitleProperties.svelte';
+	import HeroTitleInfo from '../HeroTitleInfo.svelte';
 	import { onDestroy } from 'svelte';
 
 	export let id: string;
@@ -92,9 +92,9 @@
 	let titleProperties: { href?: string; label: string }[] = [];
 	$: {
 		$tmdbMovie.then((movie) => {
-			if (movie?.release_date) {
+			if (movie?.runtime) {
 				titleProperties.push({
-					label: new Date(movie.release_date).getFullYear().toString()
+					label: formatMinutesToTime(movie.runtime)
 				});
 			}
 
@@ -245,8 +245,8 @@
 							>
 								{movie?.title}
 							</div> -->
-							<TitleProperties
-								title={movie.title ?? ''}
+							<HeroTitleInfo
+								title={`${movie.title} (${new Date(movie.release_date ?? 0).getFullYear()})`}
 								properties={titleProperties}
 								overview={movie.overview ?? ''}
 							/>
@@ -307,10 +307,10 @@
 								Remove from Library
 							</Button>
 						{/if}
-						<Button class="mr-4" action={handleRequest} disabled={$inLibrary === undefined}>
+						<!-- <Button class="mr-4" action={handleRequest} disabled={$inLibrary === undefined}>
 							Request
 							<Plus size={19} slot="icon" />
-						</Button>
+						</Button> -->
 						<!--{#if radarrItem}-->
 						<!--	<Button class="mr-4" on:clickOrSelect={() => openMovieMediaManager(Number(id))}>-->
 						<!--		{#if jellyfinItem}-->
diff --git a/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte b/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
index 27d6f52..6d9845b 100644
--- a/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
+++ b/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
@@ -27,7 +27,7 @@
 	import classNames from 'classnames';
 	import { Bookmark, Cross1, ExternalLink, Minus, Play, Plus, Trash } from 'radix-icons-svelte';
 	import { get } from 'svelte/store';
-	import TitleProperties from '../TitleProperties.svelte';
+	import TitleProperties from '../HeroTitleInfo.svelte';
 	import DownloadDetailsDialog from './DownloadDetailsDialog.svelte';
 	import EpisodeGrid from './EpisodeGrid.svelte';
 	import FileDetailsDialog from './FileDetailsDialog.svelte';
@@ -367,10 +367,10 @@
 									<Play size={19} slot="icon" />
 								</Button> -->
 							<!-- {:else} -->
-							<Button class="mr-4" action={() => handleRequestSeason(1)}>
+							<!-- <Button class="mr-4" action={() => handleRequestSeason(1)}>
 								Request
 								<Plus size={19} slot="icon" />
-							</Button>
+							</Button> -->
 							<!-- {/if} -->
 
 							{#if PLATFORM_WEB}
diff --git a/src/lib/pages/UsersPage.svelte b/src/lib/pages/UsersPage.svelte
index 56f527c..674d5a6 100644
--- a/src/lib/pages/UsersPage.svelte
+++ b/src/lib/pages/UsersPage.svelte
@@ -22,6 +22,7 @@
 					.getClient(session.baseUrl, session.token)
 					.GET('/users/{id}', { params: { path: { id: session.id } } })
 					.then((r) => ({ session, user: r.data }))
+					.catch((e) => ({ session, user: undefined, error: e }))
 			)
 		).then((us) => us.filter((u) => !!u.user));
 	}
@@ -32,6 +33,7 @@
 	}
 </script>
 
+{console.log('UsersPage')}
 <DetachedPage sidebar={false} class="px-32 py-16 h-full flex flex-col items-center justify-center">
 	{#await users then users}
 		{#if users?.length}
diff --git a/src/lib/stores/user.store.ts b/src/lib/stores/user.store.ts
index 437d95e..ace5780 100644
--- a/src/lib/stores/user.store.ts
+++ b/src/lib/stores/user.store.ts
@@ -122,7 +122,7 @@ function useUser() {
 export const { user, sources, isAppInitialized } = useUser();
 export const awaitAppInitialization = () =>
 	new Promise((resolve) => {
-		let unsubscribe = isAppInitialized.subscribe(async (i) => {
+		const unsubscribe = isAppInitialized.subscribe(async (i) => {
 			if (i) {
 				resolve(undefined);
 				await tick();