diff --git a/src/lib/components/Dialog/Dialog.svelte b/src/lib/components/Dialog/Dialog.svelte
index d58b920..38e2009 100644
--- a/src/lib/components/Dialog/Dialog.svelte
+++ b/src/lib/components/Dialog/Dialog.svelte
@@ -3,6 +3,7 @@
 	import classNames from 'classnames';
 	import { fade } from 'svelte/transition';
 	import { modalStack } from '../Modal/modal.store';
+	import Panel from '../Panel.svelte';
 
 	export let size: 'sm' | 'full' | 'lg' | 'dynamic' = 'sm';
 
@@ -16,20 +17,12 @@
 		class="h-full flex items-center justify-center bg-primary-900/75 py-20 px-32"
 		transition:fade={{ duration: 100 }}
 		on:click|self={() => handleClose()}
+		on:keypress={() => {
+			/* For a11y*/
+		}}
 	>
-		<div
-			class={classNames(
-				'bg-primary-800 rounded-2xl p-12 relative shadow-xl flex flex-col transition-[max-width]',
-				{
-					'flex-1 max-w-lg min-h-0 overflow-y-auto scrollbar-hide': size === 'sm',
-					'flex-1 h-full overflow-hidden': size === 'full',
-					'flex-1 max-w-[56rem] min-h-0 overflow-y-auto scrollbar-hide': size === 'lg',
-					'': size === 'dynamic'
-				},
-				$$restProps.class
-			)}
-		>
+		<Panel {size} class={$$restProps.class}>
 			<slot close={handleClose} />
-		</div>
+		</Panel>
 	</div>
 </Modal>
diff --git a/src/lib/components/Dialog/EditProfileModal.svelte b/src/lib/components/Dialog/EditProfileModal.svelte
index f45672e..82e490f 100644
--- a/src/lib/components/Dialog/EditProfileModal.svelte
+++ b/src/lib/components/Dialog/EditProfileModal.svelte
@@ -103,8 +103,8 @@
 	}
 </script>
 
-<Dialog class="grid" size={$tab === Tabs.EditProfile ? 'sm' : 'dynamic'}>
-	<Tab {...tab} tab={Tabs.EditProfile} class="space-y-4">
+<Dialog class="grid" size={'dynamic'}>
+	<Tab {...tab} tab={Tabs.EditProfile} class="space-y-4 max-w-lg">
 		<h1 class="header2">Edit Profile</h1>
 		<TextField bind:value={name}>name</TextField>
 		<SelectField value={profilePictureTitle} on:clickOrSelect={() => tab.set(Tabs.ProfilePictures)}>
@@ -151,7 +151,7 @@
 		}}
 	>
 		<h1 class="header2 mb-6">Select Profile Picture</h1>
-		<Container direction="grid" gridCols={3} class="grid grid-cols-3 gap-4">
+		<Container direction="grid" gridCols={3} class="grid grid-cols-3 gap-4 w-max">
 			<ProfileIcon
 				url={profilePictures.ana}
 				on:clickOrSelect={() => setProfilePicture(profilePictures.ana)}
diff --git a/src/lib/components/Integrations/JellyfinIntegrationUsersDialog.svelte b/src/lib/components/Integrations/JellyfinIntegrationUsersDialog.svelte
index 94f4b74..f415e28 100644
--- a/src/lib/components/Integrations/JellyfinIntegrationUsersDialog.svelte
+++ b/src/lib/components/Integrations/JellyfinIntegrationUsersDialog.svelte
@@ -15,9 +15,15 @@
 </script>
 
 <Dialog>
