diff --git a/src/lib/jellyfin/jellyfin.ts b/src/lib/jellyfin/jellyfin.ts
index dab0787..af51944 100644
--- a/src/lib/jellyfin/jellyfin.ts
+++ b/src/lib/jellyfin/jellyfin.ts
@@ -1,14 +1,13 @@
 import createClient from 'openapi-fetch';
 import type { paths } from '$lib/jellyfin/jellyfin-types';
-import { PUBLIC_JELLYFIN_API_KEY } from '$env/static/public';
+import { PUBLIC_JELLYFIN_API_KEY, PUBLIC_JELLYFIN_URL } from '$env/static/public';
 import { request } from '$lib/utils';
 
 export const JELLYFIN_DEVICE_ID = 'Reiverr Client';
-export const JELLYFIN_BASE_URL = 'http://jellyfin.home';
 export const JELLYFIN_USER_ID = '75dcb061c9404115a7acdc893ea6bbbc';
 
 export const JellyfinApi = createClient<paths>({
-	baseUrl: JELLYFIN_BASE_URL,
+	baseUrl: PUBLIC_JELLYFIN_URL,
 	headers: {
 		Authorization: `MediaBrowser DeviceId="${JELLYFIN_DEVICE_ID}", Token="${PUBLIC_JELLYFIN_API_KEY}"`
 	}
diff --git a/src/lib/radarr/radarr.ts b/src/lib/radarr/radarr.ts
index 170ceb3..11ed58f 100644
--- a/src/lib/radarr/radarr.ts
+++ b/src/lib/radarr/radarr.ts
@@ -1,10 +1,9 @@
 import createClient from 'openapi-fetch';
-import { PUBLIC_RADARR_API_KEY } from '$env/static/public';
 import { log, request } from '$lib/utils';
 import type { paths } from '$lib/radarr/radarr-types';
 import type { components } from '$lib/radarr/radarr-types';
-import type { TmdbMovie, TmdbMovieFull } from '$lib/tmdb-api';
-import { fetchTmdbMovie, TmdbApi } from '$lib/tmdb-api';
+import { fetchTmdbMovie } from '$lib/tmdb-api';
+import { RADARR_API_KEY, RADARR_BASE_URL } from '$env/static/private';
 
 export type MovieResource = components['schemas']['MovieResource'];
 export type MovieFileResource = components['schemas']['MovieFileResource'];
@@ -24,9 +23,9 @@ export interface RadarrMovieOptions {
 }
 
 export const RadarrApi = createClient<paths>({
-	baseUrl: 'http://radarr.home',
+	baseUrl: RADARR_BASE_URL,
 	headers: {
-		'X-Api-Key': PUBLIC_RADARR_API_KEY
+		'X-Api-Key': RADARR_API_KEY
 	}
 });
 
diff --git a/src/lib/sonarr/sonarr.ts b/src/lib/sonarr/sonarr.ts
index a2e691b..17868a4 100644
--- a/src/lib/sonarr/sonarr.ts
+++ b/src/lib/sonarr/sonarr.ts
@@ -1,10 +1,10 @@
 import createClient from 'openapi-fetch';
-import type { paths as sonarrPaths } from '$lib/sonarr/sonarr';
-import { PUBLIC_SONARR_API_KEY } from '$env/static/public';
+import type { paths } from '$lib/sonarr/sonarr-types';
+import { SONARR_API_KEY, SONARR_BASE_URL } from '$env/static/private';
 
-export const SonarrApi = createClient<sonarrPaths>({
-	baseUrl: 'http://sonarr.home',
+export const SonarrApi = createClient<paths>({
+	baseUrl: SONARR_BASE_URL,
 	headers: {
-		'X-Api-Key': PUBLIC_SONARR_API_KEY
+		'X-Api-Key': SONARR_API_KEY
 	}
 });
diff --git a/src/lib/videoPlayerState.ts b/src/lib/videoPlayerState.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c1f4cf8..fbe1b05 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,21 @@
-<script>
+<script lang="ts">
 	import '../app.css';
-	import { setClient } from 'svelte-apollo';
 	import Navbar from './components/Navbar/Navbar.svelte';
+	import VideoPlayer from './components/VideoPlayer/VideoPlayer.svelte';
+	import { setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	let playerState = writable({ visible: false, jellyfinId: '' });
+
+	setContext('player', {
+		playerState,
+		close: () => {
+			playerState.set({ visible: false, jellyfinId: '' });
+		},
+		streamJellyfinId: (id: string) => {
+			playerState.set({ visible: true, jellyfinId: id });
+		}
+	});
 </script>
 
 <div class="app">
@@ -9,6 +23,7 @@
 	<main>
 		<slot />
 	</main>
+	<VideoPlayer />
 
 	<!--	<footer>-->
 	<!--		<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>-->
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 25ff321..48cd4a1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -45,10 +45,7 @@
 
 {#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="bg-stone-800">
 			<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">
diff --git a/src/routes/components/Poster/Poster.svelte b/src/routes/components/Poster/Poster.svelte
index 8486aa3..242a085 100644
--- a/src/routes/components/Poster/Poster.svelte
+++ b/src/routes/components/Poster/Poster.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { TmdbApi } from '$lib/tmdb-api';
 	import type { TmdbMovie } from '$lib/tmdb-api';
-	import { onMount } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	import { TMDB_IMAGES } from '$lib/constants';
 	import { formatMinutesToTime } from '$lib/utils';
+	import { getJellyfinItemByTmdbId } from '$lib/jellyfin/jellyfin';
 
 	export let tmdbId;
 	export let progress = 0;
@@ -11,6 +12,8 @@
 	export let randomProgress = false;
 	if (randomProgress) progress = Math.random() > 0.5 ? Math.round(Math.random() * 100) : 100;
 
+	const { streamJellyfinId } = getContext('player');
+
 	export let type: 'movie' | 'tv' = 'movie';
 
 	let bg = '';
@@ -24,6 +27,15 @@
 				title = data.title;
 			});
 	});
+
+	let streamFetching = false;
+	function stream() {
+		if (streamFetching || !tmdbId) return;
+		streamFetching = true;
+		getJellyfinItemByTmdbId(tmdbId).then((item: any) => {
+			if (item.Id) streamJellyfinId(item.Id);
+		});
+	}
 </script>
 
 <div class="group grid grid-cols-[2px_1fr_2px] grid-rows-[2px_1fr_2px]">
@@ -61,7 +73,7 @@
 				<div class="flex flex-col gap-2">
 					<button
 						class="bg-white border-2 border-white hover:bg-amber-400 hover:border-amber-400 transition-colors text-zinc-900 px-8 py-2.5 uppercase tracking-widest font-extrabold cursor-pointer text-xs"
-						>Stream</button
+						on:click={stream}>Stream</button
 					>
 					<a
 						href={'/' + type + '/' + tmdbId}
diff --git a/src/routes/components/RequestModal/RequestModal.svelte b/src/routes/components/RequestModal/RequestModal.svelte
index 7c63db2..bad11dc 100644
--- a/src/routes/components/RequestModal/RequestModal.svelte
+++ b/src/routes/components/RequestModal/RequestModal.svelte
@@ -1,11 +1,6 @@
 <script lang="ts">
 	import Modal from '../Modal/Modal.svelte';
 	import ModalContent from '../Modal/ModalContent.svelte';
-	import {
-		requestRadarrReleases,
-		requestDownloadRadarrMovie,
-		fetchRadarrReleases
-	} from '$lib/radarr/radarr';
 	import { formatMinutesToTime, formatSize } from '$lib/utils';
 	import IconButton from '../IconButton.svelte';
 	import { DotFilled, Download, Plus } from 'radix-icons-svelte';
diff --git a/src/routes/components/ResourceDetails/LibraryDetails.svelte b/src/routes/components/ResourceDetails/LibraryDetails.svelte
index 76f276d..78501eb 100644
--- a/src/routes/components/ResourceDetails/LibraryDetails.svelte
+++ b/src/routes/components/ResourceDetails/LibraryDetails.svelte
@@ -6,7 +6,6 @@
 	import RequestModal from '../RequestModal/RequestModal.svelte';
 	import IconButton from '../IconButton.svelte';
 	import classNames from 'classnames';
-	import VideoPlayer from '../VideoPlayer/VideoPlayer.svelte';
 	import { log } from '$lib/utils.js';
 
 	let isRequestModalVisible = false;
diff --git a/src/routes/components/ResourceDetails/ResourceDetails.svelte b/src/routes/components/ResourceDetails/ResourceDetails.svelte
index 884853b..c951ad5 100644
--- a/src/routes/components/ResourceDetails/ResourceDetails.svelte
+++ b/src/routes/components/ResourceDetails/ResourceDetails.svelte
@@ -7,9 +7,9 @@
 	import type { CastMember, TmdbMovie, Video } from '$lib/tmdb-api';
 	import { fetchTmdbMovieCredits, fetchTmdbMovieVideos } from '$lib/tmdb-api';
 	import LibraryDetails from './LibraryDetails.svelte';
-	import VideoPlayer from '../VideoPlayer/VideoPlayer.svelte';
 	import { getJellyfinItemByTmdbId } from '$lib/jellyfin/jellyfin';
 	import HeightHider from '../HeightHider.svelte';
+	import { getContext } from 'svelte';
 
 	export let movie: TmdbMovie;
 	export let videos: Video[];
@@ -21,7 +21,6 @@
 	let focusTrailer = false;
 	let trailerStartTime = 0;
 	let detailsVisible = showDetails;
-	let videoPlayerVisible = false;
 	let streamButtonDisabled = true;
 	let jellyfinId;
 
@@ -49,6 +48,7 @@
 		'December'
 	];
 	const releaseDate = new Date(movie.release_date);
+	const { playerState, close, streamJellyfinId } = getContext('player');
 
 	function openTrailer() {
 		window
@@ -190,7 +190,7 @@
 								<Button
 									disabled={streamButtonDisabled}
 									size="lg"
-									on:click={() => (videoPlayerVisible = true)}>Stream</Button
+									on:click={() => jellyfinId && streamJellyfinId(jellyfinId)}>Stream</Button
 								>
 							</div>
 							<div
@@ -283,17 +283,13 @@
 	<div bind:this={localDetailsTop} />
 	{#key movie.id}
 		<LibraryDetails
-			openJellyfinStream={() => (videoPlayerVisible = true)}
+			openJellyfinStream={() => jellyfinId && streamJellyfinId(jellyfinId)}
 			jellyfinStreamDisabled={streamButtonDisabled}
 			tmdbId={movie.id}
 		/>
 	{/key}
 </HeightHider>
 
-{#if jellyfinId}
-	<VideoPlayer bind:visible={videoPlayerVisible} {jellyfinId} />
-{/if}
-
 <style>
 	.youtube-container {
 		overflow: hidden;
diff --git a/src/routes/components/VideoPlayer/VideoPlayer.svelte b/src/routes/components/VideoPlayer/VideoPlayer.svelte
index 2b74108..499f4be 100644
--- a/src/routes/components/VideoPlayer/VideoPlayer.svelte
+++ b/src/routes/components/VideoPlayer/VideoPlayer.svelte
@@ -2,14 +2,13 @@
 	import { fetchJellyfinPlaybackUrl } from '$lib/jellyfin/jellyfin';
 	import Hls from 'hls.js';
 	import Modal from '../Modal/Modal.svelte';
-	import { JELLYFIN_BASE_URL } from '$lib/jellyfin/jellyfin.js';
 	import IconButton from '../IconButton.svelte';
 	import { Cross2 } from 'radix-icons-svelte';
 	import classNames from 'classnames';
+	import { getContext } from 'svelte';
+	import { PUBLIC_JELLYFIN_URL } from '$env/static/public';
 
-	export let visible = false;
-
-	export let jellyfinId: string;
+	const { playerState, close } = getContext('player');
 
 	let video: HTMLVideoElement;
 
@@ -19,13 +18,13 @@
 
 			const hls = new Hls();
 
-			hls.loadSource(JELLYFIN_BASE_URL + uri);
+			hls.loadSource(PUBLIC_JELLYFIN_URL + uri);
 			hls.attachMedia(video);
 			video.play();
 		});
 
 	function handleClose() {
-		visible = false;
+		close();
 		video?.pause();
 	}
 
@@ -39,22 +38,21 @@
 		}, 2000);
 	}
 
