diff --git a/src/app.css b/src/app.css
index 08ccc49..36b9ef7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -18,6 +18,10 @@ a {
 	@apply focus-visible:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
 }
 
+.peer-selectable {
+	@apply peer-focus-visible:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
+}
+
 .selectable-explicit {
 	@apply focus-within:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
 }
diff --git a/src/lib/apis/jellyfin/jellyfinApi.ts b/src/lib/apis/jellyfin/jellyfinApi.ts
index 9c1cb02..0c7d6d3 100644
--- a/src/lib/apis/jellyfin/jellyfinApi.ts
+++ b/src/lib/apis/jellyfin/jellyfinApi.ts
@@ -1,88 +1,72 @@
 import type { components, paths } from '$lib/apis/jellyfin/jellyfin.generated';
 import type { DeviceProfile } from '$lib/apis/jellyfin/playback-profiles';
-import { JELLYFIN_API_KEY, JELLYFIN_BASE_URL } from '$lib/constants';
+import { settings } from '$lib/stores/settings.store';
+import axios from 'axios';
 import createClient from 'openapi-fetch';
+import { get } from 'svelte/store';
 
 export type JellyfinItem = components['schemas']['BaseItemDto'];
 
-export const jellyfinAvailable = !!JELLYFIN_BASE_URL && !!JELLYFIN_API_KEY;
-
 export const JELLYFIN_DEVICE_ID = 'Reiverr Client';
 
-export const JellyfinApi =
-	JELLYFIN_BASE_URL && JELLYFIN_API_KEY
-		? createClient<paths>({
-				baseUrl: JELLYFIN_BASE_URL,
-				headers: {
-					Authorization: `MediaBrowser DeviceId="${JELLYFIN_DEVICE_ID}", Token="${JELLYFIN_API_KEY}"`
-				}
-		  })
-		: undefined;
+function getJellyfinApi() {
+	const baseUrl = get(settings)?.jellyfin.baseUrl;
+	const apiKey = get(settings)?.jellyfin.apiKey;
+	const userId = get(settings)?.jellyfin.userId;
 
-let userId: string | undefined = undefined;
-const getUserId = async () => {
-	if (userId) return userId;
+	if (!baseUrl || !apiKey || !userId) return undefined;
 
-	const user = JellyfinApi?.get('/Users', {
-		params: {},
+	return createClient<paths>({
+		baseUrl,
 		headers: {
-			'cache-control': 'max-age=3600'
+			Authorization: `MediaBrowser DeviceId="${JELLYFIN_DEVICE_ID}", Token="${apiKey}"`
 		}
-	}).then((r) => r.data?.[0]?.Id || '');
-
-	userId = await user;
-	return user;
-};
+	});
+}
 
 export const getJellyfinContinueWatching = async (): Promise<JellyfinItem[] | undefined> =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.get('/Users/{userId}/Items/Resume', {
-					params: {
-						path: {
-							userId
-						},
-						query: {
-							mediaTypes: ['Video'],
-							fields: ['ProviderIds']
-						}
-					}
-			  }).then((r) => r.data?.Items || [])
-			: undefined
-	);
+	getJellyfinApi()
+		?.get('/Users/{userId}/Items/Resume', {
+			params: {
+				path: {
+					userId: get(settings)?.jellyfin.userId || ''
+				},
+				query: {
+					mediaTypes: ['Video'],
+					fields: ['ProviderIds']
+				}
+			}
+		})
+		.then((r) => r.data?.Items || []);
 
 export const getJellyfinNextUp = async () =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.get('/Shows/NextUp', {
-					params: {
-						query: {
-							userId,
-							fields: ['ProviderIds']
-						}
-					}
-			  }).then((r) => r.data?.Items || [])
-			: undefined
-	);
+	getJellyfinApi()
+		?.get('/Shows/NextUp', {
+			params: {
+				query: {
+					userId: get(settings)?.jellyfin.userId || '',
+					fields: ['ProviderIds']
+				}
+			}
+		})
+		.then((r) => r.data?.Items || []);
 
 export const getJellyfinItems = async () =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.get('/Users/{userId}/Items', {
-					params: {
-						path: {
-							userId
-						},
-						query: {
-							hasTmdbId: true,
-							recursive: true,
-							includeItemTypes: ['Movie', 'Series'],
-							fields: ['ProviderIds']
-						}
-					}
-			  }).then((r) => r.data?.Items || [])
-			: undefined
-	);
+	getJellyfinApi()
+		?.get('/Users/{userId}/Items', {
+			params: {
+				path: {
+					userId: get(settings)?.jellyfin.userId || ''
+				},
+				query: {
+					hasTmdbId: true,
+					recursive: true,
+					includeItemTypes: ['Movie', 'Series'],
+					fields: ['ProviderIds']
+				}
+			}
+		})
+		.then((r) => r.data?.Items || []);
 
 // export const getJellyfinSeries = () =>
 // 	JellyfinApi.get('/Users/{userId}/Items', {
@@ -99,24 +83,22 @@ export const getJellyfinItems = async () =>
 // 	}).then((r) => r.data?.Items || []);
 
 export const getJellyfinEpisodes = async () =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.get('/Users/{userId}/Items', {
-					params: {
-						path: {
-							userId
-						},
-						query: {
-							recursive: true,
-							includeItemTypes: ['Episode']
-						}
-					},
-					headers: {
-						'cache-control': 'max-age=10'
-					}
-			  }).then((r) => r.data?.Items || [])
-			: undefined
-	);
+	getJellyfinApi()
+		?.get('/Users/{userId}/Items', {
+			params: {
+				path: {
+					userId: get(settings)?.jellyfin.userId || ''
+				},
+				query: {
+					recursive: true,
+					includeItemTypes: ['Episode']
+				}
+			},
+			headers: {
+				'cache-control': 'max-age=10'
+			}
+		})
+		.then((r) => r.data?.Items || []);
 
 // export const getJellyfinEpisodesBySeries = (seriesId: string) =>
 // 	getJellyfinEpisodes().then((items) => items?.filter((i) => i.SeriesId === seriesId) || []);
@@ -125,18 +107,16 @@ export const getJellyfinEpisodes = async () =>
 // 	getJellyfinItems().then((items) => items?.find((i) => i.ProviderIds?.Tmdb == tmdbId));
 
 export const getJellyfinItem = async (itemId: string) =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.get('/Users/{userId}/Items/{itemId}', {
-					params: {
-						path: {
-							itemId,
-							userId
-						}
-					}
-			  }).then((r) => r.data)
-			: undefined
-	);
+	getJellyfinApi()
+		?.get('/Users/{userId}/Items/{itemId}', {
+			params: {
+				path: {
+					itemId,
+					userId: get(settings)?.jellyfin.userId || ''
+				}
+			}
+		})
+		.then((r) => r.data);
 
 // export const requestJellyfinItemByTmdbId = () =>
 // 	request((tmdbId: string) => getJellyfinItemByTmdbId(tmdbId));