-	{#each users as user}
-		<SelectItem selected={user.Id === selectedUser?.Id} on:clickOrSelect={() => handleSelect(user)}>
-			{user.Name}
-		</SelectItem>
-	{/each}
+	<h1 class="header1 mb-2">Users</h1>
+	<div class="space-y-4">
+		{#each users as user}
+			<SelectItem
+				selected={user.Id === selectedUser?.Id}
+				on:clickOrSelect={() => handleSelect(user)}
+			>
+				{user.Name}
+			</SelectItem>
+		{/each}
+	</div>
 </Dialog>
diff --git a/src/lib/components/Panel.svelte b/src/lib/components/Panel.svelte
new file mode 100644
index 0000000..5a823df
--- /dev/null
+++ b/src/lib/components/Panel.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let size: 'sm' | 'full' | 'lg' | 'dynamic' = 'sm';
+</script>
+
+<div
+	class={classNames(
+		'bg-primary-800 rounded-2xl p-12 relative shadow-xl flex flex-col transition-[max-width]',
+		{
+			'flex-1 max-w-lg min-h-0 overflow-y-auto scrollbar-hide': size === 'sm',
+			'flex-1 h-full overflow-hidden': size === 'full',
+			'flex-1 max-w-[56rem] min-h-0 overflow-y-auto scrollbar-hide': size === 'lg',
+			'max-w-max overflow-hidden': size === 'dynamic'
+		},
+		$$restProps.class
+	)}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/SelectItem.svelte b/src/lib/components/SelectItem.svelte
index dc49be2..dca7559 100644
--- a/src/lib/components/SelectItem.svelte
+++ b/src/lib/components/SelectItem.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <Container
-	class="flex items-center justify-between bg-primary-900 rounded-xl px-6 py-2.5 mb-4 font-medium
+	class="flex items-center justify-between bg-primary-900 rounded-xl px-6 py-2.5 font-medium
 		   border-2 border-transparent focus:border-primary-500 hover:border-primary-500 cursor-pointer group"
 	on:clickOrSelect
 	on:enter
diff --git a/src/lib/components/Tab/Tab.svelte b/src/lib/components/Tab/Tab.svelte
index dd872e7..5bac96a 100644
--- a/src/lib/components/Tab/Tab.svelte
+++ b/src/lib/components/Tab/Tab.svelte
@@ -7,6 +7,7 @@
 	export let tab: number;
 	export let index: number = tab;
 	export let openTab: Writable<number>;
+	export let size: 'hug' | 'stretch' = 'hug';
 
 	let selectable: Selectable;
 
@@ -33,19 +34,24 @@
 </script>
 
 <Container
-	class={classNames(
-		$$restProps.class,
-		'transition-all col-start-1 col-end-1 row-start-1 row-end-1',
-		{
-			'opacity-0 pointer-events-none absolute inset-0': !active,
-			'-translate-x-10': !active && $openTab >= index,
-			'translate-x-10': !active && $openTab < index
-		}
-	)}
+	class={classNames('col-start-1 col-end-1 row-start-1 row-end-1', {
+		'absolute pointer-events-none left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2':
+			!active && size === 'hug',
+		'absolute pointer-events-none inset-0': !active && size === 'stretch',
+		'': active
+	})}
 	bind:selectable
 	on:back
 	on:navigate={handleNavigate}
 	disabled={!active}
 >
-	<slot />
+	<div
+		class={classNames($$restProps.class, 'transition-[transform,opacity]', {
+			'opacity-0 pointer-events-none': !active,
+			'-translate-x-10': !active && $openTab >= index,
+			'translate-x-10': !active && $openTab < index
+		})}
+	>
+		<slot />
+	</div>
 </Container>
diff --git a/src/lib/components/Tab/Tab.ts b/src/lib/components/Tab/Tab.ts
index 808bbb9..da11b40 100644
--- a/src/lib/components/Tab/Tab.ts
+++ b/src/lib/components/Tab/Tab.ts
@@ -1,10 +1,12 @@
 import { writable } from 'svelte/store';
+import type { ComponentProps } from 'svelte';
+import Tab from './Tab.svelte';
 
-export function useTabs(defaultTab: number) {
+export function useTabs(defaultTab: number, props: Pick<ComponentProps<Tab>, 'size'> = {}) {
 	const openTab = writable<number>(defaultTab);
 
 	const next = () => openTab.update((n) => n + 1);
 	const previous = () => openTab.update((n) => n - 1);
 
-	return { subscribe: openTab.subscribe, openTab, set: openTab.set, next, previous };
+	return { subscribe: openTab.subscribe, openTab, set: openTab.set, next, previous, ...props };
 }
diff --git a/src/lib/pages/ManagePage.svelte b/src/lib/pages/ManagePage.svelte
index 8bb72f8..0ee5217 100644
--- a/src/lib/pages/ManagePage.svelte
+++ b/src/lib/pages/ManagePage.svelte
@@ -29,7 +29,7 @@
 		About
 	}
 
-	const tab = useTabs(Tabs.Account);
+	const tab = useTabs(Tabs.Interface, { size: 'stretch' });
 
 	let jellyfinBaseUrl = '';
 	let jellyfinApiKey = '';
@@ -133,7 +133,7 @@
 	}}
 />
 