+	let state;
+	playerState.subscribe((s) => (state = s));
+
 	$: {
-		if (video) {
+		if (video && state.jellyfinId) {
 			if (!Hls.isSupported()) {
 				throw new Error('HLS is not supported');
 			}
 
-			if (!jellyfinId) {
-				throw new Error('No video id provided');
-			}
-
-			fetchPlaybackInfo(jellyfinId);
+			fetchPlaybackInfo(state.jellyfinId);
 		}
 	}
 </script>
 
-<Modal {visible} close={handleClose}>
+<Modal visible={$playerState.visible} close={handleClose}>
 	<div class="bg-black w-screen h-screen relative" on:mousemove={handleMouseMove}>
 		<video controls bind:this={video} class="w-full h-full inset-0" />
 		<div
diff --git a/src/routes/jellyfin/+server.ts b/src/routes/jellyfin/+server.ts
new file mode 100644
index 0000000..60d812f
--- /dev/null
+++ b/src/routes/jellyfin/+server.ts
@@ -0,0 +1,15 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { error, json } from '@sveltejs/kit';
+import { getJellyfinItemByTmdbId } from '$lib/jellyfin/jellyfin';
+
+export const GET = (async ({ params, request }) => {
+	const body = await request.json();
+
+	const { tmdbId } = body;
+
+	if (!tmdbId) throw error(400, 'NO_TMDB_ID');
+
+	const response = await getJellyfinItemByTmdbId(tmdbId);
+
+	return json(response);
+}) satisfies RequestHandler;