@@ -147,35 +127,37 @@ export const getJellyfinPlaybackInfo = async (
 	startTimeTicks = 0,
 	maxStreamingBitrate = 140000000
 ) =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.post('/Items/{itemId}/PlaybackInfo', {
-					params: {
-						path: {
-							itemId: itemId
-						},
-						query: {
-							userId,
-							startTimeTicks,
-							autoOpenLiveStream: true,
-							maxStreamingBitrate
-						}
-					},
-					body: {
-						DeviceProfile: playbackProfile
-					}
-			  }).then((r) => ({
-					playbackUri:
-						r.data?.MediaSources?.[0]?.TranscodingUrl ||
-						`/Videos/${r.data?.MediaSources?.[0].Id}/stream.mp4?Static=true&mediaSourceId=${r.data?.MediaSources?.[0].Id}&deviceId=${JELLYFIN_DEVICE_ID}&api_key=${JELLYFIN_API_KEY}&Tag=${r.data?.MediaSources?.[0].ETag}`,
-					mediaSourceId: r.data?.MediaSources?.[0]?.Id,
-					playSessionId: r.data?.PlaySessionId,
-					directPlay:
-						!!r.data?.MediaSources?.[0]?.SupportsDirectPlay ||
-						!!r.data?.MediaSources?.[0]?.SupportsDirectStream
-			  }))
-			: undefined
-	);
+	getJellyfinApi()
+		?.post('/Items/{itemId}/PlaybackInfo', {
+			params: {
+				path: {
+					itemId: itemId
+				},
+				query: {
+					userId: get(settings)?.jellyfin.userId || '',
+					startTimeTicks,
+					autoOpenLiveStream: true,
+					maxStreamingBitrate
+				}
+			},
+			body: {
+				DeviceProfile: playbackProfile
+			}
+		})
+		.then((r) => ({
+			playbackUri:
+				r.data?.MediaSources?.[0]?.TranscodingUrl ||
+				`/Videos/${r.data?.MediaSources?.[0].Id}/stream.mp4?Static=true&mediaSourceId=${
+					r.data?.MediaSources?.[0].Id
+				}&deviceId=${JELLYFIN_DEVICE_ID}&api_key=${get(settings)?.jellyfin.apiKey}&Tag=${
+					r.data?.MediaSources?.[0].ETag
+				}`,
+			mediaSourceId: r.data?.MediaSources?.[0]?.Id,
+			playSessionId: r.data?.PlaySessionId,
+			directPlay:
+				!!r.data?.MediaSources?.[0]?.SupportsDirectPlay ||
+				!!r.data?.MediaSources?.[0]?.SupportsDirectStream
+		}));
 
 export const reportJellyfinPlaybackStarted = (
 	itemId: string,
@@ -184,20 +166,16 @@ export const reportJellyfinPlaybackStarted = (
 	audioStreamIndex?: number,
 	subtitleStreamIndex?: number
 ) =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.post('/Sessions/Playing', {
-					body: {
-						CanSeek: true,
-						ItemId: itemId,
-						PlaySessionId: sessionId,
-						MediaSourceId: mediaSourceId,
-						AudioStreamIndex: 1,
-						SubtitleStreamIndex: -1
-					}
-			  })
-			: undefined
-	);
+	getJellyfinApi()?.post('/Sessions/Playing', {
+		body: {
+			CanSeek: true,
+			ItemId: itemId,
+			PlaySessionId: sessionId,
+			MediaSourceId: mediaSourceId,
+			AudioStreamIndex: 1,
+			SubtitleStreamIndex: -1
+		}
+	});
 
 export const reportJellyfinPlaybackProgress = (
 	itemId: string,
@@ -205,7 +183,7 @@ export const reportJellyfinPlaybackProgress = (
 	isPaused: boolean,
 	positionTicks: number
 ) =>
-	JellyfinApi?.post('/Sessions/Playing/Progress', {
+	getJellyfinApi()?.post('/Sessions/Playing/Progress', {
 		body: {
 			ItemId: itemId,
 			PlaySessionId: sessionId,
@@ -221,7 +199,7 @@ export const reportJellyfinPlaybackStopped = (
 	sessionId: string,
 	positionTicks: number
 ) =>
-	JellyfinApi?.post('/Sessions/Playing/Stopped', {
+	getJellyfinApi()?.post('/Sessions/Playing/Stopped', {
 		body: {
 			ItemId: itemId,
 			PlaySessionId: sessionId,
@@ -231,7 +209,7 @@ export const reportJellyfinPlaybackStopped = (
 	});
 
 export const delteActiveEncoding = (playSessionId: string) =>
-	JellyfinApi?.del('/Videos/ActiveEncodings', {
+	getJellyfinApi()?.del('/Videos/ActiveEncodings', {
 		params: {
 			query: {
 				deviceId: JELLYFIN_DEVICE_ID,
@@ -241,32 +219,50 @@ export const delteActiveEncoding = (playSessionId: string) =>
 	});
 
 export const setJellyfinItemWatched = async (jellyfinId: string) =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.post('/Users/{userId}/PlayedItems/{itemId}', {
-					params: {
-						path: {
-							userId,
-							itemId: jellyfinId
-						},
-						query: {
-							datePlayed: new Date().toISOString()
-						}
-					}
-			  })
-			: undefined
-	);
+	getJellyfinApi()?.post('/Users/{userId}/PlayedItems/{itemId}', {
+		params: {
+			path: {
+				userId: get(settings)?.jellyfin.userId || '',
+				itemId: jellyfinId
+			},
+			query: {
+				datePlayed: new Date().toISOString()
+			}
+		}
+	});
 
 export const setJellyfinItemUnwatched = async (jellyfinId: string) =>
-	getUserId().then((userId) =>
-		userId
-			? JellyfinApi?.del('/Users/{userId}/PlayedItems/{itemId}', {
-					params: {
-						path: {
-							userId,
-							itemId: jellyfinId
-						}
-					}
-			  })
-			: undefined
-	);
+	getJellyfinApi()?.del('/Users/{userId}/PlayedItems/{itemId}', {
+		params: {
+			path: {
+				userId: get(settings)?.jellyfin.userId || '',
+				itemId: jellyfinId
+			}
+		}
+	});
+
+export const getJellyfinHealth = async (
+	baseUrl: string | undefined = undefined,
+	apiKey: string | undefined = undefined
+) =>
+	axios
+		.get((baseUrl || get(settings)?.jellyfin.baseUrl) + '/System/Info', {
+			headers: {
+				'X-Emby-Token': apiKey || get(settings)?.jellyfin.apiKey
+			}
+		})
+		.then((res) => res.status === 200)
+		.catch(() => false);
+
+export const getJellyfinUsers = async (
+	baseUrl: string | undefined = undefined,
+	apiKey: string | undefined = undefined
+): Promise<components['schemas']['UserDto'][]> =>
+	axios
+		.get((baseUrl || get(settings)?.jellyfin.baseUrl) + '/Users', {
+			headers: {
+				'X-Emby-Token': apiKey || get(settings)?.jellyfin.apiKey
+			}
+		})
+		.then((res) => res.data || [])
+		.catch(() => []);
diff --git a/src/lib/apis/radarr/radarrApi.ts b/src/lib/apis/radarr/radarrApi.ts
index 037ffa8..35b76ad 100644
--- a/src/lib/apis/radarr/radarrApi.ts
+++ b/src/lib/apis/radarr/radarrApi.ts
@@ -1,8 +1,8 @@
 import type { components, paths } from '$lib/apis/radarr/radarr.generated';
 import { getTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
-import { RADARR_API_KEY, RADARR_BASE_URL } from '$lib/constants';
 import { settings } from '$lib/stores/settings.store';
 import { log } from '$lib/utils';
+import axios from 'axios';
 import createClient from 'openapi-fetch';
 import { get } from 'svelte/store';
 
@@ -25,31 +25,39 @@ export interface RadarrMovieOptions {
 	searchNow?: boolean;
 }
 
-export const radarrAvailable = !!RADARR_BASE_URL && !!RADARR_API_KEY;
+function getRadarrApi() {
+	const baseUrl = get(settings)?.radarr.baseUrl;
+	const apiKey = get(settings)?.radarr.apiKey;
 
-export const RadarrApi =
-	RADARR_BASE_URL && RADARR_API_KEY
-		? createClient<paths>({
-				baseUrl: RADARR_BASE_URL,
-				headers: {
-					'X-Api-Key': RADARR_API_KEY
-				}
-		  })
-		: undefined;
+	if (!baseUrl || !apiKey) return undefined;
+
+	console.log(baseUrl, apiKey);
+
+	return createClient<paths>({
+		baseUrl,
+		headers: {
+			'X-Api-Key': apiKey
+		}
+	});
+}
 
 export const getRadarrMovies = (): Promise<RadarrMovie[]> =>
-	RadarrApi?.get('/api/v3/movie', {
-		params: {}
-	}).then((r) => r.data || []) || Promise.resolve([]);
+	getRadarrApi()
+		?.get('/api/v3/movie', {
+			params: {}
+		})
+		.then((r) => r.data || []) || Promise.resolve([]);
 
 export const getRadarrMovieByTmdbId = (tmdbId: string): Promise<RadarrMovie | undefined> =>
-	RadarrApi?.get('/api/v3/movie', {
-		params: {
-			query: {
-				tmdbId: Number(tmdbId)
+	getRadarrApi()
+		?.get('/api/v3/movie', {
+			params: {
+				query: {
+					tmdbId: Number(tmdbId)
+				}
 			}
-		}
-	}).then((r) => r.data?.find((m) => (m.tmdbId as any) == tmdbId)) || Promise.resolve(undefined);
+		})
+		.then((r) => r.data?.find((m) => (m.tmdbId as any) == tmdbId)) || Promise.resolve(undefined);
 
 export const addMovieToRadarr = async (tmdbId: number) => {
 	const tmdbMovie = await getTmdbMovie(tmdbId);
@@ -60,9 +68,9 @@ export const addMovieToRadarr = async (tmdbId: number) => {
 	if (!tmdbMovie) throw new Error('Movie not found');
 
 	const options: RadarrMovieOptions = {
-		qualityProfileId: get(settings).radarr.qualityProfileId,
-		profileId: get(settings).radarr.profileId,
-		rootFolderPath: get(settings).radarr.rootFolderPath,
+		qualityProfileId: get(settings)?.radarr.qualityProfileId || 0,
+		profileId: get(settings)?.radarr.profileId || 0,
+		rootFolderPath: get(settings)?.radarr.rootFolderPath || '',
 		minimumAvailability: 'announced',
 		title: tmdbMovie.title || tmdbMovie.original_title || '',
 		tmdbId: tmdbMovie.id || 0,
@@ -73,60 +81,70 @@ export const addMovieToRadarr = async (tmdbId: number) => {
 	};
 
 	return (
-		RadarrApi?.post('/api/v3/movie', {
-			params: {},
-			body: options
-		}).then((r) => r.data) || Promise.resolve(undefined)
+		getRadarrApi()
+			?.post('/api/v3/movie', {
+				params: {},
+				body: options
+			})
+			.then((r) => r.data) || Promise.resolve(undefined)
 	);
 };
 
 export const cancelDownloadRadarrMovie = async (downloadId: number) => {
-	const deleteResponse = await RadarrApi?.del('/api/v3/queue/{id}', {
-		params: {
-			path: {
-				id: downloadId
-			},
-			query: {
-				blocklist: false,
-				removeFromClient: true
+	const deleteResponse = await getRadarrApi()
+		?.del('/api/v3/queue/{id}', {
+			params: {
+				path: {
+					id: downloadId
+				},
+				query: {
+					blocklist: false,
+					removeFromClient: true
+				}
 			}
-		}
-	}).then((r) => log(r));
+		})
+		.then((r) => log(r));
 
 	return !!deleteResponse?.response.ok;
 };
 
 export const fetchRadarrReleases = (movieId: number) =>
-	RadarrApi?.get('/api/v3/release', { params: { query: { movieId: movieId } } }).then(
-		(r) => r.data || []
-	) || Promise.resolve([]);
+	getRadarrApi()
+		?.get('/api/v3/release', { params: { query: { movieId: movieId } } })
+		.then((r) => r.data || []) || Promise.resolve([]);
 
 export const downloadRadarrMovie = (guid: string, indexerId: number) =>
-	RadarrApi?.post('/api/v3/release', {
-		params: {},
-		body: {
-			indexerId,
-			guid
-		}
-	}).then((res) => res.response.ok) || Promise.resolve(false);
+	getRadarrApi()
+		?.post('/api/v3/release', {
+			params: {},
+			body: {
+				indexerId,
+				guid
+			}
+		})
+		.then((res) => res.response.ok) || Promise.resolve(false);
 
 export const deleteRadarrMovie = (id: number) =>
-	RadarrApi?.del('/api/v3/moviefile/{id}', {
-		params: {
-			path: {
-				id
+	getRadarrApi()
+		?.del('/api/v3/moviefile/{id}', {
+			params: {
+				path: {
+					id
+				}
 			}
-		}
-	}).then((res) => res.response.ok) || Promise.resolve(false);
+		})
+		.then((res) => res.response.ok) || Promise.resolve(false);
 
 export const getRadarrDownloads = (): Promise<RadarrDownload[]> =>
-	RadarrApi?.get('/api/v3/queue', {
-		params: {
-			query: {
-				includeMovie: true
+	getRadarrApi()
+		?.get('/api/v3/queue', {
+			params: {
+				query: {
+					includeMovie: true
+				}
 			}
-		}
-	}).then((r) => (r.data?.records?.filter((record) => record.movie) as RadarrDownload[]) || []) ||
+		})
+		.then((r) => (r.data?.records?.filter((record) => record.movie) as RadarrDownload[]) || []) ||
 	Promise.resolve([]);
 
 export const getRadarrDownloadsById = (radarrId: number) =>
@@ -136,22 +154,41 @@ export const getRadarrDownloadsByTmdbId = (tmdbId: number) =>
 	getRadarrDownloads().then((downloads) => downloads.filter((d) => d.movie.tmdbId === tmdbId));
 
 const lookupRadarrMovieByTmdbId = (tmdbId: number) =>
-	RadarrApi?.get('/api/v3/movie/lookup/tmdb', {
-		params: {
-			query: {
-				tmdbId
+	getRadarrApi()
+		?.get('/api/v3/movie/lookup/tmdb', {
+			params: {
+				query: {
+					tmdbId
+				}
 			}
-		}
-	}).then((r) => r.data as any as RadarrMovie) || Promise.resolve(undefined);
+		})
+		.then((r) => r.data as any as RadarrMovie) || Promise.resolve(undefined);
 
 export const getDiskSpace = (): Promise<DiskSpaceInfo[]> =>
-	RadarrApi?.get('/api/v3/diskspace', {}).then((d) => d.data || []) || Promise.resolve([]);
+	getRadarrApi()
+		?.get('/api/v3/diskspace', {})
+		.then((d) => d.data || []) || Promise.resolve([]);
 
 export const removeFromRadarr = (id: number) =>
-	RadarrApi?.del('/api/v3/movie/{id}', {
-		params: {
-			path: {
-				id
+	getRadarrApi()
+		?.del('/api/v3/movie/{id}', {
+			params: {
+				path: {
+					id
+				}
 			}
-		}
-	}).then((res) => res.response.ok) || Promise.resolve(false);
+		})
+		.then((res) => res.response.ok) || Promise.resolve(false);
+
+export const getRadarrHealth = async (
+	baseUrl: string | undefined = undefined,
+	apiKey: string | undefined = undefined
+) =>
+	axios
+		.get((baseUrl || get(settings)?.radarr.baseUrl) + '/api/v3/health', {
+			headers: {
+				'X-Api-Key': apiKey || get(settings)?.radarr.apiKey
+			}
+		})
+		.then((res) => res.status === 200)
+		.catch(() => false);
diff --git a/src/lib/apis/sonarr/sonarrApi.ts b/src/lib/apis/sonarr/sonarrApi.ts
index 613344a..adad45e 100644
--- a/src/lib/apis/sonarr/sonarrApi.ts
+++ b/src/lib/apis/sonarr/sonarrApi.ts
@@ -1,10 +1,10 @@
 import type { components, paths } from '$lib/apis/sonarr/sonarr.generated';
-import { log } from '$lib/utils';
-import createClient from 'openapi-fetch';
-import { getTmdbSeries } from '../tmdb/tmdbApi';
-import { get } from 'svelte/store';
 import { settings } from '$lib/stores/settings.store';
-import { SONARR_API_KEY, SONARR_BASE_URL } from '$lib/constants';
+import { log } from '$lib/utils';
+import axios from 'axios';
+import createClient from 'openapi-fetch';
+import { get } from 'svelte/store';
+import { getTmdbSeries } from '../tmdb/tmdbApi';
 
 export type SonarrSeries = components['schemas']['SeriesResource'];
 export type SonarrReleaseResource = components['schemas']['ReleaseResource'];
@@ -38,38 +38,42 @@ export interface SonarrSeriesOptions {
 	};
 }
 
-export const sonarrAvailable = !!SONARR_BASE_URL && !!SONARR_API_KEY;
+function getSonarrApi() {
+	const baseUrl = get(settings)?.sonarr.baseUrl;
+	const apiKey = get(settings)?.sonarr.apiKey;
 
-export const SonarrApi =
-	SONARR_BASE_URL && SONARR_API_KEY
-		? createClient<paths>({
-				baseUrl: SONARR_BASE_URL,
-				headers: {
-					'X-Api-Key': SONARR_API_KEY
-				}
-		  })
-		: undefined;
+	if (!baseUrl || !apiKey) return undefined;
+
+	return createClient<paths>({
+		baseUrl,
+		headers: {
+			'X-Api-Key': apiKey
+		}
+	});
+}
 
 export const getSonarrSeries = (): Promise<SonarrSeries[]> =>
-	SonarrApi?.get('/api/v3/series', {
-		params: {}
-	}).then((r) => r.data || []) || Promise.resolve([]);
+	getSonarrApi()
+		?.get('/api/v3/series', {
+			params: {}
+		})
+		.then((r) => r.data || []) || Promise.resolve([]);
 
 export const getSonarrSeriesByTvdbId = (tvdbId: number): Promise<SonarrSeries | undefined> =>
-	SonarrApi?.get('/api/v3/series', {
-		params: {
-			query: {
-				tvdbId: tvdbId
+	getSonarrApi()
+		?.get('/api/v3/series', {
+			params: {
+				query: {
+					tvdbId: tvdbId
+				}
 			}
-		}
-	}).then((r) => r.data?.find((m) => m.tvdbId === tvdbId)) || Promise.resolve(undefined);
-
-export const getRadarrDownloadById = (sonarrId: number) =>
-	getSonarrDownloads().then((downloads) => downloads.find((d) => d.series.id === sonarrId)) ||
-	Promise.resolve(undefined);
+		})
+		.then((r) => r.data?.find((m) => m.tvdbId === tvdbId)) || Promise.resolve(undefined);
 
 export const getDiskSpace = (): Promise<DiskSpaceInfo[]> =>
-	SonarrApi?.get('/api/v3/diskspace', {}).then((d) => d.data || []) || Promise.resolve([]);
+	getSonarrApi()
+		?.get('/api/v3/diskspace', {})
+		.then((d) => d.data || []) || Promise.resolve([]);
 
 export const addSeriesToSonarr = async (tmdbId: number) => {
 	const tmdbSeries = await getTmdbSeries(tmdbId);
@@ -80,103 +84,120 @@ export const addSeriesToSonarr = async (tmdbId: number) => {
 	const options: SonarrSeriesOptions = {
 		title: tmdbSeries.name,
 		tvdbId: tmdbSeries.external_ids.tvdb_id,
-		qualityProfileId: get(settings).sonarr.qualityProfileId,
+		qualityProfileId: get(settings)?.sonarr.qualityProfileId || 0,
 		monitored: false,
 		addOptions: {
 			monitor: 'none',
 			searchForMissingEpisodes: false,
 			searchForCutoffUnmetEpisodes: false
 		},
-		rootFolderPath: get(settings).sonarr.rootFolderPath,
-		languageProfileId: get(settings).sonarr.languageProfileId,
+		rootFolderPath: get(settings)?.sonarr.rootFolderPath || '',
+		languageProfileId: get(settings)?.sonarr.languageProfileId || 0,
 		seasonFolder: true
 	};
 
-	return SonarrApi?.post('/api/v3/series', {
-		params: {},
-		body: options
-	}).then((r) => r.data);
+	return getSonarrApi()
+		?.post('/api/v3/series', {
+			params: {},
+			body: options
+		})
+		.then((r) => r.data);
 };
 
 export const cancelDownloadSonarrEpisode = async (downloadId: number) => {
-	const deleteResponse = await SonarrApi?.del('/api/v3/queue/{id}', {
-		params: {
-			path: {
-				id: downloadId
-			},
-			query: {
-				blocklist: false,
-				removeFromClient: true
+	const deleteResponse = await getSonarrApi()
+		?.del('/api/v3/queue/{id}', {
+			params: {
+				path: {
+					id: downloadId
+				},
+				query: {
+					blocklist: false,
+					removeFromClient: true
+				}
 			}
-		}
-	}).then((r) => log(r));
+		})
+		.then((r) => log(r));
 
 	return !!deleteResponse?.response.ok;
 };
 
 export const downloadSonarrEpisode = (guid: string, indexerId: number) =>
-	SonarrApi?.post('/api/v3/release', {
-		params: {},
-		body: {
-			indexerId,
-			guid
-		}
-	}).then((res) => res.response.ok) || Promise.resolve(false);
+	getSonarrApi()
+		?.post('/api/v3/release', {
+			params: {},
+			body: {
+				indexerId,
+				guid
+			}
+		})
+		.then((res) => res.response.ok) || Promise.resolve(false);
 
 export const deleteSonarrEpisode = (id: number) =>
-	SonarrApi?.del('/api/v3/episodefile/{id}', {
-		params: {
-			path: {
-				id
+	getSonarrApi()
+		?.del('/api/v3/episodefile/{id}', {
+			params: {
+				path: {
+					id
+				}
 			}
-		}
-	}).then((res) => res.response.ok) || Promise.resolve(false);
+		})
+		.then((res) => res.response.ok) || Promise.resolve(false);
 
 export const getSonarrDownloads = (): Promise<SonarrDownload[]> =>
-	SonarrApi?.get('/api/v3/queue', {
-		params: {
-			query: {
-				includeEpisode: true,
-				includeSeries: true
+	getSonarrApi()
+		?.get('/api/v3/queue', {
+			params: {
+				query: {
+					includeEpisode: true,
+					includeSeries: true
+				}
 			}
-		}
-	}).then(
-		(r) =>
-			(r.data?.records?.filter((record) => record.episode && record.series) as SonarrDownload[]) ||
-			[]
-	) || Promise.resolve([]);
+		})
+		.then(
+			(r) =>
+				(r.data?.records?.filter(
+					(record) => record.episode && record.series
+				) as SonarrDownload[]) || []
+		) || Promise.resolve([]);
 
 export const getSonarrDownloadsById = (sonarrId: number) =>
 	getSonarrDownloads().then((downloads) => downloads.filter((d) => d.seriesId === sonarrId)) ||
 	Promise.resolve([]);
 
 export const removeFromSonarr = (id: number): Promise<boolean> =>
-	SonarrApi?.del('/api/v3/series/{id}', {
-		params: {
-			path: {
-				id
+	getSonarrApi()
+		?.del('/api/v3/series/{id}', {
+			params: {
+				path: {
+					id
+				}
 			}
-		}
-	}).then((res) => res.response.ok) || Promise.resolve(false);
+		})
+		.then((res) => res.response.ok) || Promise.resolve(false);
 
 export const getSonarrEpisodes = async (seriesId: number) => {
 	const episodesPromise =
-		SonarrApi?.get('/api/v3/episode', {
-			params: {
-				query: {
-					seriesId
+		getSonarrApi()
+			?.get('/api/v3/episode', {
+				params: {
+					query: {
+						seriesId
+					}
 				}
-			}
-		}).then((r) => r.data || []) || Promise.resolve([]);
+			})
+			.then((r) => r.data || []) || Promise.resolve([]);
 
 	const episodeFilesPromise =
-		SonarrApi?.get('/api/v3/episodefile', {
-			params: {
-				query: {
-					seriesId
+		getSonarrApi()
+			?.get('/api/v3/episodefile', {
+				params: {
+					query: {
+						seriesId
+					}
 				}
-			}
-		}).then((r) => r.data || []) || Promise.resolve([]);
+			})
+			.then((r) => r.data || []) || Promise.resolve([]);
 
 	const episodes = await episodesPromise;
 	const episodeFiles = await episodeFilesPromise;
@@ -188,32 +209,51 @@ export const getSonarrEpisodes = async (seriesId: number) => {
 };
 
 export const fetchSonarrReleases = async (episodeId: number) =>
-	SonarrApi?.get('/api/v3/release', {
-		params: {
-			query: {
-				episodeId
+	getSonarrApi()
+		?.get('/api/v3/release', {
+			params: {
+				query: {
+					episodeId
+				}
 			}
-		}
-	}).then((r) => r.data || []) || Promise.resolve([]);
+		})
+		.then((r) => r.data || []) || Promise.resolve([]);
 
 export const fetchSonarrSeasonReleases = async (seriesId: number, seasonNumber: number) =>
-	SonarrApi?.get('/api/v3/release', {
-		params: {
-			query: {
-				seriesId,
-				seasonNumber
+	getSonarrApi()
+		?.get('/api/v3/release', {
+			params: {
+				query: {
+					seriesId,
+					seasonNumber
+				}
 			}
-		}
-	}).then((r) => r.data || []) || Promise.resolve([]);
+		})
+		.then((r) => r.data || []) || Promise.resolve([]);
 
 export const fetchSonarrEpisodes = async (seriesId: number): Promise<SonarrEpisode[]> => {
 	return (
-		SonarrApi?.get('/api/v3/episode', {
-			params: {
-				query: {
-					seriesId
+		getSonarrApi()
+			?.get('/api/v3/episode', {
+				params: {
+					query: {
+						seriesId
+					}
 				}
-			}
-		}).then((r) => r.data || []) || Promise.resolve([])
+			})
+			.then((r) => r.data || []) || Promise.resolve([])
 	);
 };
+
+export const getSonarrHealth = async (
+	baseUrl: string | undefined = undefined,
+	apiKey: string | undefined = undefined
+) =>
+	axios
+		.get((baseUrl || get(settings)?.sonarr.baseUrl) + '/api/v3/health', {
+			headers: {
+				'X-Api-Key': apiKey || get(settings)?.sonarr.apiKey
+			}
+		})
+		.then((res) => res.status === 200)
+		.catch(() => false);
diff --git a/src/lib/apis/tmdb/tmdbApi.ts b/src/lib/apis/tmdb/tmdbApi.ts
index 9d2d666..28529b2 100644
--- a/src/lib/apis/tmdb/tmdbApi.ts
+++ b/src/lib/apis/tmdb/tmdbApi.ts
@@ -70,7 +70,7 @@ export const getTmdbMovie = async (tmdbId: number) =>
 			},
 			query: {
 				append_to_response: 'videos,credits,external_ids,images',
-				...({ include_image_language: get(settings).language + ',en,null' } as any)
+				...({ include_image_language: get(settings)?.language + ',en,null' } as any)
 			}
 		}
 	}).then((res) => res.data as TmdbMovieFull2 | undefined);
@@ -101,7 +101,7 @@ export const getTmdbSeries = async (tmdbId: number): Promise<TmdbSeriesFull2 | u
 			},
 			query: {
 				append_to_response: 'videos,aggregate_credits,external_ids,images',
-				...({ include_image_language: get(settings).language + ',en,null' } as any)
+				...({ include_image_language: get(settings)?.language + ',en,null' } as any)
 			}
 		},
 		headers: {
@@ -158,7 +158,7 @@ export const getTmdbSeriesBackdrop = async (tmdbId: number) =>
 			.then(
 				(r) =>
 					(
-						r?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
+						r?.backdrops?.find((b) => b.iso_639_1 === get(settings)?.language) ||
 						r?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
 						r?.backdrops?.find((b) => b.iso_639_1) ||
 						r?.backdrops?.[0]
@@ -173,7 +173,7 @@ export const getTmdbMovieBackdrop = async (tmdbId: number) =>
 			.then(
 				(r) =>
 					(
-						r?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
+						r?.backdrops?.find((b) => b.iso_639_1 === get(settings)?.language) ||
 						r?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
 						r?.backdrops?.find((b) => b.iso_639_1) ||
 						r?.backdrops?.[0]
@@ -193,8 +193,8 @@ export const getTmdbPopularMovies = () =>
 	TmdbApiOpen.get('/3/movie/popular', {
 		params: {
 			query: {
-				language: get(settings).language,
-				region: get(settings).region
+				language: get(settings)?.language,
+				region: get(settings)?.region
 			}
 		}
 	}).then((res) => res.data?.results || []);
@@ -203,7 +203,7 @@ export const getTmdbPopularSeries = () =>
 	TmdbApiOpen.get('/3/tv/popular', {
 		params: {
 			query: {
-				language: get(settings).language
+				language: get(settings)?.language
 			}
 		}
 	}).then((res) => res.data?.results || []);
@@ -215,7 +215,7 @@ export const getTmdbTrendingAll = () =>
 				time_window: 'day'
 			},
 			query: {
-				language: get(settings).language
+				language: get(settings)?.language
 			}
 		}
 	}).then((res) => res.data?.results || []);
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 7ef9676..6d924ed 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -19,7 +19,7 @@
 			'bg-white text-zinc-900 font-extrabold backdrop-blur-lg rounded-xl': type === 'primary',
 			'hover:bg-amber-400 focus-within:bg-amber-400 hover:border-amber-400 focus-within:border-amber-400':
 				type === 'primary' && !disabled,
-			'text-zinc-200 bg-zinc-400 bg-opacity-20 backdrop-blur-lg rounded-xl': type === 'secondary',
+			'text-zinc-200 bg-zinc-600 bg-opacity-20 backdrop-blur-lg rounded-xl': type === 'secondary',
 			'focus-visible:bg-zinc-200 focus-visible:text-zinc-800 hover:bg-zinc-200 hover:text-zinc-800':
 				(type === 'secondary' || type === 'tertiary') && !disabled,
 			'rounded-full': type === 'tertiary',
diff --git a/src/lib/components/ContextMenu/LibraryItemContextItems.svelte b/src/lib/components/ContextMenu/LibraryItemContextItems.svelte
index a85d8ae..c4e8cad 100644
--- a/src/lib/components/ContextMenu/LibraryItemContextItems.svelte
+++ b/src/lib/components/ContextMenu/LibraryItemContextItems.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { setJellyfinItemUnwatched, setJellyfinItemWatched } from '$lib/apis/jellyfin/jellyfinApi';
-	import { JELLYFIN_BASE_URL, RADARR_BASE_URL, SONARR_BASE_URL } from '$lib/constants';
 	import { library, type LibraryItemStore } from '$lib/stores/library.store';
+	import { settings } from '$lib/stores/settings.store';
 	import type { TitleType } from '$lib/types';
 	import ContextMenuDivider from './ContextMenuDivider.svelte';
 	import ContextMenuItem from './ContextMenuItem.svelte';
@@ -36,7 +36,9 @@
 
 	function handleOpenInJellyfin() {
 		window.open(
-			JELLYFIN_BASE_URL + '/web/index.html#!/details?id=' + $itemStore.item?.jellyfinItem?.Id
+			$settings.jellyfin.baseUrl +
+				'/web/index.html#!/details?id=' +
+				$itemStore.item?.jellyfinItem?.Id
 		);
 	}
 </script>
@@ -59,7 +61,7 @@
 		<ContextMenuItem
 			disabled={!$itemStore.item.radarrMovie}
 			on:click={() =>
-				window.open(RADARR_BASE_URL + '/movie/' + $itemStore.item?.radarrMovie?.tmdbId)}
+				window.open($settings.radarr.baseUrl + '/movie/' + $itemStore.item?.radarrMovie?.tmdbId)}
 		>
 			Open in Radarr
 		</ContextMenuItem>
@@ -67,7 +69,9 @@
 		<ContextMenuItem
 			disabled={!$itemStore.item.sonarrSeries}
 			on:click={() =>
-				window.open(SONARR_BASE_URL + '/series/' + $itemStore.item?.sonarrSeries?.titleSlug)}
+				window.open(
+					$settings.sonarr.baseUrl + '/series/' + $itemStore.item?.sonarrSeries?.titleSlug
+				)}
 		>
 			Open in Sonarr
 		</ContextMenuItem>
diff --git a/src/lib/components/SourceStats/RadarrStats.svelte b/src/lib/components/SourceStats/RadarrStats.svelte
index 1652659..f9e1eb1 100644
--- a/src/lib/components/SourceStats/RadarrStats.svelte
+++ b/src/lib/components/SourceStats/RadarrStats.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getDiskSpace } from '$lib/apis/radarr/radarrApi';
-	import { RADARR_BASE_URL } from '$lib/constants';
 	import { library } from '$lib/stores/library.store';
+	import { settings } from '$lib/stores/settings.store';
 	import { formatSize } from '$lib/utils.js';
 	import RadarrIcon from '../svgs/RadarrIcon.svelte';
 	import StatsContainer from './StatsContainer.svelte';
@@ -46,7 +46,7 @@
 		{large}
 		title="Radarr"
 		subtitle="Movies Provider"
-		href={RADARR_BASE_URL}
+		href={$settings.radarr.baseUrl || '#'}
 		stats={[
 			{ title: 'Movies', value: String(moviesCount) },
 			{ title: 'Space Taken', value: formatSize(spaceOccupied) },
diff --git a/src/lib/components/SourceStats/SonarrStats.svelte b/src/lib/components/SourceStats/SonarrStats.svelte
index 36af508..64e2316 100644
--- a/src/lib/components/SourceStats/SonarrStats.svelte
+++ b/src/lib/components/SourceStats/SonarrStats.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getDiskSpace } from '$lib/apis/sonarr/sonarrApi';
-	import { SONARR_BASE_URL } from '$lib/constants';
 	import { library } from '$lib/stores/library.store';
+	import { settings } from '$lib/stores/settings.store';
 	import { formatSize } from '$lib/utils.js';
 	import SonarrIcon from '../svgs/SonarrIcon.svelte';
 	import StatsContainer from './StatsContainer.svelte';
@@ -47,7 +47,7 @@
 		{large}
 		title="Sonarr"
 		subtitle="Shows Provider"
-		href={SONARR_BASE_URL}
+		href={$settings.sonarr.baseUrl || '#'}
 		stats={[
 			{ title: 'Episodes', value: String(episodesCount) },
 			{ title: 'Space Taken', value: formatSize(spaceOccupied) },
diff --git a/src/lib/components/VideoPlayer/VideoPlayer.svelte b/src/lib/components/VideoPlayer/VideoPlayer.svelte
index 55e03a3..b77abfe 100644
--- a/src/lib/components/VideoPlayer/VideoPlayer.svelte
+++ b/src/lib/components/VideoPlayer/VideoPlayer.svelte
@@ -1,38 +1,38 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
 	import {
+		delteActiveEncoding as deleteActiveEncoding,
 		getJellyfinItem,
 		getJellyfinPlaybackInfo,
 		reportJellyfinPlaybackProgress,
 		reportJellyfinPlaybackStarted,
-		reportJellyfinPlaybackStopped,
-		delteActiveEncoding as deleteActiveEncoding
+		reportJellyfinPlaybackStopped
 	} from '$lib/apis/jellyfin/jellyfinApi';
-	import { getQualities } from '$lib/apis/jellyfin/qualities';
 	import getDeviceProfile from '$lib/apis/jellyfin/playback-profiles';
+	import { getQualities } from '$lib/apis/jellyfin/qualities';
+	import { settings } from '$lib/stores/settings.store';
 	import classNames from 'classnames';
 	import Hls from 'hls.js';
 	import {
 		Cross2,
-		Play,
-		Pause,
 		EnterFullScreen,
 		ExitFullScreen,
+		Gear,
+		Pause,
+		Play,
 		SpeakerLoud,
 		SpeakerModerate,
-		SpeakerQuiet,
 		SpeakerOff,
-		Gear
+		SpeakerQuiet
 	} from 'radix-icons-svelte';
 	import { onDestroy, onMount } from 'svelte';
-	import IconButton from '../IconButton.svelte';
-	import { playerState } from './VideoPlayer';
-	import { modalStack } from '../Modal/Modal';
-	import { JELLYFIN_BASE_URL } from '$lib/constants';
+	import { fade } from 'svelte/transition';
 	import { contextMenu } from '../ContextMenu/ContextMenu';
-	import Slider from './Slider.svelte';
 	import ContextMenu from '../ContextMenu/ContextMenu.svelte';
 	import SelectableContextMenuItem from '../ContextMenu/SelectableContextMenuItem.svelte';
+	import IconButton from '../IconButton.svelte';
+	import { modalStack } from '../Modal/Modal';
+	import Slider from './Slider.svelte';
+	import { playerState } from './VideoPlayer';
 
 	export let modalId: symbol;
 
@@ -138,7 +138,7 @@
 				}
 
 				video.poster = item?.BackdropImageTags?.length
-					? `${JELLYFIN_BASE_URL}/Items/${item?.Id}/Images/Backdrop?quality=100&tag=${item?.BackdropImageTags?.[0]}`
+					? `${$settings.jellyfin.baseUrl}/Items/${item?.Id}/Images/Backdrop?quality=100&tag=${item?.BackdropImageTags?.[0]}`
 					: '';
 
 				videoLoaded = false;
@@ -146,7 +146,7 @@
 					if (Hls.isSupported()) {
 						const hls = new Hls();
 
-						hls.loadSource(JELLYFIN_BASE_URL + playbackUri);
+						hls.loadSource($settings.jellyfin.baseUrl + playbackUri);
 						hls.attachMedia(video);
 					} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
 						/*
@@ -154,12 +154,12 @@
 						 * This is not a problem, since HLS is natively supported on iOS. But any other browser
 						 * that does not support MSE will not be able to play the video.
 						 */
-						video.src = JELLYFIN_BASE_URL + playbackUri;
+						video.src = $settings.jellyfin.baseUrl + playbackUri;
 					} else {
 						throw new Error('HLS is not supported');
 					}
 				} else {
-					video.src = JELLYFIN_BASE_URL + playbackUri;
+					video.src = $settings.jellyfin.baseUrl + playbackUri;
 				}
 
 				resolution = item?.Height || 1080;
diff --git a/src/lib/components/forms/FormButton.svelte b/src/lib/components/forms/FormButton.svelte
new file mode 100644
index 0000000..6ad81c7
--- /dev/null
+++ b/src/lib/components/forms/FormButton.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { Update } from 'radix-icons-svelte';
+	export let type: 'base' | 'success' | 'error' = 'base';
+	export let loading = false;
+	export let disabled = false;
+</script>
+
+<button
+	on:click
+	class={classNames(
+		'p-1.5 px-4 text-sm text-zinc-200 rounded-lg border border-zinc-800',
+		'hover:bg-opacity-30 transition-colors',
+		'flex items-center gap-2',
+		{
+			'bg-green-600 bg-opacity-20 text-green-200 border-green-800': type === 'success',
+			'bg-red-600 bg-opacity-20 text-red-200 border-red-800': type === 'error',
+			'bg-zinc-600 bg-opacity-20': type === 'base',
+			'cursor-not-allowed opacity-75 pointer-events-none': disabled || loading
+		},
+		$$restProps.class
+	)}
+>
+	{#if loading}
+		<Update class="animate-spin" size={14} />
+	{/if}
+	<slot />
+</button>
diff --git a/src/lib/components/forms/Input.svelte b/src/lib/components/forms/Input.svelte
new file mode 100644
index 0000000..99f5d2e
--- /dev/null
+++ b/src/lib/components/forms/Input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let type: 'text' | 'number' = 'text';
+	export let value: any = type === 'text' ? '' : 0;
+	export let placeholder = '';
+
+	const baseStyles =
+		'appearance-none p-1 px-3 selectable border border-zinc-800 rounded-lg bg-zinc-600 bg-opacity-20 text-zinc-200';
+</script>
+
+<div class="relative">
+	{#if type === 'text'}
+		<input type="text" {placeholder} bind:value class={classNames(baseStyles, $$restProps.class)} />
+	{:else if type === 'number'}
+		<input
+			type="number"
+			{placeholder}
+			bind:value
+			class={classNames(baseStyles, 'w-28', $$restProps.class)}
+		/>
+	{/if}
+</div>
diff --git a/src/lib/components/forms/Select.svelte b/src/lib/components/forms/Select.svelte
new file mode 100644
index 0000000..929e662
--- /dev/null
+++ b/src/lib/components/forms/Select.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { CaretDown } from 'radix-icons-svelte';
+
+	export let value: any = '';
+	export let disabled = false;
+</script>
+
+<div
+	class={classNames('relative w-max min-w-[8rem]', {
+		'opacity-50': disabled
+	})}
+>
+	<select
+		on:change
+		bind:value
+		class={classNames(
+			'appearance-none p-1 pl-3 pr-8 selectable border border-zinc-800 rounded-lg bg-zinc-600 bg-opacity-20 w-full',
+			{
+				'cursor-not-allowed pointer-events-none': disabled
+			}
+		)}
+	>
+		<slot />
+	</select>
+	<div class="absolute inset-y-0 right-2 flex items-center justify-center">
+		<CaretDown size={20} />
+	</div>
+</div>
diff --git a/src/lib/components/forms/Toggle.svelte b/src/lib/components/forms/Toggle.svelte
new file mode 100644
index 0000000..6001af1
--- /dev/null
+++ b/src/lib/components/forms/Toggle.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let checked = false;
+</script>
+
+<label class="relative inline-flex items-center cursor-pointer w-min h-min">
+	<input type="checkbox" bind:checked class="sr-only peer" />
+	<div
+		class="w-11 h-6 rounded-full peer bg-zinc-600 bg-opacity-20 peer-checked:bg-amber-200 peer-checked:bg-opacity-30 peer-selectable
+        after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px]"
+	/>
+</label>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index ebc9009..0256d32 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,18 +1,6 @@
-import { env } from '$env/dynamic/public';
-
 export const TMDB_API_KEY =
 	'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0YTZiMDIxZTE5Y2YxOTljMTM1NGFhMGRiMDZiOTkzMiIsInN1YiI6IjY0ODYzYWRmMDI4ZjE0MDExZTU1MDkwMiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.yyMkZlhGOGBHtw1yvpBVUUHhu7IKVYho49MvNNKt_wY';
 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 RADARR_API_KEY = env.PUBLIC_RADARR_API_KEY;
-export const RADARR_BASE_URL = env.PUBLIC_RADARR_BASE_URL;
-
-export const SONARR_API_KEY = env.PUBLIC_SONARR_API_KEY;
-export const SONARR_BASE_URL = env.PUBLIC_SONARR_BASE_URL;
-
-export const JELLYFIN_API_KEY = env.PUBLIC_JELLYFIN_API_KEY;
-export const JELLYFIN_BASE_URL = env.PUBLIC_JELLYFIN_URL || env.PUBLIC_JELLYFIN_BASE_URL; // Backwards compatibility
-export const JELLYFIN_USER_ID = env.PUBLIC_JELLYFIN_USER_ID;
diff --git a/src/lib/entities/Settings.ts b/src/lib/entities/Settings.ts
index 971a9b3..720827b 100644
--- a/src/lib/entities/Settings.ts
+++ b/src/lib/entities/Settings.ts
@@ -1,3 +1,4 @@
+import type { SettingsValues } from '$lib/stores/settings.store';
 import { BaseEntity, Column, Entity, PrimaryColumn } from 'typeorm';
 
 @Entity({ name: 'settings' })
@@ -33,6 +34,12 @@ export class Settings extends BaseEntity {
 
 	// Sonarr
 
+	@Column('text', { nullable: true, default: null })
+	sonarrBaseUrl: string | null;
+
+	@Column('text', { nullable: true, default: null })
+	sonarrApiKey: string | null;
+
 	@Column('integer', { default: 0 })
 	sonarrQualityProfileId: number;
 
@@ -44,6 +51,12 @@ export class Settings extends BaseEntity {
 
 	// Radarr
 
+	@Column('text', { nullable: true, default: null })
+	radarrBaseUrl: string | null;
+
+	@Column('text', { nullable: true, default: null })
+	radarrApiKey: string | null;
+
 	@Column('integer', { default: 0 })
 	radarrQualityProfileId: number;
 
@@ -55,8 +68,14 @@ export class Settings extends BaseEntity {
 
 	// Jellyfin
 
-	@Column('text', { default: '' })
-	jellyfinUserId: string;
+	@Column('text', { nullable: true, default: null })
+	jellyfinBaseUrl: string | null;
+
+	@Column('text', { nullable: true, default: null })
+	jellyfinApiKey: string | null;
+
+	@Column('text', { nullable: true, default: null })
+	jellyfinUserId: string | null;
 
 	// Playback
 
@@ -75,4 +94,25 @@ export class Settings extends BaseEntity {
 
 		return settings;
 	}
+
+	public static async set(name: string, values: SettingsValues): Promise<Settings | null> {
+		const settings = await this.findOne({ where: { name } });
+
+		if (!settings) return null;
+
+		settings.autoplayTrailers = values.autoplayTrailers;
+
+		settings.radarrApiKey = values.radarr.apiKey;
+		settings.radarrBaseUrl = values.radarr.baseUrl;
+
+		settings.sonarrApiKey = values.sonarr.apiKey;
+		settings.sonarrBaseUrl = values.sonarr.baseUrl;
+
+		settings.jellyfinApiKey = values.jellyfin.apiKey;
+		settings.jellyfinBaseUrl = values.jellyfin.baseUrl;
+		settings.jellyfinUserId = values.jellyfin.userId;
+		await settings.save();
+
+		return settings;
+	}
 }
diff --git a/src/lib/stores/library.store.ts b/src/lib/stores/library.store.ts
index 56579ab..c75085b 100644
--- a/src/lib/stores/library.store.ts
+++ b/src/lib/stores/library.store.ts
@@ -26,6 +26,7 @@ import {
 import { TMDB_BACKDROP_SMALL, TMDB_POSTER_SMALL } from '$lib/constants';
 import type { TitleType } from '$lib/types';
 import { get, writable } from 'svelte/store';
+import { settings } from './settings.store';
 
 export interface PlayableItem {
 	tmdbRating: number;
@@ -222,8 +223,6 @@ async function getLibrary(): Promise<Library> {
 				? `http://jellyfin.home/Items/${jellyfinItem?.Id}/Images/Backdrop?quality=100&tag=${jellyfinItem?.ImageTags?.Primary}`
 				: '';
 
-			console.log(jellyfinItem);
-
 			const type: TitleType = jellyfinItem.Type === 'Movie' ? 'movie' : 'series';
 
 			const playableItem: PlayableItem = {
@@ -258,9 +257,23 @@ async function getLibrary(): Promise<Library> {
 	};
 }
 
+async function waitForSettings() {
+	return new Promise((resolve) => {
+		let resolved = false;
+		settings.subscribe((settings) => {
+			if (settings?.initialised && !resolved) {
+				resolved = true;
+				resolve(settings);
+			}
+		});
+	});
+}
+
 let delayedRefreshTimeout: NodeJS.Timeout;
 function createLibraryStore() {
-	const { update, set, ...library } = writable<Promise<Library>>(getLibrary()); //TODO promise to undefined
+	const { update, set, ...library } = writable<Promise<Library>>(
+		waitForSettings().then(() => getLibrary())
+	); //TODO promise to undefined
 
 	async function filterNotInLibrary<T>(toFilter: T[], getTmdbId: (item: T) => number) {
 		const libraryData = await get(library);
diff --git a/src/lib/stores/settings.store.ts b/src/lib/stores/settings.store.ts
index 06a6947..9157366 100644
--- a/src/lib/stores/settings.store.ts
+++ b/src/lib/stores/settings.store.ts
@@ -1,6 +1,7 @@
 import { get, writable } from 'svelte/store';
 
 export interface SettingsValues {
+	initialised: boolean;
 	autoplayTrailers: boolean;
 	excludeLibraryItemsFromDiscovery: boolean;
 	language: string;
@@ -11,17 +12,23 @@ export interface SettingsValues {
 		filterBasedOnLanguage: boolean;
 	};
 	sonarr: {
+		baseUrl: string | null;
+		apiKey: string | null;
 		qualityProfileId: number;
 		rootFolderPath: string;
 		languageProfileId: number;
 	};
 	radarr: {
+		baseUrl: string | null;
+		apiKey: string | null;
 		qualityProfileId: number;
 		profileId: number;
 		rootFolderPath: string;
 	};
 	jellyfin: {
-		userId: string;
+		baseUrl: string | null;
+		apiKey: string | null;
+		userId: string | null;
 	};
 	playback: {
 		preferredPlaybackSource: 'reiverr' | 'jellyfin';
@@ -29,6 +36,7 @@ export interface SettingsValues {
 }
 
 export const defaultSettings: SettingsValues = {
+	initialised: false,
 	autoplayTrailers: true,
 	excludeLibraryItemsFromDiscovery: true,
 	language: 'en',
@@ -39,28 +47,34 @@ export const defaultSettings: SettingsValues = {
 		includedLanguages: ['en']
 	},
 	sonarr: {
+		apiKey: null,
+		baseUrl: null,
 		qualityProfileId: 4,
 		rootFolderPath: '/tv',
 		languageProfileId: 1
 	},
 	radarr: {
+		apiKey: null,
+		baseUrl: null,
 		qualityProfileId: 4,
 		profileId: 4,
 		rootFolderPath: '/movies'
 	},
 	jellyfin: {
-		userId: ''
+		apiKey: null,
+		baseUrl: null,
+		userId: null
 	},
 	playback: {
 		preferredPlaybackSource: 'reiverr'
 	}
 };
 
-export const settings = writable<SettingsValues>();
+export const settings = writable<SettingsValues>(defaultSettings);
 
 export const getIncludedLanguagesQuery = () => {
 	const settingsValue = get(settings);
-	if (settingsValue.discover.filterBasedOnLanguage) {
+	if (settingsValue?.discover.filterBasedOnLanguage) {
 		return { with_original_language: settingsValue.language };
 	}
 
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index d0d7185..c1fa70c 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,44 +1,10 @@
-import {
-	JELLYFIN_API_KEY,
-	JELLYFIN_BASE_URL,
-	RADARR_API_KEY,
-	RADARR_BASE_URL,
-	SONARR_API_KEY,
-	SONARR_BASE_URL
-} from '$lib/constants';
 import { Settings } from '$lib/entities/Settings';
 import type { LayoutServerLoad } from './$types';
 
-export type MissingEnvironmentVariables = {
-	PUBLIC_RADARR_API_KEY: boolean;
-	PUBLIC_RADARR_BASE_URL: boolean;
-	PUBLIC_SONARR_API_KEY: boolean;
-	PUBLIC_SONARR_BASE_URL: boolean;
-	PUBLIC_JELLYFIN_API_KEY: boolean;
-	PUBLIC_JELLYFIN_URL: boolean;
-};
-
 export const load: LayoutServerLoad = async () => {
 	const settings = await Settings.get();
 
-	const isApplicationSetUp =
-		!!RADARR_API_KEY &&
-		!!RADARR_BASE_URL &&
-		!!SONARR_API_KEY &&
-		!!SONARR_BASE_URL &&
-		!!JELLYFIN_API_KEY &&
-		!!JELLYFIN_BASE_URL;
-
 	return {
-		settings: JSON.parse(JSON.stringify(settings)),
-		isApplicationSetUp,
-		missingEnvironmentVariables: {
-			PUBLIC_RADARR_API_KEY: !RADARR_API_KEY,
-			PUBLIC_RADARR_BASE_URL: !RADARR_BASE_URL,
-			PUBLIC_SONARR_API_KEY: !SONARR_API_KEY,
-			PUBLIC_SONARR_BASE_URL: !SONARR_BASE_URL,
-			PUBLIC_JELLYFIN_API_KEY: !JELLYFIN_API_KEY,
-			PUBLIC_JELLYFIN_URL: !JELLYFIN_BASE_URL
-		}
+		settings: JSON.parse(JSON.stringify(settings)) as Settings
 	};
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cf912ae..afe940f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,10 +3,35 @@
 	import DynamicModal from '$lib/components/Modal/DynamicModal.svelte';
 	import Navbar from '$lib/components/Navbar/Navbar.svelte';
 	import UpdateChecker from '$lib/components/UpdateChecker.svelte';
+	import { type SettingsValues, defaultSettings, settings } from '$lib/stores/settings.store';
+	import { writable } from 'svelte/store';
 	import '../app.css';
-	import type { LayoutData } from './$types';
+	import type { LayoutServerData } from './$types';
 
-	export let data: LayoutData;
+	export let data: LayoutServerData;
+	const settingsData = data.settings;
+
+	settings.set({
+		...defaultSettings,
+		autoplayTrailers: settingsData.autoplayTrailers,
+		sonarr: {
+			...defaultSettings.sonarr,
+			apiKey: settingsData.sonarrApiKey,
+			baseUrl: settingsData.sonarrBaseUrl
+		},
+		radarr: {
+			...defaultSettings.radarr,
+			apiKey: settingsData.radarrApiKey,
+			baseUrl: settingsData.radarrBaseUrl
+		},
+		jellyfin: {
+			...defaultSettings.jellyfin,
+			apiKey: settingsData.jellyfinApiKey,
+			baseUrl: settingsData.jellyfinBaseUrl,
+			userId: settingsData.jellyfinUserId
+		},
+		initialised: true
+	});
 </script>
 
 <!-- {#if data.isApplicationSetUp} -->
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c995573..bf65c01 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,17 +5,7 @@
 	import Poster from '$lib/components/Poster/Poster.svelte';
 	import TitleShowcase from '$lib/components/TitleShowcase/TitleShowcase.svelte';
 	import { library } from '$lib/stores/library.store';
-	import { defaultSettings, settings } from '$lib/stores/settings.store';
 	import type { ComponentProps } from 'svelte';
-	import type { LayoutServerData } from './$types';
-
-	export let data: LayoutServerData;
-	const settingsData = data.settings;
-
-	settings.set({
-		...defaultSettings,
-		autoplayTrailers: settingsData.autoplayTrailers
-	});
 
 	let continueWatchingVisible = true;
 
diff --git a/src/routes/api/settings/+server.ts b/src/routes/api/settings/+server.ts
index dfb43ca..ab048b7 100644
--- a/src/routes/api/settings/+server.ts
+++ b/src/routes/api/settings/+server.ts
@@ -4,3 +4,8 @@ import { json, type RequestHandler } from '@sveltejs/kit';
 export const GET: RequestHandler = async ({ url }) => {
 	return json(await Settings.get());
 };
+
+export const POST: RequestHandler = async ({ request }) => {
+	const values = await request.json();
+	return json(await Settings.set('default', values));
+};
diff --git a/src/routes/movie/[id]/MoviePage.svelte b/src/routes/movie/[id]/MoviePage.svelte
index 1fc4e87..61929b6 100644
--- a/src/routes/movie/[id]/MoviePage.svelte
+++ b/src/routes/movie/[id]/MoviePage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { addMovieToRadarr, radarrAvailable } from '$lib/apis/radarr/radarrApi';
+	import { addMovieToRadarr } from '$lib/apis/radarr/radarrApi';
 	import {
 		getTmdbMovie,
 		getTmdbMovieRecommendations,
@@ -9,7 +9,6 @@
 	import Card from '$lib/components/Card/Card.svelte';
 	import { fetchCardTmdbProps } from '$lib/components/Card/card';
 	import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
-	import ContextMenuButton from '$lib/components/ContextMenu/ContextMenuButton.svelte';
 	import { modalStack } from '$lib/components/Modal/Modal';
 	import PeopleCard from '$lib/components/PeopleCard/PeopleCard.svelte';
 	import ProgressBar from '$lib/components/ProgressBar.svelte';
@@ -18,6 +17,7 @@
 	import TitlePageLayout from '$lib/components/TitlePageLayout/TitlePageLayout.svelte';
 	import { playerState } from '$lib/components/VideoPlayer/VideoPlayer';
 	import { createLibraryItemStore, library } from '$lib/stores/library.store';
+	import { settings } from '$lib/stores/settings.store';
 	import { formatMinutesToTime, formatSize } from '$lib/utils';
 	import classNames from 'classnames';
 	import { Archive, ChevronRight, Plus } from 'radix-icons-svelte';
@@ -125,7 +125,7 @@
 						<Button type="primary" on:click={play}>
 							<span>Watch</span><ChevronRight size={20} />
 						</Button>
-					{:else if !$itemStore.item?.radarrMovie && radarrAvailable}
+					{:else if !$itemStore.item?.radarrMovie && $settings.radarr.baseUrl && $settings.radarr.apiKey}
 						<Button type="primary" disabled={addToRadarrLoading} on:click={addToRadarr}>
 							<span>Add to Radarr</span><Plus size={20} />
 						</Button>
diff --git a/src/routes/series/[id]/SeriesPage.svelte b/src/routes/series/[id]/SeriesPage.svelte
index 075bd0f..f5e45e5 100644
--- a/src/routes/series/[id]/SeriesPage.svelte
+++ b/src/routes/series/[id]/SeriesPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { JellyfinItem } from '$lib/apis/jellyfin/jellyfinApi';
-	import { addSeriesToSonarr, sonarrAvailable } from '$lib/apis/sonarr/sonarrApi';
+	import { addSeriesToSonarr } from '$lib/apis/sonarr/sonarrApi';
 	import {
 		getTmdbSeries,
 		getTmdbSeriesRecommendations,
@@ -21,6 +21,7 @@
 	import TitlePageLayout from '$lib/components/TitlePageLayout/TitlePageLayout.svelte';
 	import { playerState } from '$lib/components/VideoPlayer/VideoPlayer';
 	import { createLibraryItemStore, library } from '$lib/stores/library.store';
+	import { settings } from '$lib/stores/settings.store';
 	import { capitalize, formatMinutesToTime, formatSize } from '$lib/utils';
 	import classNames from 'classnames';
 	import { Archive, ChevronLeft, ChevronRight, Plus } from 'radix-icons-svelte';
@@ -187,7 +188,7 @@
 							</span>
 							<ChevronRight size={20} />
 						</Button>
-					{:else if !$itemStore.item?.sonarrSeries && sonarrAvailable}
+					{:else if !$itemStore.item?.sonarrSeries && $settings.sonarr.apiKey && $settings.sonarr.baseUrl}
 						<Button type="primary" disabled={addToSonarrLoading} on:click={addToSonarr}>
 							<span>Add to Sonarr</span><Plus size={20} />
 						</Button>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 53b87c9..a8374ba 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,16 +1,364 @@
-<script>
+<script lang="ts">
 	import { version } from '$app/environment';
+	import { getRadarrHealth } from '$lib/apis/radarr/radarrApi';
+	import { getSonarrHealth } from '$lib/apis/sonarr/sonarrApi';
+	import FormButton from '$lib/components/forms/FormButton.svelte';
+	import Input from '$lib/components/forms/Input.svelte';
+	import Select from '$lib/components/forms/Select.svelte';
+	import Toggle from '$lib/components/forms/Toggle.svelte';
+	import { settings, type SettingsValues } from '$lib/stores/settings.store';
+	import axios from 'axios';
+	import classNames from 'classnames';
+	import { ChevronLeft } from 'radix-icons-svelte';
+	import IntegrationCard from './IntegrationCard.svelte';
+	import { getJellyfinHealth, getJellyfinUsers } from '$lib/apis/jellyfin/jellyfinApi';
+	import { beforeNavigate } from '$app/navigation';
+
+	type Section = 'general' | 'integrations';
+
+	let openTab: Section = 'integrations';
+
+	type Health = undefined | 'loading' | boolean;
+
+	let sonarrHealth: Health;
+	let radarrHealth: Health;
+	let jellyfinHealth: Health;
+
+	let jellyfinUsers: undefined | { id: string; name: string }[] = undefined;
+
+	let values: SettingsValues;
+	let initialValues: SettingsValues;
+	settings.subscribe((v) => {
+		values = structuredClone(v);
+		initialValues = structuredClone(v);
+		if (values.jellyfin.baseUrl && values.jellyfin.apiKey) handleJellyfinHealthcheck();
+		if (values.sonarr.baseUrl && values.sonarr.apiKey) handleSonarrHealthcheck();
+		if (values.radarr.baseUrl && values.radarr.apiKey) handleRadarrHealthcheck();
+	});
+
+	let submitLoading = false;
+	function handleSubmit() {
+		if (submitLoading) return;
+		submitLoading = true;
+		submit().finally(() => (submitLoading = false));
+	}
+
+	async function submit() {
+		if (
+			values.sonarr.apiKey &&
+			values.sonarr.baseUrl &&
+			!(await getSonarrHealth(values.sonarr.baseUrl, values.sonarr.apiKey))
+		) {
+			throw new Error('Could not connect to Sonarr');
+		}
+
+		if (
+			values.radarr.apiKey &&
+			values.radarr.baseUrl &&
+			!(await getRadarrHealth(values.radarr.baseUrl, values.radarr.apiKey))
+		) {
+			throw new Error('Could not connect to Radarr');
+		}
+
+		if (values.jellyfin.apiKey && values.jellyfin.baseUrl) {
+			if (!(await getJellyfinHealth(values.jellyfin.baseUrl, values.jellyfin.apiKey)))
+				throw new Error('Could not connect to Jellyfin');
+			const users = await getJellyfinUsers(values.jellyfin.baseUrl, values.jellyfin.apiKey);
+			if (!users.find((u) => u.Id === values.jellyfin.userId)) values.jellyfin.userId = null;
+		}
+
+		axios.post('/api/settings', values).then(() => {
+			settings.set(values);
+		});
+	}
+
+	function handleSonarrHealthcheck() {
+		if (!values.sonarr.baseUrl || !values.sonarr.apiKey) {
+			sonarrHealth = false;
+			return;
+		}
+		sonarrHealth = 'loading';
+		getSonarrHealth(values.sonarr.baseUrl, values.sonarr.apiKey).then((ok) => (sonarrHealth = ok));
+	}
+
+	function handleRadarrHealthcheck() {
+		if (!values.radarr.baseUrl || !values.radarr.apiKey) {
+			radarrHealth = false;
+			return;
+		}
+
+		radarrHealth = 'loading';
+		getRadarrHealth(values.radarr.baseUrl, values.radarr.apiKey).then((ok) => (radarrHealth = ok));
+	}
+
+	function handleJellyfinHealthcheck() {
+		if (!values.jellyfin.baseUrl || !values.jellyfin.apiKey) {
+			jellyfinHealth = false;
+			return;
+		}
+
+		jellyfinHealth = 'loading';
+		getJellyfinHealth(values.jellyfin.baseUrl, values.jellyfin.apiKey).then((ok) => {
+			jellyfinHealth = ok;
+			if (ok) {
+				getJellyfinUsers(values.jellyfin.baseUrl, values.jellyfin.apiKey).then((users) => {
+					jellyfinUsers = [];
+					for (const user of users) {
+						if (!user.Id || !user.Name) continue;
+						jellyfinUsers.push({ id: user.Id, name: user.Name });
+					}
+				});
+			}
+		});
+	}
+
+	const getNavButtonStyle = (section: Section) =>
+		classNames('rounded-xl p-2 px-6 font-medium text-left', {
+			'bg-zinc-800 text-amber-200': openTab === section,
+			'text-zinc-300 hover:text-zinc-200': openTab !== section
+		});
+
+	const getButtonType = (health: Health) => {
+		if (health === undefined || health === 'loading') return 'base';
+		return health ? 'success' : 'error';
+	};
+
+	beforeNavigate(({ cancel }) => {
+		if (JSON.stringify(initialValues) !== JSON.stringify(values)) {
+			if (!confirm('You have unsaved changes. Are you sure you want to leave?')) cancel();
+		}
+	});
+
+	function handleKeybinds(event: KeyboardEvent) {
+		if (event.key === 's' && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			handleSubmit();
+		}
+	}
 </script>
 
-<div class="h-screen flex flex-col items-center justify-center text-zinc-500">
-	<div class="flex-1 flex items-center justify-center max-w-xl text-center m-8">
-		This is the settings page. It's quite empty here. If you'd like to help populate it, or any
-		other part of the project, head over to the project GitHub page.
+<svelte:window on:keydown={handleKeybinds} />
+
+<div class="h-screen flex-1 flex flex-col sm:flex-row w-full sm:pt-24">
+	<div
+		class="hidden sm:flex flex-col gap-2 border-r border-zinc-800 justify-between w-64 p-8 border-t"
+	>
+		<div class="flex flex-col gap-2">
+			<button
+				class="mb-6 text-lg font-medium flex items-center text-zinc-300 hover:text-zinc-200"
+				on:click={() => history.back()}
+			>
+				<ChevronLeft size={22} /> Settings
+			</button>
+			<button
+				on:click={() => (openTab = 'general')}
+				class={openTab && getNavButtonStyle('general')}
+			>
+				General
+			</button>
+			<button
+				on:click={() => (openTab = 'integrations')}
+				class={openTab && getNavButtonStyle('integrations')}
+			>
+				Integrations
+			</button>
+		</div>
+		<div class="flex flex-col gap-2">
+			<FormButton
+				disabled={JSON.stringify(initialValues) === JSON.stringify(values)}
+				loading={submitLoading}
+				on:click={handleSubmit}
+			>
+				Save Changes
+			</FormButton>
+			<FormButton
+				disabled={JSON.stringify(initialValues) === JSON.stringify(values)}
+				type="error"
+				on:click={() => {
+					settings.set(initialValues);
+				}}
+			>
+				Reset to Defaults
+			</FormButton>
+		</div>
 	</div>
-	<div class="flex items-center p-8 gap-8">
-		<div>v{version}</div>
-		<a target="_blank" href="https://github.com/aleksilassila/reiverr/releases">Changelog</a>
-		<a target="_blank" href="https://github.com/aleksilassila/reiverr">GitHub</a>
+
+	<div class="sm:hidden px-8 pt-20 pb-4 flex items-center justify-between">
+		<button
+			class="text-lg font-medium flex items-center text-zinc-300 hover:text-zinc-200"
+			on:click={() => history.back()}
+		>
+			<ChevronLeft size={22} /> Settings
+		</button>
+		<Select bind:value={openTab}>
+			<option value="general">General</option>
+			<option value="integrations">Integrations</option>
+		</Select>
+	</div>
+
+	<div class="flex-1 flex flex-col px-8 border-t border-zinc-800">
+		<div class="max-w-screen-md mx-auto mb-auto overflow-y-scroll overflow-x-hidden w-full">
+			{#if openTab === 'general'}
+				<div class="grid grid-cols-[1fr_min-content] justify-items-start gap-4 text-zinc-400">
+					<h1
+						class="font-medium text-xl text-zinc-200 tracking-wide col-span-2 border-b border-zinc-800 justify-self-stretch pb-2 mt-8"
+					>
+						Language & Region
+					</h1>
+					<h2>Language</h2>
+					<Select bind:value={values.language}>
+						<option value="en">English</option>
+						<option value="fi">Finnish</option>
+					</Select>
+
+					<h2>Region</h2>
+					<Select bind:value={values.region}>
+						<option value="US">United States</option>
+						<option value="FI">Finland</option>
+					</Select>
+
+					<h1
+						class="font-medium text-xl text-zinc-200 tracking-wide col-span-2 border-b border-zinc-800 justify-self-stretch pb-2 mt-8"
+					>
+						User Interface
+					</h1>
+					<h2>Autoplay Trailers</h2>
+					<Toggle bind:checked={values.autoplayTrailers} />
+
+					<h2>Animation Duration</h2>
+					<Input type="number" bind:value={values.animationDuration} />
+
+					<h1
+						class="font-medium text-xl text-zinc-200 tracking-wide col-span-2 border-b border-zinc-800 justify-self-stretch pb-2 mt-8"
+					>
+						Discovery
+					</h1>
+					<div>
+						<h2>Exclude library items from Discovery</h2>
+						<p class="text-sm text-zinc-500">Exmample text explaining the above</p>
+					</div>
+					<Toggle bind:checked={values.excludeLibraryItemsFromDiscovery} />
+
+					<!-- <h2>Discover</h2> -->
+					<!-- <h3>Included Languages</h3>
+					<Toggle bind:checked={values.discover.includedLanguages.includes('en')} />
+					<label>English</label>
+					<Toggle bind:checked={values.discover.includedLanguages.includes('fi')} />
+					<label>Finnish</label> -->
+
+					<h2>Filter based on language</h2>
+					<Toggle bind:checked={values.discover.filterBasedOnLanguage} />
+				</div>
+			{/if}
+
+			{#if openTab === 'integrations'}
+				<div class="grid grid-cols-2 gap-4">
+					<div
+						class="border-b border-zinc-800 pb-4 mt-8 col-span-2 justify-self-stretch flex flex-col gap-2"
+					>
+						<h1 class="font-medium text-2xl text-zinc-200 tracking-wide">Integrations</h1>
+						<p class="text-sm text-zinc-400">
+							Note: Base urls must be accessible from the browser, meaning that internal docker
+							addresses won't work, for example. API Keys <span class="font-medium underline"
+								>will be exposed</span
+							> to the browser.
+						</p>
+					</div>
+
+					<div class="justify-self-stretch col-span-2 lg:col-span-1">
+						<IntegrationCard
+							title="Sonarr"
+							href={$settings.sonarr.baseUrl || '#'}
+							status={sonarrHealth === true ? 'connected' : 'disconnected'}
+						>
+							<div class="flex flex-col gap-1">
+								<h2 class="text-sm text-zinc-500">Base URL</h2>
+								<Input class="w-full" bind:value={values.sonarr.baseUrl} />
+							</div>
+							<div class="flex flex-col gap-1">
+								<h2 class="text-sm text-zinc-500">API Key</h2>
+								<Input class="w-full" bind:value={values.sonarr.apiKey} />
+							</div>
+							<FormButton
+								type={getButtonType(sonarrHealth)}
+								loading={sonarrHealth === 'loading'}
+								disabled={sonarrHealth === 'loading'}
+								on:click={handleSonarrHealthcheck}
+							>
+								Test Connection
+							</FormButton>
+						</IntegrationCard>
+					</div>
+
+					<div class="justify-self-stretch col-span-2 lg:col-span-1">
+						<IntegrationCard
+							title="Radarr"
+							href={$settings.radarr.baseUrl || '#'}
+							status={radarrHealth === true ? 'connected' : 'disconnected'}
+						>
+							<div class="flex flex-col gap-1">
+								<h2 class="text-sm text-zinc-500">Base URL</h2>
+								<Input class="w-full" bind:value={values.radarr.baseUrl} />
+							</div>
+							<div class="flex flex-col gap-1">
+								<h2 class="text-sm text-zinc-500">API Key</h2>
+								<Input class="w-full" bind:value={values.radarr.apiKey} />
+							</div>
+							<FormButton
+								type={getButtonType(radarrHealth)}
+								loading={radarrHealth === 'loading'}
+								disabled={radarrHealth === 'loading'}
+								on:click={handleRadarrHealthcheck}
+							>
+								Test Connection
+							</FormButton>
+						</IntegrationCard>
+					</div>
+
+					<div class="justify-self-stretch col-span-2 lg:col-span-1">
+						<IntegrationCard
+							title="Jellyfin"
+							href={$settings.jellyfin.baseUrl || '#'}
+							status={jellyfinHealth === true ? 'connected' : 'disconnected'}
+						>
+							<div class="flex flex-col gap-1">
+								<h2 class="text-sm text-zinc-500">Base URL</h2>
+								<Input class="w-full" bind:value={values.jellyfin.baseUrl} />
+							</div>
+							<div class="flex flex-col gap-1">
+								<h2 class="text-sm text-zinc-500">API Key</h2>
+								<Input class="w-full" bind:value={values.jellyfin.apiKey} />
+							</div>
+							<div class="flex flex-col gap-1">
+								<h2 class="text-sm text-zinc-500">User</h2>
+								{#if !jellyfinUsers}
+									<Select disabled />
+								{:else}
+									<Select bind:value={values.jellyfin.userId}>
+										{#each jellyfinUsers as user}
+											<option value={user.id}>{user.name}</option>
+										{/each}
+									</Select>
+								{/if}
+							</div>
+							<FormButton
+								type={getButtonType(jellyfinHealth)}
+								loading={jellyfinHealth === 'loading'}
+								disabled={jellyfinHealth === 'loading'}
+								on:click={handleJellyfinHealthcheck}
+							>
+								Test Connection
+							</FormButton>
+						</IntegrationCard>
+					</div>
+				</div>
+			{/if}
+		</div>
+		<div class="flex items-center p-4 gap-8 justify-center text-zinc-500">
+			<div>v{version}</div>
+			<a target="_blank" href="https://github.com/aleksilassila/reiverr/releases">Changelog</a>
+			<a target="_blank" href="https://github.com/aleksilassila/reiverr">GitHub</a>
+		</div>
 	</div>
 </div>
 
diff --git a/src/routes/settings/IntegrationCard.svelte b/src/routes/settings/IntegrationCard.svelte
new file mode 100644
index 0000000..d4286fa
--- /dev/null
+++ b/src/routes/settings/IntegrationCard.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let title: string;
+	export let href = '#';
+	export let status: 'connected' | 'disconnected' | 'error' = 'disconnected';
+</script>
+
+<div class="border border-zinc-800 rounded-xl p-4 flex flex-col gap-4">
+	<div class="flex items-baseline justify-between">
+		<a class="text-zinc-200 text-xl font-medium" {href}>{title}</a>
+		<div
+			class={classNames('w-3 h-3 rounded-full', {
+				'bg-green-600': status === 'connected',
+				'bg-zinc-600': status === 'disconnected',
+				'bg-amber-500': status === 'error'
+			})}
+		/>
+	</div>
+	<slot />
+</div>