-<DetachedPage class="px-32 py-16">
+<DetachedPage class="px-32 py-16 h-screen flex flex-col">
 	<Container
 		direction="horizontal"
 		class="flex space-x-8 header3 pb-3 border-b-2 border-secondary-700 w-full mb-8"
@@ -185,8 +185,8 @@
 		</Container>
 	</Container>
 
-	<Container class="grid">
-		<Tab {...tab} tab={Tabs.Interface} class="">
+	<Container class="flex-1 grid w-full overflow-y-auto scrollbar-hide relative">
+		<Tab {...tab} tab={Tabs.Interface} class="w-full">
 			<div class="flex items-center justify-between text-lg font-medium text-secondary-100 py-2">
 				<label class="mr-2">Animate scrolling</label>
 				<Toggle
diff --git a/src/lib/pages/OnboardingPage.svelte b/src/lib/pages/OnboardingPage.svelte
index a2e2d0a..aff564c 100644
--- a/src/lib/pages/OnboardingPage.svelte
+++ b/src/lib/pages/OnboardingPage.svelte
@@ -14,6 +14,7 @@
 	import classNames from 'classnames';
 	import { user } from '../stores/user.store';
 	import { sessions } from '../stores/session.store';
+	import Panel from '../components/Panel.svelte';
 
 	enum Tabs {
 		Welcome,
@@ -27,7 +28,7 @@
 		TmdbConnect = Tmdb + 0.1
 	}
 
-	const tab = useTabs(Tabs.Welcome);
+	const tab = useTabs(Tabs.Welcome, { ['class']: 'w-max max-w-lg' });
 
 	let tmdbConnectRequestToken: string | undefined = undefined;
 	let tmdbConnectLink: string | undefined = undefined;
@@ -229,217 +230,230 @@
 		'col-start-1 col-end-1 row-start-1 row-end-1 flex flex-col bg-primary-800 rounded-2xl p-10 shadow-xl max-w-lg';
 </script>
 
-<Container focusOnMount class="h-full w-full grid justify-items-center items-center">
-	<div class="flex flex-col bg-primary-800 rounded-2xl p-10 shadow-xl max-w-lg">
-		<div class="relative">
-			<Tab {...tab} tab={Tabs.Welcome}>
-				<h1 class="header2 mb-2">Welcome to Reiverr</h1>
-				<div class="body mb-8">
-					Looks like this is a new account. This setup will get you started with connecting your
-					services to get most out of Reiverr.
-				</div>
-				<Container direction="horizontal" class="flex space-x-4">
-					<Button type="primary-dark" on:clickOrSelect={() => sessions.removeSession()}
-						>Log Out</Button
-					>
-					<div class="flex-1">
-						<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
-							Next
-							<div class="absolute inset-y-0 right-0 flex items-center justify-center">
-								<ArrowRight size={24} />
-							</div>
-						</Button>
-					</div>
-				</Container>
-			</Tab>
-
-			<Tab {...tab} tab={Tabs.Tmdb} on:back={handleBack}>
-				<h1 class="header2 mb-2">Connect a TMDB Account</h1>
-				<div class="body mb-8">
-					Connect to TMDB for personalized recommendations based on your movie reviews and
-					preferences.
-				</div>
-
-				<div class="space-y-4 flex flex-col">
-					{#await connectedTmdbAccount then account}
-						{#if account}
-							<SelectField
-								value={account.username || ''}
-								on:clickOrSelect={() => {
-									tab.set(Tabs.TmdbConnect);
-									handleGenerateTMDBLink();
-								}}>Logged in as</SelectField
-							>
-						{:else}
-							<Button
-								type="primary-dark"
-								on:clickOrSelect={() => {
-									tab.set(Tabs.TmdbConnect);
-									handleGenerateTMDBLink();
-								}}
-							>
-								Connect
-								<ArrowRight size={19} slot="icon-absolute" />
-							</Button>
-						{/if}
-					{/await}
-
+<Container focusOnMount class="h-full w-full flex items-center justify-center" on:back={handleBack}>
+	<Panel class="grid max-w-lg" size="dynamic">
+		<Tab {...tab} tab={Tabs.Welcome} on:back={({ detail }) => detail.stopPropagation()}>
+			<h1 class="header2 mb-2 w-full">Welcome to Reiverr</h1>
+			<div class="body mb-8">
+				Looks like this is a new account. This setup will get you started with connecting your
+				services to get most out of Reiverr.
+			</div>
+			<Container direction="horizontal" class="flex space-x-4">
+				<Button type="primary-dark" on:clickOrSelect={() => sessions.removeSession()}
+					>Log Out</Button
+				>
+				<div class="flex-1">
 					<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
-						{#if $user?.settings.tmdb.userId}
-							Next
-						{:else}
-							Skip
-						{/if}
-						<ArrowRight size={19} slot="icon-absolute" />
+						Next
+						<div class="absolute inset-y-0 right-0 flex items-center justify-center">
+							<ArrowRight size={24} />
+						</div>
 					</Button>
 				</div>
-			</Tab>
+			</Container>
+		</Tab>
 
-			<Tab {...tab} tab={Tabs.TmdbConnect} on:back={() => tab.set(Tabs.Tmdb)}>
-				<h1 class="header2 mb-2">Connect a TMDB Account</h1>
-				<div class="body mb-8">
-					To connect your TMDB account, log in via the link below and then click "Complete
-					Connection".
-				</div>
+		<Tab {...tab} tab={Tabs.Tmdb}>
+			<h1 class="header2 mb-2">Connect a TMDB Account</h1>
+			<div class="body mb-8">
+				Connect to TMDB for personalized recommendations based on your movie reviews and
+				preferences.
+			</div>
 
-				{#if tmdbConnectQrCode}
-					<div
-						class="w-[150px] h-[150px] bg-contain bg-center mb-8 mx-auto"
-						style={`background-image: url(${tmdbConnectQrCode})`}
-					/>
-				{/if}
-
-				<Container direction="horizontal" class="flex space-x-4 *:flex-1">
-					{#if !tmdbConnectRequestToken}
-						<Button type="primary-dark" action={handleGenerateTMDBLink}>Generate Link</Button>
-					{:else if tmdbConnectLink}
-						<Button type="primary-dark" action={completeTMDBConnect}>Complete Connection</Button>
-						<Button type="primary-dark" on:clickOrSelect={() => window.open(tmdbConnectLink)}>
-							Open Link
-							<ExternalLink size={19} slot="icon-after" />
-						</Button>
-					{/if}
-				</Container>
-			</Tab>
-
-			<Tab {...tab} tab={Tabs.Jellyfin}>
-				<h1 class="header2 mb-2">Connect to Jellyfin</h1>
-				<div class="mb-8 body">Connect to Jellyfin to watch movies and tv shows.</div>
-
-				<div class="space-y-4 mb-4">
-					<TextField bind:value={jellyfinBaseUrl} isValid={jellyfinUsers.then((u) => !!u?.length)}>
-						Base Url
-					</TextField>
-					<TextField bind:value={jellyfinApiKey} isValid={jellyfinUsers.then((u) => !!u?.length)}>
-						API Key
-					</TextField>
-				</div>
-
-				{#await jellyfinUsers then users}
-					{#if users.length}
+			<div class="space-y-4 flex flex-col">
+				{#await connectedTmdbAccount then account}
+					{#if account}
 						<SelectField
-							value={jellyfinUser?.Name || 'Select User'}
-							on:clickOrSelect={() => tab.set(Tabs.SelectUser)}
-						>
-							User
-						</SelectField>
-					{/if}
-				{/await}
-
-				{#if jellyfinError}
-					<div class="text-red-500 mb-4">{jellyfinError}</div>
-				{/if}
-
-				<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
-					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
-					{#if jellyfinBaseUrl && jellyfinApiKey && jellyfinUser}
-						<Button type="primary-dark" action={handleConnectJellyfin}>Connect</Button>
-					{:else}
-						<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>Skip</Button>
-					{/if}
-				</Container>
-			</Tab>
-			<Tab {...tab} tab={Tabs.SelectUser} on:back={() => tab.set(Tabs.Jellyfin)}>
-				<h1 class="header1 mb-2">Select User</h1>
-				{#await jellyfinUsers then users}
-					{#each users as user}
-						<SelectItem
-							selected={user?.Id === jellyfinUser?.Id}
+							value={account.username || ''}
 							on:clickOrSelect={() => {
-								jellyfinUser = user;
-								tab.set(Tabs.Jellyfin);
+								tab.set(Tabs.TmdbConnect);
+								handleGenerateTMDBLink();
+							}}>Logged in as</SelectField
+						>
+					{:else}
+						<Button
+							type="primary-dark"
+							on:clickOrSelect={() => {
+								tab.set(Tabs.TmdbConnect);
+								handleGenerateTMDBLink();
 							}}
 						>
-							{user.Name}
-						</SelectItem>
-					{/each}
+							Connect
+							<ArrowRight size={19} slot="icon-absolute" />
+						</Button>
+					{/if}
 				{/await}
-			</Tab>
 
-			<Tab {...tab} tab={Tabs.Sonarr}>
-				<h1 class="header2 mb-2">Connect to Sonarr</h1>
-				<div class="mb-8">Connect to Sonarr for requesting and managing tv shows.</div>
-
-				<div class="space-y-4 mb-4">
-					<TextField bind:value={sonarrBaseUrl}>Base Url</TextField>
-					<TextField bind:value={sonarrApiKey}>API Key</TextField>
-				</div>
-
-				{#if sonarrError}
-					<div class="text-red-500 mb-4">{sonarrError}</div>
-				{/if}
-
-				<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
-					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
-					{#if sonarrBaseUrl && sonarrApiKey}
-						<Button type="primary-dark" action={handleConnectSonarr}>Connect</Button>
+				<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
+					{#if $user?.settings.tmdb.userId}
+						Next
 					{:else}
-						<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>Skip</Button>
+						Skip
 					{/if}
-				</Container>
-			</Tab>
+					<ArrowRight size={19} slot="icon-absolute" />
+				</Button>
+			</div>
+		</Tab>
 
-			<Tab {...tab} tab={Tabs.Radarr}>
-				<h1 class="header2 mb-2">Connect to Radarr</h1>
-				<div class="mb-8">Connect to Radarr for requesting and managing movies.</div>
+		<Tab
+			{...tab}
+			tab={Tabs.TmdbConnect}
+			on:back={({ detail }) => {
+				tab.set(Tabs.Tmdb);
+				detail.stopPropagation();
+			}}
+		>
+			<h1 class="header2 mb-2">Connect a TMDB Account</h1>
+			<div class="body mb-8">
+				To connect your TMDB account, log in via the link below and then click "Complete
+				Connection".
+			</div>
 
-				<div class="space-y-4 mb-4">
-					<TextField bind:value={radarrBaseUrl}>Base Url</TextField>
-					<TextField bind:value={radarrApiKey}>API Key</TextField>
-				</div>
+			{#if tmdbConnectQrCode}
+				<div
+					class="w-[150px] h-[150px] bg-contain bg-center mb-8 mx-auto"
+					style={`background-image: url(${tmdbConnectQrCode})`}
+				/>
+			{/if}
 
-				{#if radarrError}
-					<div class="text-red-500 mb-4">{radarrError}</div>
+			<Container direction="horizontal" class="flex space-x-4 *:flex-1">
+				{#if !tmdbConnectRequestToken}
+					<Button type="primary-dark" action={handleGenerateTMDBLink}>Generate Link</Button>
+				{:else if tmdbConnectLink}
+					<Button type="primary-dark" action={completeTMDBConnect}>Complete Connection</Button>
+					<Button type="primary-dark" on:clickOrSelect={() => window.open(tmdbConnectLink)}>
+						Open Link
+						<ExternalLink size={19} slot="icon-after" />
+					</Button>
 				{/if}
+			</Container>
+		</Tab>
 
-				<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
-					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
-					{#if radarrBaseUrl && radarrApiKey}
-						<Button type="primary-dark" action={handleConnectRadarr}>Connect</Button>
-					{:else}
-						<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>Skip</Button>
-					{/if}
-				</Container>
-			</Tab>
+		<Tab {...tab} tab={Tabs.Jellyfin}>
+			<h1 class="header2 mb-2">Connect to Jellyfin</h1>
+			<div class="mb-8 body">Connect to Jellyfin to watch movies and tv shows.</div>
 
-			<Tab {...tab} tab={Tabs.Complete} class={classNames('w-full')}>
-				<div class="flex items-center justify-center text-secondary-500 mb-4">
-					<CheckCircled size={64} />
-				</div>
-				<h1 class="header2 text-center w-full">All Set!</h1>
-				<div class="header1 mb-8 text-center">Reiverr is now ready to use.</div>
+			<div class="space-y-4 mb-4">
+				<TextField bind:value={jellyfinBaseUrl} isValid={jellyfinUsers.then((u) => !!u?.length)}>
+					Base Url
+				</TextField>
+				<TextField bind:value={jellyfinApiKey} isValid={jellyfinUsers.then((u) => !!u?.length)}>
+					API Key
+				</TextField>
+			</div>
 
-				<Container direction="horizontal" class="inline-flex space-x-4 w-full">
-					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()} icon={ArrowLeft}
-						>Back</Button
+			{#await jellyfinUsers then users}
+				{#if users.length}
+					<SelectField
+						value={jellyfinUser?.Name || 'Select User'}
+						on:clickOrSelect={() => tab.set(Tabs.SelectUser)}
 					>
-					<div class="flex-1">
-						<Button type="primary-dark" on:clickOrSelect={finalizeSetup} iconAbsolute={ArrowRight}
-							>Done</Button
-						>
-					</div>
-				</Container>
-			</Tab>
-		</div>
-	</div>
+						User
+					</SelectField>
+				{/if}
+			{/await}
+
+			{#if jellyfinError}
+				<div class="text-red-500 mb-4">{jellyfinError}</div>
+			{/if}
+
+			<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
+				<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
+				{#if jellyfinBaseUrl && jellyfinApiKey && jellyfinUser}
+					<Button type="primary-dark" action={handleConnectJellyfin}>Connect</Button>
+				{:else}
+					<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>Skip</Button>
+				{/if}
+			</Container>
+		</Tab>
+		<Tab
+			{...tab}
+			tab={Tabs.SelectUser}
+			on:back={({ detail }) => {
+				tab.set(Tabs.Jellyfin);
+				detail.stopPropagation();
+			}}
+		>
+			<h1 class="header1 mb-2 w-96">Select User</h1>
+			<div class="flex flex-col space-y-4" />
+			{#await jellyfinUsers then users}
+				{#each users as user}
+					<SelectItem
+						selected={user?.Id === jellyfinUser?.Id}
+						on:clickOrSelect={() => {
+							jellyfinUser = user;
+							tab.set(Tabs.Jellyfin);
+						}}
+					>
+						{user.Name}
+					</SelectItem>
+				{/each}
+			{/await}
+		</Tab>
+
+		<Tab {...tab} tab={Tabs.Sonarr}>
+			<h1 class="header2 mb-2">Connect to Sonarr</h1>
+			<div class="mb-8">Connect to Sonarr for requesting and managing tv shows.</div>
+
+			<div class="space-y-4 mb-4">
+				<TextField bind:value={sonarrBaseUrl}>Base Url</TextField>
+				<TextField bind:value={sonarrApiKey}>API Key</TextField>
+			</div>
+
+			{#if sonarrError}
+				<div class="text-red-500 mb-4">{sonarrError}</div>
+			{/if}
+
+			<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
+				<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
+				{#if sonarrBaseUrl && sonarrApiKey}
+					<Button type="primary-dark" action={handleConnectSonarr}>Connect</Button>
+				{:else}
+					<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>Skip</Button>
+				{/if}
+			</Container>
+		</Tab>
+
+		<Tab {...tab} tab={Tabs.Radarr}>
+			<h1 class="header2 mb-2">Connect to Radarr</h1>
+			<div class="mb-8">Connect to Radarr for requesting and managing movies.</div>
+
+			<div class="space-y-4 mb-4">
+				<TextField bind:value={radarrBaseUrl}>Base Url</TextField>
+				<TextField bind:value={radarrApiKey}>API Key</TextField>
+			</div>
+
+			{#if radarrError}
+				<div class="text-red-500 mb-4">{radarrError}</div>
+			{/if}
+
+			<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
+				<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
+				{#if radarrBaseUrl && radarrApiKey}
+					<Button type="primary-dark" action={handleConnectRadarr}>Connect</Button>
+				{:else}
+					<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>Skip</Button>
+				{/if}
+			</Container>
+		</Tab>
+
+		<Tab {...tab} tab={Tabs.Complete} class={classNames('w-full')}>
+			<div class="flex items-center justify-center text-secondary-500 mb-4">
+				<CheckCircled size={64} />
+			</div>
+			<h1 class="header2 text-center w-full">All Set!</h1>
+			<div class="header1 mb-8 text-center">Reiverr is now ready to use.</div>
+
+			<Container direction="horizontal" class="inline-flex space-x-4 w-full">
+				<Button type="primary-dark" on:clickOrSelect={() => tab.previous()} icon={ArrowLeft}
+					>Back</Button
+				>
+				<div class="flex-1">
+					<Button type="primary-dark" on:clickOrSelect={finalizeSetup} iconAbsolute={ArrowRight}
+						>Done</Button
+					>
+				</div>
+			</Container>
+		</Tab>
+	</Panel>
 </Container>