diff --git a/frontend/src/app.html b/frontend/src/app.html
index ab5964be..bd30208f 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -9,58 +9,80 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link
 			rel="preload"
-			href="/fonts/Afacad-Regular.woff2"
+			href="/fonts/subset-Montserrat-Bold.woff2"
 			as="font"
 			type="font/woff2"
 			crossorigin
 		/>
-		<link rel="preload" href="/fonts/Afacad-Medium.woff2" as="font" type="font/woff2" crossorigin />
 		<link
 			rel="preload"
-			href="/fonts/Afacad-SemiBold.woff2"
+			href="/fonts/subset-Montserrat-Regular.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="fonts/subset-Montserrat-Medium.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="fonts/subset-Montserrat-SemiBold.woff2"
 			as="font"
 			type="font/woff2"
 			crossorigin
 		/>
-		<link rel="preload" href="/fonts/Afacad-Bold.woff2" as="font" type="font/woff2" crossorigin />
 
 		<style>
 			@font-face {
-				font-family: 'Afacad';
+				font-family: 'Montserrat';
 				src:
-					url('/fonts/Afacad-Bold.woff2') format('woff2'),
-					url('/fonts/Afacad-Bold.woff') format('woff');
+					url('/fonts/subset-Montserrat-Bold.woff2') format('woff2'),
+					url('/fonts/subset-Montserrat-Bold.woff') format('woff');
 				font-weight: bold;
 				font-style: normal;
 				font-display: swap;
 			}
 
 			@font-face {
-				font-family: 'Afacad';
+				font-family: 'Montserrat';
 				src:
-					url('/fonts/Afacad-Medium.woff2') format('woff2'),
-					url('/fonts/Afacad-Medium.woff') format('woff');
-				font-weight: 500;
+					url('/fonts/subset-Montserrat-Regular.woff2') format('woff2'),
+					url('/fonts/subset-Montserrat-Regular.woff') format('woff');
+				font-weight: normal;
 				font-style: normal;
 				font-display: swap;
 			}
 
 			@font-face {
-				font-family: 'Afacad';
+				font-family: 'Montserrat';
 				src:
-					url('/fonts/Afacad-SemiBold.woff2') format('woff2'),
-					url('/fonts/Afacad-SemiBold.woff') format('woff');
-				font-weight: 600;
+					url('/fonts/subset-Montserrat-Light.woff2') format('woff2'),
+					url('/fonts/subset-Montserrat-Light.woff') format('woff');
+				font-weight: 300;
 				font-style: normal;
 				font-display: swap;
 			}
 
 			@font-face {
-				font-family: 'Afacad';
+				font-family: 'Montserrat';
 				src:
-					url('/fonts/Afacad-Regular.woff2') format('woff2'),
-					url('/fonts/Afacad-Regular.woff') format('woff');
-				font-weight: normal;
+					url('/fonts/subset-Montserrat-Medium.woff2') format('woff2'),
+					url('/fonts/subset-Montserrat-Medium.woff') format('woff');
+				font-weight: 500;
+				font-style: normal;
+				font-display: swap;
+			}
+
+			@font-face {
+				font-family: 'Montserrat';
+				src:
+					url('/fonts/subset-Montserrat-SemiBold.woff2') format('woff2'),
+					url('/fonts/subset-Montserrat-SemiBold.woff') format('woff');
+				font-weight: 600;
 				font-style: normal;
 				font-display: swap;
 			}
diff --git a/frontend/src/lib/components/header-item.svelte b/frontend/src/lib/components/header-item.svelte
index b435c1b5..8e142391 100644
--- a/frontend/src/lib/components/header-item.svelte
+++ b/frontend/src/lib/components/header-item.svelte
@@ -8,7 +8,7 @@
 {#if $page.url.pathname === navItem.path}
 	<a href={navItem.path}>
 		<div
-			class="relative text-xl hover:text-gray-700 dark:hover:text-gray-200 after:absolute after:bg-gray-800 dark:after:bg-gray-200 after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300"
+			class="relative font-medium hover:text-gray-700 dark:hover:text-gray-200 after:absolute after:bg-gray-800 dark:after:bg-gray-200 after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300"
 		>
 			{navItem.name}
 		</div>
@@ -16,7 +16,7 @@
 {:else}
 	<a href={navItem.path}>
 		<div
-			class="relative text-xl hover:text-gray-700 dark:hover:text-gray-200 after:absolute after:bg-gray-800 dark:after:bg-gray-200 after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300"
+			class="relative font-medium hover:text-gray-700 dark:hover:text-gray-200 after:absolute after:bg-gray-800 dark:after:bg-gray-200 after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300"
 		>
 			{navItem.name}
 		</div>
diff --git a/frontend/src/lib/components/header.svelte b/frontend/src/lib/components/header.svelte
index bc0875de..da9a9aaa 100644
--- a/frontend/src/lib/components/header.svelte
+++ b/frontend/src/lib/components/header.svelte
@@ -29,9 +29,9 @@
 
 <header class="flex items-center justify-between w-full p-8 md:px-24 lg:px-32">
 	<a href="/" class="flex items-center gap-2">
-		<Mountain class="h-8 w-8" />
-		<h1 class="text-3xl font-semibold tracking-wider">Iceberg</h1>
-		<div class="ml-2 hidden lg:flex items-center p-2 px-4 bg-slate-100 dark:bg-slate-900 rounded-md">
+		<Mountain class="size-6 md:size-8" />
+		<h1 class="text-xl md:text-2xl font-semibold">Iceberg</h1>
+		<div class="ml-2 hidden lg:flex items-center p-2 px-4 bg-slate-100 dark:bg-slate-900 rounded-md text-sm font-medium">
 			<div class="flex items-center">
 				<Command class="h-4 w-4" />
 				<span>K</span>
diff --git a/frontend/src/lib/components/service-status.svelte b/frontend/src/lib/components/service-status.svelte
index 04e3ad79..70ad5bc6 100644
--- a/frontend/src/lib/components/service-status.svelte
+++ b/frontend/src/lib/components/service-status.svelte
@@ -11,14 +11,14 @@
                 <div class="p-1 bg-green-500 rounded-full">
                     <Check class="w-4 h-4 text-white" />
                 </div>
-                <p class="md:text-lg text-muted-foreground">
+                <p class="text-muted-foreground">
                     <span class="font-semibold">{formatWords(serviceStatus)}</span> is configured
                 </p>
             {:else}
                 <div class="p-1 bg-red-500 rounded-full">
                     <X class="w-4 h-4 text-white" />
                 </div>
-                <p class="md:text-lg text-muted-foreground">
+                <p class="text-muted-foreground">
                     <span class="font-semibold">{formatWords(serviceStatus)}</span> is not configured
                 </p>
             {/if}
diff --git a/frontend/src/lib/components/status-media-card.svelte b/frontend/src/lib/components/status-media-card.svelte
index def0a422..6705571b 100644
--- a/frontend/src/lib/components/status-media-card.svelte
+++ b/frontend/src/lib/components/status-media-card.svelte
@@ -32,11 +32,11 @@
 				/>
 			</a>
 			<div class="flex flex-col">
-				<p class="text-xl lg:text-2xl font-semibold md:text-ellipsis md:line-clamp-1">
+				<p class="text-lg lg:text-xl font-semibold md:text-ellipsis md:line-clamp-1">
 					{plexDebridItem.title}
 				</p>
-				<p>Aired {formatDate(plexDebridItem.aired_at, 'short')}</p>
-				<div class="flex flex-wrap gap-1 items-center mt-1">
+				<p class="text-sm">Aired {formatDate(plexDebridItem.aired_at, 'short')}</p>
+				<div class="flex flex-wrap gap-1 items-center mt-1 text-xs">
 					{#each plexDebridItem.genres as genre}
 						<Badge variant="secondary">
 							{formatWords(genre)}
@@ -47,18 +47,18 @@
 		</div>
 		<div class="z-[1] flex flex-col items-start w-full md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
 			<div class="flex gap-2 items-center">
-				<p class="text-lg font-semibold">Status</p>
-				<Badge class="{itemState.bg} tracking-wider text-black">
+				<p class="text-base font-semibold">Status</p>
+				<Badge class="{itemState.bg} tracking-wider text-black text-xs">
 					{itemState.text ?? formatWords(plexDebridItem.state)}
 				</Badge>
 			</div>
 			<div class="flex gap-2 items-center">
-				<p class="text-lg font-semibold">Requested</p>
-				<p>{formatDate(plexDebridItem.requested_at, 'long', true)}</p>
+				<p class="text-base font-semibold">Requested</p>
+				<p class="text-sm">{formatDate(plexDebridItem.requested_at, 'long', true)}</p>
 			</div>
 			<div class="flex gap-2 items-center">
-				<p class="text-lg font-semibold">Requested by</p>
-				<p>{plexDebridItem.requested_by}</p>
+				<p class="text-base font-semibold">Requested by</p>
+				<p class="text-sm">{plexDebridItem.requested_by}</p>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/lib/forms/content-form.svelte b/frontend/src/lib/forms/content-form.svelte
index 98bde86c..04fccb28 100644
--- a/frontend/src/lib/forms/content-form.svelte
+++ b/frontend/src/lib/forms/content-form.svelte
@@ -10,7 +10,7 @@
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import * as Form from '$lib/components/ui/form';
-	import { contentSettingsSchema, type ContentSettingsSchema } from '$lib/schemas/setting';
+	import { contentSettingsSchema, type ContentSettingsSchema } from '$lib/forms/helpers';
 	import { getContext } from 'svelte';
 	import type { SuperValidated } from 'sveltekit-superforms';
 
@@ -126,35 +126,33 @@
 >
 	<div class="flex flex-col my-4 gap-4">
 		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-			<p class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
-				Content Providers
-			</p>
+			<p class="font-semibold w-48 min-w-48 text-muted-foreground">Content Providers</p>
 			<div class="flex flex-wrap gap-4">
 				<Form.Field {config} name="overseerr_enabled">
 					<div class="flex flex-wrap items-center gap-2">
 						<Form.Checkbox />
-						<Form.Label class="text-sm md:text-base">Overseerr</Form.Label>
+						<Form.Label>Overseerr</Form.Label>
 					</div>
 				</Form.Field>
 
 				<Form.Field {config} name="mdblist_enabled">
 					<div class="flex flex-wrap items-center gap-2">
 						<Form.Checkbox />
-						<Form.Label class="text-sm md:text-base">Mdblist</Form.Label>
+						<Form.Label>Mdblist</Form.Label>
 					</div>
 				</Form.Field>
 
 				<Form.Field {config} name="plex_watchlist_enabled">
 					<div class="flex flex-wrap items-center gap-2">
 						<Form.Checkbox />
-						<Form.Label class="text-sm md:text-base">Plex Watchlists</Form.Label>
+						<Form.Label>Plex Watchlists</Form.Label>
 					</div>
 				</Form.Field>
 
 				<Form.Field {config} name="listrr_enabled">
 					<div class="flex flex-wrap items-center gap-2">
 						<Form.Checkbox />
-						<Form.Label class="text-sm md:text-base">Listrr</Form.Label>
+						<Form.Label>Listrr</Form.Label>
 					</div>
 				</Form.Field>
 			</div>
@@ -164,15 +162,13 @@
 			<div transition:slide>
 				<Form.Field {config} name="overseerr_url">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Overseerr URL
 						</Form.Label>
-						<Form.Input class="text-sm md:text-base" spellcheck="false" />
+						<Form.Input spellcheck="false" />
 					</Form.Item>
 					{#if $errors.overseerr_url}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -180,20 +176,18 @@
 			<div transition:slide>
 				<Form.Field {config} name="overseerr_api_key">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Overseerr API Key
 						</Form.Label>
 						<Form.Input
-							class={clsx('transition-all duration-300 text-sm md:text-base', {
+							class={clsx('transition-all duration-300', {
 								'blur-sm hover:blur-none focus:blur-none': $form.overseerr_api_key.length > 0
 							})}
 							spellcheck="false"
 						/>
 					</Form.Item>
 					{#if $errors.overseerr_api_key}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -203,15 +197,13 @@
 			<div transition:slide>
 				<Form.Field {config} name="plex_watchlist_rss">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Plex RSS URL
 						</Form.Label>
-						<Form.Input class="text-sm md:text-base" spellcheck="false" />
+						<Form.Input spellcheck="false" />
 					</Form.Item>
 					{#if $errors.plex_watchlist_rss}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -219,15 +211,13 @@
 			<div transition:slide>
 				<Form.Field {config} name="plex_watchlist_update_interval">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Plex RSS Update Interval
 						</Form.Label>
-						<Form.Input type="number" class="text-sm md:text-base" spellcheck="false" />
+						<Form.Input type="number" spellcheck="false" />
 					</Form.Item>
 					{#if $errors.plex_watchlist_update_interval}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -252,20 +242,18 @@
 			<div transition:slide>
 				<Form.Field {config} name="mdblist_api_key">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Mdblist API Key
 						</Form.Label>
 						<Form.Input
-							class={clsx('transition-all duration-300 text-sm md:text-base', {
+							class={clsx('transition-all duration-300', {
 								'blur-sm hover:blur-none focus:blur-none': $form.mdblist_api_key.length > 0
 							})}
 							spellcheck="false"
 						/>
 					</Form.Item>
 					{#if $errors.mdblist_api_key}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -273,27 +261,24 @@
 			<div transition:slide>
 				<Form.Field {config} name="mdblist_update_interval">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Mdblist Update Interval
 						</Form.Label>
-						<Form.Input type="number" class="text-sm md:text-base" spellcheck="false" />
+						<Form.Input type="number" spellcheck="false" />
 					</Form.Item>
 					{#if $errors.mdblist_update_interval}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
 
 			{#if $mdblistListsErrors}
-				<small class="text-sm md:text-base text-red-500">{$mdblistListsErrors}</small>
+				<small class="text-sm text-red-500">{$mdblistListsErrors}</small>
 			{/if}
 
 			<div transition:slide class="flex flex-col md:flex-row items-start max-w-6xl">
-				<Label
-					class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-					for="mdblist_lists">Mdblist Lists</Label
+				<Label class="font-semibold w-48 min-w-48 text-muted-foreground" for="mdblist_lists"
+					>Mdblist Lists</Label
 				>
 				<form
 					on:submit={() => {
@@ -303,7 +288,6 @@
 				>
 					<Input
 						placeholder="Enter list numbers one at a time"
-						class="text-sm md:text-base"
 						type="number"
 						bind:value={current_mdb_add_list}
 					/>
@@ -357,20 +341,18 @@
 			<div transition:slide>
 				<Form.Field {config} name="listrr_api_key">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Listrr API Key
 						</Form.Label>
 						<Form.Input
-							class={clsx('transition-all duration-300 text-sm md:text-base', {
+							class={clsx('transition-all duration-300', {
 								'blur-sm hover:blur-none focus:blur-none': $form.listrr_api_key.length > 0
 							})}
 							spellcheck="false"
 						/>
 					</Form.Item>
 					{#if $errors.listrr_api_key}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -378,30 +360,27 @@
 			<div transition:slide>
 				<Form.Field {config} name="listrr_update_interval">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Listrr Update Interval
 						</Form.Label>
-						<Form.Input type="number" class="text-sm md:text-base" spellcheck="false" />
+						<Form.Input type="number" spellcheck="false" />
 					</Form.Item>
 					{#if $errors.listrr_update_interval}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
 
 			{#if $listrrMovieListsErrors}
-				<small class="text-sm md:text-base text-red-500">{$listrrMovieListsErrors}</small>
+				<small class="text-sm text-red-500">{$listrrMovieListsErrors}</small>
 			{/if}
 			{#if $listrrShowListsErrors}
-				<small class="text-sm md:text-base text-red-500">{$listrrShowListsErrors}</small>
+				<small class="text-sm text-red-500">{$listrrShowListsErrors}</small>
 			{/if}
 
 			<div transition:slide class="flex flex-col md:flex-row items-start max-w-6xl">
-				<Label
-					class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-					for="listrr_movie_lists">Listrr Movie Lists</Label
+				<Label class="font-semibold w-48 min-w-48 text-muted-foreground" for="listrr_movie_lists"
+					>Listrr Movie Lists</Label
 				>
 				<form
 					on:submit={() => {
@@ -411,7 +390,6 @@
 				>
 					<Input
 						placeholder="Enter list numbers one at a time"
-						class="text-sm md:text-base"
 						type="number"
 						bind:value={current_listrr_movie_add_list}
 					/>
@@ -433,9 +411,8 @@
 			</div>
 
 			<div transition:slide class="flex flex-col md:flex-row items-start max-w-6xl">
-				<Label
-					class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-					for="listrr_show_lists">Listrr Show Lists</Label
+				<Label class="font-semibold w-48 min-w-48 text-muted-foreground" for="listrr_show_lists"
+					>Listrr Show Lists</Label
 				>
 				<form
 					on:submit={() => {
@@ -445,7 +422,6 @@
 				>
 					<Input
 						placeholder="Enter list numbers one at a time"
-						class="text-sm md:text-base"
 						type="number"
 						bind:value={current_listrr_show_add_list}
 					/>
@@ -469,11 +445,19 @@
 
 		<Separator class=" mt-4" />
 		<div class="flex w-full justify-end">
-			<Button disabled={$delayed} type="submit" size="sm" class="w-full md:max-w-max">
+			<Button
+				disabled={$delayed}
+				type="submit"
+				size="sm"
+				class="w-full md:max-w-max font-medium text-xs"
+			>
 				{#if $delayed}
 					<Loader2 class="w-4 h-4 animate-spin mr-2" />
 				{/if}
-				Save changes <span class="ml-1" class:hidden={actionUrl === '?/default'}>and continue</span>
+				Save changes
+				<span class="ml-1" class:hidden={$page.url.pathname === '/settings/content'}
+					>and continue</span
+				>
 			</Button>
 		</div>
 	</div>
diff --git a/frontend/src/lib/forms/general-form.svelte b/frontend/src/lib/forms/general-form.svelte
index 0ae31bbf..1b2b16c1 100644
--- a/frontend/src/lib/forms/general-form.svelte
+++ b/frontend/src/lib/forms/general-form.svelte
@@ -7,7 +7,7 @@
 	import { page } from '$app/stores';
 	import clsx from 'clsx';
 	import * as Form from '$lib/components/ui/form';
-	import { generalSettingsSchema, type GeneralSettingsSchema } from '$lib/schemas/setting';
+	import { generalSettingsSchema, type GeneralSettingsSchema } from '$lib/forms/helpers';
 	import { getContext } from 'svelte';
 	import type { SuperValidated } from 'sveltekit-superforms';
 
@@ -37,76 +37,80 @@
 	<div class="flex flex-col my-4 gap-4">
 		<Form.Field {config} name="debug">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
-					Debug *
-				</Form.Label>
-				<Form.Checkbox class="text-sm md:text-base" />
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground"
+					>Debug <span class="text-red-500">*</span></Form.Label
+				>
+				<Form.Checkbox />
 			</Form.Item>
 			{#if $errors.debug}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Form.Field {config} name="log">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
-					Log *
-				</Form.Label>
-				<Form.Checkbox class="text-sm md:text-base" />
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">Log <span class="text-red-500">*</span></Form.Label>
+				<Form.Checkbox />
 			</Form.Item>
 			{#if $errors.log}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Form.Field {config} name="host_path">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
-					Host Path
-				</Form.Label>
-				<Form.Input class="text-sm md:text-base" spellcheck="false" />
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">Host Path</Form.Label>
+				<Form.Input spellcheck="false" />
 			</Form.Item>
 			{#if $errors.host_path}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Form.Field {config} name="container_path">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 					Container Path
 				</Form.Label>
-				<Form.Input class="text-sm md:text-base" spellcheck="false" />
+				<Form.Input spellcheck="false" />
 			</Form.Item>
 			{#if $errors.container_path}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Form.Field {config} name="realdebrid_api_key">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 					Real Debrid API Key
 				</Form.Label>
 				<Form.Input
-					class={clsx('transition-all duration-300 text-sm md:text-base', {
+					class={clsx('transition-all duration-300', {
 						'blur-sm hover:blur-none focus:blur-none': $form.realdebrid_api_key.length > 0
 					})}
 					spellcheck="false"
 				/>
 			</Form.Item>
 			{#if $errors.realdebrid_api_key}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Separator class=" mt-4" />
 		<div class="flex w-full justify-end">
-			<Button disabled={$delayed} type="submit" size="sm" class="w-full md:max-w-max">
+			<Button
+				disabled={$delayed}
+				type="submit"
+				size="sm"
+				class="w-full md:max-w-max font-semibold text-xs"
+			>
 				{#if $delayed}
 					<Loader2 class="w-4 h-4 animate-spin mr-2" />
 				{/if}
-				Save changes <span class="ml-1" class:hidden={actionUrl === '?/default'}>and continue</span>
+				Save changes
+				<span class="ml-1" class:hidden={$page.url.pathname === '/settings/general'}
+					>and continue</span
+				>
 			</Button>
 		</div>
 	</div>
diff --git a/frontend/src/lib/forms/helpers.ts b/frontend/src/lib/forms/helpers.ts
index 05d165a0..a1b58bb9 100644
--- a/frontend/src/lib/forms/helpers.ts
+++ b/frontend/src/lib/forms/helpers.ts
@@ -1,14 +1,18 @@
 import { type SuperValidated } from 'sveltekit-superforms';
-import type {
-	GeneralSettingsSchema,
-	ContentSettingsSchema,
-	MediaServerSettingsSchema,
-	ScrapersSettingsSchema
-} from '$lib/schemas/setting';
+import { z } from 'zod';
 
 // General Settings -----------------------------------------------------------------------------------
 export const generalSettingsToGet: string[] = ['debug', 'log', 'symlink', 'real_debrid'];
 
+export const generalSettingsSchema = z.object({
+	debug: z.boolean().default(true),
+	log: z.boolean().default(true),
+	host_path: z.string().min(1),
+	container_path: z.string().min(1),
+	realdebrid_api_key: z.string().min(1)
+});
+export type GeneralSettingsSchema = typeof generalSettingsSchema;
+
 export function generalSettingsToPass(data: any) {
 	return {
 		debug: data.data.debug,
@@ -16,7 +20,7 @@ export function generalSettingsToPass(data: any) {
 		host_path: data.data.symlink.host_path,
 		container_path: data.data.symlink.container_path,
 		realdebrid_api_key: data.data.real_debrid.api_key
-	}
+	};
 }
 
 export function generalSettingsToSet(form: SuperValidated<GeneralSettingsSchema>) {
@@ -48,7 +52,26 @@ export function generalSettingsToSet(form: SuperValidated<GeneralSettingsSchema>
 // Content Settings -----------------------------------------------------------------------------------
 export const contentSettingsToGet: string[] = ['content'];
 
-export function contentSettingsToPass(data:any) {
+export const contentSettingsSchema = z.object({
+	overseerr_enabled: z.boolean().default(false),
+	overseerr_url: z.string().url().optional().default(''),
+	overseerr_api_key: z.string().optional().default(''),
+	mdblist_enabled: z.boolean().default(false),
+	mdblist_api_key: z.string().optional().default(''),
+	mdblist_update_interval: z.number().nonnegative().int().optional().default(80),
+	mdblist_lists: z.string().array().optional().default(['']),
+	plex_watchlist_enabled: z.boolean().default(false),
+	plex_watchlist_rss: z.union([z.string().url(), z.string().optional()]).optional().default(''),
+	plex_watchlist_update_interval: z.number().nonnegative().int().optional().default(80),
+	listrr_enabled: z.boolean().default(false),
+	listrr_api_key: z.string().optional().default(''),
+	listrr_update_interval: z.number().nonnegative().int().optional().default(80),
+	listrr_movie_lists: z.string().array().optional().default(['']),
+	listrr_show_lists: z.string().array().optional().default([''])
+});
+export type ContentSettingsSchema = typeof contentSettingsSchema;
+
+export function contentSettingsToPass(data: any) {
 	return {
 		overseerr_enabled: data.data.content.overseerr.enabled,
 		overseerr_url: data.data.content.overseerr?.url || '',
@@ -59,14 +82,13 @@ export function contentSettingsToPass(data:any) {
 		mdblist_lists: data.data.content.mdblist?.lists || [''],
 		plex_watchlist_enabled: data.data.content.plex_watchlist.enabled,
 		plex_watchlist_rss: data.data.content.plex_watchlist?.rss || '',
-		plex_watchlist_update_interval:
-			data.data.content.plex_watchlist?.update_interval || 80,
+		plex_watchlist_update_interval: data.data.content.plex_watchlist?.update_interval || 80,
 		listrr_enabled: data.data.content.listrr.enabled,
 		listrr_api_key: data.data.content.listrr?.api_key || '',
 		listrr_update_interval: data.data.content.listrr?.update_interval || 80,
 		listrr_movie_lists: data.data.content.listrr?.movie_lists || [''],
 		listrr_show_lists: data.data.content.listrr?.show_lists || ['']
-	}
+	};
 }
 
 export function contentSettingsToSet(form: SuperValidated<ContentSettingsSchema>) {
@@ -105,11 +127,17 @@ export function contentSettingsToSet(form: SuperValidated<ContentSettingsSchema>
 // Media Server Settings -----------------------------------------------------------------------------------
 export const mediaServerSettingsToGet: string[] = ['plex'];
 
+export const mediaServerSettingsSchema = z.object({
+	plex_token: z.string().optional().default(''),
+	plex_url: z.string().url().optional().default('')
+});
+export type MediaServerSettingsSchema = typeof mediaServerSettingsSchema;
+
 export function mediaServerSettingsToPass(data: any) {
 	return {
 		plex_token: data.data.plex.token,
 		plex_url: data.data.plex.url
-	}
+	};
 }
 
 export function mediaServerSettingsToSet(form: SuperValidated<MediaServerSettingsSchema>) {
@@ -127,6 +155,22 @@ export function mediaServerSettingsToSet(form: SuperValidated<MediaServerSetting
 // Scrapers Settings -----------------------------------------------------------------------------------
 export const scrapersSettingsToGet: string[] = ['scraping'];
 
+export const scrapersSettingsSchema = z.object({
+	after_2: z.number().nonnegative().default(0.5),
+	after_5: z.number().nonnegative().default(2),
+	after_10: z.number().nonnegative().default(24),
+	torrentio_enabled: z.boolean().default(false),
+	orionoid_enabled: z.boolean().default(false),
+	jackett_enabled: z.boolean().default(false),
+	torrentio_filter: z
+		.string()
+		.optional()
+		.default('sort=qualitysize%7Cqualityfilter=480p,scr,cam,unknown'),
+	orionoid_api_key: z.string().optional().default(''),
+	jackett_url: z.string().url().optional().default('http://localhost:9117')
+});
+export type ScrapersSettingsSchema = typeof scrapersSettingsSchema;
+
 export function scrapersSettingsToPass(data: any) {
 	return {
 		after_2: data.data.scraping.after_2,
@@ -138,7 +182,7 @@ export function scrapersSettingsToPass(data: any) {
 		torrentio_filter: data.data.scraping.torrentio?.filter || '',
 		orionoid_api_key: data.data.scraping.orionoid?.api_key || '',
 		jackett_url: data.data.scraping.jackett?.url || ''
-	}
+	};
 }
 
 export function scrapersSettingsToSet(form: SuperValidated<ScrapersSettingsSchema>) {
diff --git a/frontend/src/lib/forms/media-server-form.svelte b/frontend/src/lib/forms/media-server-form.svelte
index 1d200bbf..083a19e9 100644
--- a/frontend/src/lib/forms/media-server-form.svelte
+++ b/frontend/src/lib/forms/media-server-form.svelte
@@ -7,7 +7,7 @@
 	import { page } from '$app/stores';
 	import clsx from 'clsx';
 	import * as Form from '$lib/components/ui/form';
-	import { mediaServerSettingsSchema, type MediaServerSettingsSchema } from '$lib/schemas/setting';
+	import { mediaServerSettingsSchema, type MediaServerSettingsSchema } from '$lib/forms/helpers';
 	import { getContext } from 'svelte';
 	import type { SuperValidated } from 'sveltekit-superforms';
 	import { v4 as uuidv4 } from 'uuid';
@@ -111,27 +111,19 @@
 	<div class="flex flex-col my-4 gap-4">
 		<Form.Field {config} name="plex_url">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
-					Plex URL
-				</Form.Label>
-				<Form.Input class="text-sm md:text-base" spellcheck="false" />
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">Plex URL</Form.Label>
+				<Form.Input spellcheck="false" />
 			</Form.Item>
 			{#if $errors.plex_url}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Form.Field {config} name="plex_token">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 					Plex Token
 				</Form.Label>
-				<!-- <Form.Input
-					class={clsx('transition-all duration-300 text-sm md:text-base', {
-						'blur-sm hover:blur-none focus:blur-none': $form.plex_token.length > 0
-					})}
-					spellcheck="false"
-				/> -->
 				<input type="hidden" name="plex_token" id="plex_token" value={$form.plex_token} />
 				<Button
 					on:click={async () => {
@@ -139,7 +131,7 @@
 					}}
 					disabled={ongoingAuth}
 					size="sm"
-					class="w-full md:max-w-max"
+					class="w-full md:max-w-max text-xs font-semibold"
 				>
 					{#if ongoingAuth}
 						<Loader2 class="w-4 h-4 animate-spin mr-2" />
@@ -152,17 +144,17 @@
 				</Button>
 			</Form.Item>
 			{#if $errors.plex_token}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Separator class=" mt-4" />
 		<div class="flex w-full justify-end">
-			<Button disabled={$delayed} type="submit" size="sm" class="w-full md:max-w-max">
+			<Button disabled={$delayed} type="submit" size="sm" class="w-full md:max-w-max text-xs font-semibold">
 				{#if $delayed}
 					<Loader2 class="w-4 h-4 animate-spin mr-2" />
 				{/if}
-				Save changes <span class="ml-1" class:hidden={actionUrl === '?/default'}>and continue</span>
+				Save changes <span class="ml-1" class:hidden={$page.url.pathname === '/settings/mediaserver'}>and continue</span>
 			</Button>
 		</div>
 	</div>
diff --git a/frontend/src/lib/forms/scrapers-form.svelte b/frontend/src/lib/forms/scrapers-form.svelte
index 05e9f88f..54e0c789 100644
--- a/frontend/src/lib/forms/scrapers-form.svelte
+++ b/frontend/src/lib/forms/scrapers-form.svelte
@@ -8,7 +8,7 @@
 	import { page } from '$app/stores';
 	import clsx from 'clsx';
 	import * as Form from '$lib/components/ui/form';
-	import { scrapersSettingsSchema, type ScrapersSettingsSchema } from '$lib/schemas/setting';
+	import { scrapersSettingsSchema, type ScrapersSettingsSchema } from '$lib/forms/helpers';
 	import { getContext } from 'svelte';
 	import type { SuperValidated } from 'sveltekit-superforms';
 
@@ -38,63 +38,61 @@
 	<div class="flex flex-col my-4 gap-4">
 		<Form.Field {config} name="after_2">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 					Retry After 2 Times (hr)
 				</Form.Label>
-				<Form.Input type="number" step="0.01" class="text-sm md:text-base" spellcheck="false" />
+				<Form.Input type="number" step="0.01" spellcheck="false" />
 			</Form.Item>
 			{#if $errors.after_2}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Form.Field {config} name="after_5">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 					Retry After 5 Times (hr)
 				</Form.Label>
-				<Form.Input type="number" step="0.01" class="text-sm md:text-base" spellcheck="false" />
+				<Form.Input type="number" step="0.01" spellcheck="false" />
 			</Form.Item>
 			{#if $errors.after_5}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<Form.Field {config} name="after_10">
 			<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-				<Form.Label class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 					Retry After 10 Times (hr)
 				</Form.Label>
-				<Form.Input type="number" step="0.01" class="text-sm md:text-base" spellcheck="false" />
+				<Form.Input type="number" step="0.01" spellcheck="false" />
 			</Form.Item>
 			{#if $errors.after_10}
-				<Form.Validation class="text-sm md:text-base text-red-500" />
+				<Form.Validation class="text-sm text-red-500" />
 			{/if}
 		</Form.Field>
 
 		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-			<p class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
-				Scrapers Enabled
-			</p>
+			<p class="font-semibold w-48 min-w-48 text-muted-foreground">Scrapers Enabled</p>
 			<div class="flex flex-wrap gap-4">
 				<Form.Field {config} name="torrentio_enabled">
 					<div class="flex flex-wrap items-center gap-2">
 						<Form.Checkbox />
-						<Form.Label class="text-sm md:text-base">Torrentio</Form.Label>
+						<Form.Label>Torrentio</Form.Label>
 					</div>
 				</Form.Field>
 
 				<Form.Field {config} name="orionoid_enabled">
 					<div class="flex flex-wrap items-center gap-2">
 						<Form.Checkbox />
-						<Form.Label class="text-sm md:text-base">Orionoid</Form.Label>
+						<Form.Label>Orionoid</Form.Label>
 					</div>
 				</Form.Field>
 
 				<Form.Field {config} name="jackett_enabled">
 					<div class="flex flex-wrap items-center gap-2">
 						<Form.Checkbox />
-						<Form.Label class="text-sm md:text-base">Jackett</Form.Label>
+						<Form.Label>Jackett</Form.Label>
 					</div>
 				</Form.Field>
 			</div>
@@ -104,15 +102,13 @@
 			<div transition:slide>
 				<Form.Field {config} name="torrentio_filter">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Torrentio Filter
 						</Form.Label>
-						<Form.Input class="text-sm md:text-base" spellcheck="false" />
+						<Form.Input spellcheck="false" />
 					</Form.Item>
 					{#if $errors.torrentio_filter}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -122,20 +118,18 @@
 			<div transition:slide>
 				<Form.Field {config} name="orionoid_api_key">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Orionoid API Key
 						</Form.Label>
 						<Form.Input
-							class={clsx('transition-all duration-300 text-sm md:text-base', {
+							class={clsx('transition-all duration-300', {
 								'blur-sm hover:blur-none focus:blur-none': $form.orionoid_api_key.length > 0
 							})}
 							spellcheck="false"
 						/>
 					</Form.Item>
 					{#if $errors.orionoid_api_key}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -145,15 +139,13 @@
 			<div transition:slide>
 				<Form.Field {config} name="jackett_url">
 					<Form.Item class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
-						<Form.Label
-							class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
-						>
+						<Form.Label class="font-semibold w-48 min-w-48 text-muted-foreground">
 							Jackett URL
 						</Form.Label>
-						<Form.Input class="text-sm md:text-base" spellcheck="false" />
+						<Form.Input spellcheck="false" />
 					</Form.Item>
 					{#if $errors.jackett_url}
-						<Form.Validation class="text-sm md:text-base text-red-500" />
+						<Form.Validation class="text-sm text-red-500" />
 					{/if}
 				</Form.Field>
 			</div>
@@ -161,11 +153,19 @@
 
 		<Separator class=" mt-4" />
 		<div class="flex w-full justify-end">
-			<Button disabled={$delayed} type="submit" size="sm" class="w-full md:max-w-max">
+			<Button
+				disabled={$delayed}
+				type="submit"
+				size="sm"
+				class="w-full md:max-w-max font-semibold text-xs"
+			>
 				{#if $delayed}
 					<Loader2 class="w-4 h-4 animate-spin mr-2" />
 				{/if}
-				Save changes <span class="ml-1" class:hidden={actionUrl === '?/default'}>and continue</span>
+				Save changes
+				<span class="ml-1" class:hidden={$page.url.pathname === '/settings/scrapers'}
+					>and continue</span
+				>
 			</Button>
 		</div>
 	</div>
diff --git a/frontend/src/lib/schemas/setting.ts b/frontend/src/lib/schemas/setting.ts
deleted file mode 100644
index b2309924..00000000
--- a/frontend/src/lib/schemas/setting.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { z } from 'zod';
-
-export const generalSettingsSchema = z.object({
-	debug: z.boolean().default(true),
-	log: z.boolean().default(true),
-	host_path: z.string().min(1),
-	container_path: z.string().min(1),
-	realdebrid_api_key: z.string().min(1),
-});
-
-export const scrapersSettingsSchema = z.object({
-	after_2: z.number().nonnegative().default(0.5),
-	after_5: z.number().nonnegative().default(2),
-	after_10: z.number().nonnegative().default(24),
-	torrentio_enabled: z.boolean().default(false),
-	orionoid_enabled: z.boolean().default(false),
-	jackett_enabled: z.boolean().default(false),
-	torrentio_filter: z.string().optional().default('sort=qualitysize%7Cqualityfilter=480p,scr,cam,unknown'),
-	orionoid_api_key: z.string().optional().default(''),
-	jackett_url: z.string().url().optional().default('http://localhost:9117')
-});
-
-export const mediaServerSettingsSchema = z.object({
-	plex_token: z.string().optional().default(''),
-	plex_url: z.string().url().optional().default('')
-});
-
-export const contentSettingsSchema = z.object({
-	overseerr_enabled: z.boolean().default(false),
-	overseerr_url: z.string().url().optional().default(''),
-	overseerr_api_key: z.string().optional().default(''),
-	mdblist_enabled: z.boolean().default(false),
-	mdblist_api_key: z.string().optional().default(''),
-	mdblist_update_interval: z.number().nonnegative().int().optional().default(80),
-	mdblist_lists: z.string().array().optional().default(['']),
-	plex_watchlist_enabled: z.boolean().default(false),
-	plex_watchlist_rss: z.union([z.string().url(), z.string().optional()]).optional().default(''),
-	plex_watchlist_update_interval: z.number().nonnegative().int().optional().default(80),
-	listrr_enabled: z.boolean().default(false),
-	listrr_api_key: z.string().optional().default(''),
-	listrr_update_interval: z.number().nonnegative().int().optional().default(80),
-	listrr_movie_lists: z.string().array().optional().default(['']),
-	listrr_show_lists: z.string().array().optional().default([''])
-});
-
-export type GeneralSettingsSchema = typeof generalSettingsSchema;
-export type ScrapersSettingsSchema = typeof scrapersSettingsSchema;
-export type MediaServerSettingsSchema = typeof mediaServerSettingsSchema;
-export type ContentSettingsSchema = typeof contentSettingsSchema;
diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte
index 33da0508..be64f086 100644
--- a/frontend/src/routes/+error.svelte
+++ b/frontend/src/routes/+error.svelte
@@ -2,8 +2,9 @@
 	import { page } from '$app/stores';
 </script>
 
-<div class="flex flex-col items-center justify-center w-full h-full font-primary">
-	<h1 class="text-4xl font-bold text-center">Something went wrong</h1>
-	<p class="text-lg text-muted-foreground">Error code: {$page.status}</p>
-	<p class="text-base text-muted-foreground">Error message: {$page.error?.message}</p>
+<div class="flex flex-col items-center justify-center w-full h-full font-primary font-medium">
+	<h1 class="text-3xl font-bold text-center">Something went wrong</h1>
+	<p class="text-base text-muted-foreground">Error code: {$page.status}</p>
+	<p class="text-sm text-muted-foreground">Error message: {$page.error?.message}</p>
+	
 </div>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index f672084e..ce5c3383 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -8,6 +8,8 @@
 	import Header from '$lib/components/header.svelte';
 	import * as Command from '$lib/components/ui/command';
 	import { Settings, CircleDashed, SlidersHorizontal, Info, Layers, Tv } from 'lucide-svelte';
+	import type { ComponentType } from 'svelte';
+	import type { Icon } from 'lucide-svelte';
 	import { page } from '$app/stores';
 	import { setContext } from 'svelte';
 	import { dev } from '$app/environment';
@@ -37,12 +39,59 @@
 			document.removeEventListener('keydown', handleKeydown);
 		};
 	});
+
+	type CommandItem = {
+		name: string;
+		href: string;
+		icon: ComponentType<Icon>;
+	};
+
+	const suggestedItems: CommandItem[] = [
+		{
+			name: 'Settings',
+			href: '/settings',
+			icon: Settings
+		},
+		{
+			name: 'Status',
+			href: '/status',
+			icon: CircleDashed
+		}
+	];
+
+	const commandItems: CommandItem[] = [
+		{
+			name: 'General',
+			href: '/settings/general',
+			icon: SlidersHorizontal
+		},
+		{
+			name: 'Media Server',
+			href: '/settings/mediaserver',
+			icon: Tv
+		},
+		{
+			name: 'Content',
+			href: '/settings/content',
+			icon: Layers
+		},
+		{
+			name: 'Scrapers',
+			href: '/settings/scrapers',
+			icon: Layers
+		},
+		{
+			name: 'About',
+			href: '/settings/about',
+			icon: Info
+		}
+	];
 </script>
 
 <ModeWatcher track={true} />
 <Toaster richColors closeButton />
 
-<div class="font-primary flex flex-col w-full h-full overflow-x-hidden">
+<div class="font-primary font-medium flex flex-col w-full h-full overflow-x-hidden">
 	{#if !$page.url.pathname.startsWith('/onboarding')}
 		<Header />
 	{/if}
@@ -50,76 +99,37 @@
 </div>
 
 <Command.Dialog bind:open>
-	<Command.Input
-		class="text-base lg:text-lg font-primary"
-		placeholder="Type a command or search..."
-	/>
-	<Command.List class="font-primary">
-		<Command.Empty class="lg:text-base">No results found.</Command.Empty>
+	<Command.Input class="font-medium font-primary" placeholder="Type a command or search..." />
+	<Command.List class="font-primary font-medium">
+		<Command.Empty>No results found.</Command.Empty>
 		<Command.Group heading="Suggestions">
-			<Command.Item
-				class="lg:text-base"
-				onSelect={async () => {
-					open = false;
-					await goto('/settings');
-				}}
-			>
-				<Settings class="mr-2 h-4 w-4" />
-				<span>Settings</span>
-			</Command.Item>
-			<Command.Item
-				class="lg:text-base"
-				onSelect={async () => {
-					open = false;
-					await goto('/status');
-				}}
-			>
-				<CircleDashed class="mr-2 h-4 w-4" />
-				<span>Status</span>
-			</Command.Item>
+			{#each suggestedItems as item}
+				<Command.Item
+					class="text-sm"
+					onSelect={async () => {
+						open = false;
+						await goto(item.href);
+					}}
+				>
+					<svelte:component this={item.icon} class="mr-2 h-4 w-4" />
+					<span>{item.name}</span>
+				</Command.Item>
+			{/each}
 		</Command.Group>
 		<Command.Separator />
-		<Command.Group heading="Settings">
-			<Command.Item
-				class="lg:text-base"
-				onSelect={async () => {
-					open = false;
-					await goto('/settings/general');
-				}}
-			>
-				<SlidersHorizontal class="mr-2 h-4 w-4" />
-				<span>General</span>
-			</Command.Item>
-			<Command.Item
-				class="lg:text-base"
-				onSelect={async () => {
-					open = false;
-					await goto('/settings/plex');
-				}}
-			>
-				<Tv class="mr-2 h-4 w-4" />
-				<span>Plex</span>
-			</Command.Item>
-			<Command.Item
-				class="lg:text-base"
-				onSelect={async () => {
-					open = false;
-					await goto('/settings/content');
-				}}
-			>
-				<Layers class="mr-2 h-4 w-4" />
-				<span>Content</span>
-			</Command.Item>
-			<Command.Item
-				class="lg:text-base"
-				onSelect={async () => {
-					open = false;
-					await goto('/settings/about');
-				}}
-			>
-				<Info class="mr-2 h-4 w-4" />
-				<span>About</span>
-			</Command.Item>
+		<Command.Group heading="All">
+			{#each commandItems as item}
+				<Command.Item
+					class="text-sm"
+					onSelect={async () => {
+						open = false;
+						await goto(item.href);
+					}}
+				>
+					<svelte:component this={item.icon} class="mr-2 h-4 w-4" />
+					<span>{item.name}</span>
+				</Command.Item>
+			{/each}
 		</Command.Group>
 	</Command.List>
 </Command.Dialog>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d285db05..251d2f98 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -28,14 +28,14 @@
 	<title>Iceberg | Home</title>
 </svelte:head>
 
-<div class="flex flex-col w-full p-8 md:px-24 lg:px-32">
+<div class="flex flex-col w-full p-8 md:px-24 lg:px-32 font-medium">
 	{#if 'error' in data.user || !data.user}
-		<p class="md:text-lg text-red-500">Failed to fetch user data.</p>
-		<p class="md:text-lg text-red-500">Error: {data.user?.error || 'Unknown'}</p>
+		<p class="text-red-500">Failed to fetch user data.</p>
+		<p class="text-red-500">Error: {data.user?.error || 'Unknown'}</p>
 	{:else}
-		<h1 class="text-xl md:text-2xl font-semibold">Welcome {data.user?.username}</h1>
-		<p class="md:text-lg text-muted-foreground">{data.user?.email}</p>
-		<p class="md:text-lg text-muted-foreground break-words">
+		<h1 class="text-lg md:text-xl font-semibold">Welcome {data.user?.username}</h1>
+		<p class="text-muted-foreground">{data.user?.email}</p>
+		<p class="text-muted-foreground break-words">
 			Premium expires on {formatRDDate(data.user?.expiration, 'short')}
 		</p>
 	{/if}
@@ -44,18 +44,18 @@
 	{#await data.services}
 		<div class="flex gap-1 items-center mt-2">
 			<Loader2 class="w-4 h-4 animate-spin" />
-			<p class="md:text-lg text-muted-foreground">Fetching services status</p>
+			<p class="text-muted-foreground">Fetching services status</p>
 		</div>
 	{:then services}
-		<h2 class="text-xl md:text-2xl font-semibold">Core services</h2>
+		<h2 class="text-lg md:text-xl font-semibold">Core services</h2>
 		<ServiceStatus statusData={sortServices(MandatoryServices, services.data)} />
 		<br />
-		<h2 class="text-xl md:text-2xl font-semibold">Content services</h2>
+		<h2 class="text-lg md:text-xl font-semibold">Content services</h2>
 		<ServiceStatus statusData={sortServices(ContentServices, services.data)} />
 		<br />
-		<h2 class="text-xl md:text-2xl font-semibold">Scraping services</h2>
+		<h2 class="text-lg md:text-xl font-semibold">Scraping services</h2>
 		<ServiceStatus statusData={sortServices(ScrapingServices, services.data)} />
 	{:catch}
-		<p class="md:text-lg text-muted-foreground">Failed to fetch services status</p>
+		<p class="text-muted-foreground">Failed to fetch services status</p>
 	{/await}
 </div>
diff --git a/frontend/src/routes/onboarding/+page.svelte b/frontend/src/routes/onboarding/+page.svelte
index c614532b..9e42495f 100644
--- a/frontend/src/routes/onboarding/+page.svelte
+++ b/frontend/src/routes/onboarding/+page.svelte
@@ -45,12 +45,12 @@
 		<div class="flex items-center justify-center slide-up">
 			<Mountain class="w-16 h-16" />
 		</div>
-		<h1 class="text-4xl font-semibold text-center slide-up">Welcome to Iceberg!</h1>
-		<p class="text-lg md:text-xl text-center text-muted-foreground slide-up max-w-lg md:max-w-2xl">
+		<h1 class="text-3xl font-semibold text-center slide-up">Welcome to Iceberg!</h1>
+		<p class="text-base md:text-lg text-center text-muted-foreground slide-up max-w-lg md:max-w-2xl">
 			Before you can start using Iceberg, you need to configure some services first.
 		</p>
 		<Button
-			class="mt-4 slide-up font-semibold md:text-base w-full md:max-w-max"
+			class="mt-4 slide-up font-semibold w-full md:max-w-max"
 			href="/onboarding/1"
 		>
 			<Rocket class="w-4 h-4 mr-2" />
diff --git a/frontend/src/routes/onboarding/1/+page.server.ts b/frontend/src/routes/onboarding/1/+page.server.ts
index 1edbc2c3..51bec487 100644
--- a/frontend/src/routes/onboarding/1/+page.server.ts
+++ b/frontend/src/routes/onboarding/1/+page.server.ts
@@ -1,13 +1,8 @@
-import type { PageServerLoad, Actions } from './$types';
-import { fail, error } from '@sveltejs/kit';
-import { message, superValidate } from 'sveltekit-superforms/server';
-import { generalSettingsSchema } from '$lib/schemas/setting';
-import { saveSettings } from '$lib/helpers';
-import {
-	generalSettingsToGet,
-	generalSettingsToPass,
-	generalSettingsToSet
-} from '$lib/forms/helpers';
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { superValidate } from 'sveltekit-superforms/server';
+import { generalSettingsSchema } from '$lib/forms/helpers';
+import { generalSettingsToGet, generalSettingsToPass } from '$lib/forms/helpers';
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	async function getPartialSettings() {
diff --git a/frontend/src/routes/onboarding/1/+page.svelte b/frontend/src/routes/onboarding/1/+page.svelte
index 26d76247..b76eb47a 100644
--- a/frontend/src/routes/onboarding/1/+page.svelte
+++ b/frontend/src/routes/onboarding/1/+page.svelte
@@ -8,9 +8,9 @@
 
 <div class="flex flex-col p-8 md:px-24 lg:px-32 overflow-x-hidden h-full w-full py-32 items-center">
 	<div class="flex flex-col items-start w-full max-w-6xl">
-		<h1 class="text-3xl md:text-2xl lg:text-5xl font-bold mb-2">Step 1/4</h1>
-		<p class="text-lg">Let's get started by configuring your general settings.</p>
-		<small class="text-sm md:text-base text-muted-foreground"
+		<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-2">Step 1/4</h1>
+		<p class="text-base md:text-lg">Let's get started by configuring your general settings.</p>
+		<small class="text-sm text-muted-foreground"
 			>Fields marked with <span class="text-red-500">*</span> require restart of backend services.</small
 		>
 	</div>
diff --git a/frontend/src/routes/onboarding/2/+page.server.ts b/frontend/src/routes/onboarding/2/+page.server.ts
index 46571291..ca9baa6d 100644
--- a/frontend/src/routes/onboarding/2/+page.server.ts
+++ b/frontend/src/routes/onboarding/2/+page.server.ts
@@ -1,12 +1,10 @@
 import type { PageServerLoad, Actions } from './$types';
-import { fail, error } from '@sveltejs/kit';
-import { message, superValidate } from 'sveltekit-superforms/server';
-import { mediaServerSettingsSchema } from '$lib/schemas/setting';
-import { saveSettings } from '$lib/helpers';
+import { error } from '@sveltejs/kit';
+import { superValidate } from 'sveltekit-superforms/server';
+import { mediaServerSettingsSchema } from '$lib/forms/helpers';
 import {
 	mediaServerSettingsToGet,
 	mediaServerSettingsToPass,
-	mediaServerSettingsToSet
 } from '$lib/forms/helpers';
 
 export const load: PageServerLoad = async ({ fetch }) => {
diff --git a/frontend/src/routes/onboarding/2/+page.svelte b/frontend/src/routes/onboarding/2/+page.svelte
index 7a86cb12..0027af12 100644
--- a/frontend/src/routes/onboarding/2/+page.svelte
+++ b/frontend/src/routes/onboarding/2/+page.svelte
@@ -8,9 +8,9 @@
 
 <div class="flex flex-col p-8 md:px-24 lg:px-32 overflow-x-hidden h-full w-full py-32 items-center">
 	<div class="flex flex-col items-start w-full max-w-6xl">
-		<h1 class="text-3xl md:text-2xl lg:text-5xl font-bold mb-2">Step 2/4</h1>
-		<p class="text-lg">Time to configure your media server.</p>
-		<small class="text-sm md:text-base text-muted-foreground"
+		<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-2">Step 2/4</h1>
+		<p class="text-base md:text-lg">Time to configure your media server.</p>
+		<small class="text-sm text-muted-foreground"
 			>Fields marked with <span class="text-red-500">*</span> require restart of backend services.</small
 		>
 	</div>
diff --git a/frontend/src/routes/onboarding/3/+page.server.ts b/frontend/src/routes/onboarding/3/+page.server.ts
index b46ca034..67345841 100644
--- a/frontend/src/routes/onboarding/3/+page.server.ts
+++ b/frontend/src/routes/onboarding/3/+page.server.ts
@@ -1,12 +1,10 @@
 import type { PageServerLoad, Actions } from './$types';
-import { fail, error } from '@sveltejs/kit';
-import { message, superValidate } from 'sveltekit-superforms/server';
-import { contentSettingsSchema } from '$lib/schemas/setting';
-import { saveSettings } from '$lib/helpers';
+import { error } from '@sveltejs/kit';
+import { superValidate } from 'sveltekit-superforms/server';
+import { contentSettingsSchema } from '$lib/forms/helpers';
 import {
 	contentSettingsToGet,
 	contentSettingsToPass,
-	contentSettingsToSet
 } from '$lib/forms/helpers';
 
 export const load: PageServerLoad = async ({ fetch }) => {
diff --git a/frontend/src/routes/onboarding/3/+page.svelte b/frontend/src/routes/onboarding/3/+page.svelte
index 96d3c405..2fad8b55 100644
--- a/frontend/src/routes/onboarding/3/+page.svelte
+++ b/frontend/src/routes/onboarding/3/+page.svelte
@@ -8,9 +8,9 @@
 
 <div class="flex flex-col p-8 md:px-24 lg:px-32 overflow-x-hidden h-full w-full py-32 items-center">
 	<div class="flex flex-col items-start w-full max-w-6xl">
-		<h1 class="text-3xl md:text-2xl lg:text-5xl font-bold mb-2">Step 3/4</h1>
-		<p class="text-lg">Services to request content from.</p>
-		<small class="text-sm md:text-base text-muted-foreground"
+		<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-2">Step 3/4</h1>
+		<p class="text-base md:text-lg">Services to request content from.</p>
+		<small class="text-sm text-muted-foreground"
 			>Fields marked with <span class="text-red-500">*</span> require restart of backend services.</small
 		>
 	</div>
diff --git a/frontend/src/routes/onboarding/4/+page.server.ts b/frontend/src/routes/onboarding/4/+page.server.ts
index 0675662d..7a6590eb 100644
--- a/frontend/src/routes/onboarding/4/+page.server.ts
+++ b/frontend/src/routes/onboarding/4/+page.server.ts
@@ -1,12 +1,10 @@
 import type { PageServerLoad, Actions } from './$types';
-import { fail, error } from '@sveltejs/kit';
-import { message, superValidate } from 'sveltekit-superforms/server';
-import { scrapersSettingsSchema } from '$lib/schemas/setting';
-import { saveSettings } from '$lib/helpers';
+import { error } from '@sveltejs/kit';
+import { superValidate } from 'sveltekit-superforms/server';
+import { scrapersSettingsSchema } from '$lib/forms/helpers';
 import {
 	scrapersSettingsToGet,
 	scrapersSettingsToPass,
-	scrapersSettingsToSet
 } from '$lib/forms/helpers';
 
 export const load: PageServerLoad = async ({ fetch }) => {
diff --git a/frontend/src/routes/onboarding/4/+page.svelte b/frontend/src/routes/onboarding/4/+page.svelte
index ee1ee5b1..4b7c7c0b 100644
--- a/frontend/src/routes/onboarding/4/+page.svelte
+++ b/frontend/src/routes/onboarding/4/+page.svelte
@@ -8,9 +8,9 @@
 
 <div class="flex flex-col p-8 md:px-24 lg:px-32 overflow-x-hidden h-full w-full py-32 items-center">
 	<div class="flex flex-col items-start w-full max-w-6xl">
-		<h1 class="text-3xl md:text-2xl lg:text-5xl font-bold mb-2">Step 4/4</h1>
-		<p class="text-lg">Configure where to scrape content from.</p>
-		<small class="text-sm md:text-base text-muted-foreground"
+		<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-2">Step 4/4</h1>
+		<p class="text-base md:text-lg">Configure where to scrape content from.</p>
+		<small class="text-sm text-muted-foreground"
 			>Fields marked with <span class="text-red-500">*</span> require restart of backend services.</small
 		>
 	</div>
diff --git a/frontend/src/routes/settings/+layout.svelte b/frontend/src/routes/settings/+layout.svelte
index 920acb67..12d56ac9 100644
--- a/frontend/src/routes/settings/+layout.svelte
+++ b/frontend/src/routes/settings/+layout.svelte
@@ -45,7 +45,7 @@
 				(settingsItems.find((item) => item.path === $page.url.pathname) || {}).name || 'Not found'
 		}}
 	>
-		<Select.Trigger class="text-base lg:hidden">
+		<Select.Trigger class="text-sm lg:hidden">
 			<Select.Value placeholder="Select settings type" />
 		</Select.Trigger>
 		<Select.Content>
@@ -56,7 +56,7 @@
 	</Select.Root>
 
 	<div
-		class="hidden lg:flex flex-wrap w-full bg-slate-200 dark:bg-slate-800 p-1 gap-2 rounded-md text-base"
+		class="hidden lg:flex flex-wrap w-full bg-slate-200 dark:bg-slate-800 p-1 gap-2 rounded-md text-sm"
 	>
 		{#each settingsItems as item}
 			<a
diff --git a/frontend/src/routes/settings/about/+page.svelte b/frontend/src/routes/settings/about/+page.svelte
index a3153ec5..036e5dbc 100644
--- a/frontend/src/routes/settings/about/+page.svelte
+++ b/frontend/src/routes/settings/about/+page.svelte
@@ -39,24 +39,24 @@
 </svelte:head>
 
 <div class="flex flex-col">
-	<Alert.Root class="text-lg">
+	<Alert.Root class="text-sm">
 		<Alert.Title>Heads up!</Alert.Title>
-		<Alert.Description class="text-base"
-			>Iceberg is in rapid development. Expect bugs.</Alert.Description
+		<Alert.Description class=""
+			>Iceberg is in rapid development. Expect bugs and breaking changes.</Alert.Description
 		>
 	</Alert.Root>
 
-	<h2 class="text-2xl md:text-3xl font-semibold mt-2">About</h2>
-	<p class="text-base md:text-lg text-muted-foreground mb-2">Know what you're running.</p>
+	<h2 class="text-xl md:text-2xl font-semibold mt-2">About</h2>
+	<p class="text-sm md:text-base text-muted-foreground mb-2">Know what you're running.</p>
 	<div class="flex flex-col gap-4 w-full">
 		{#each Object.keys(aboutData) as key}
 			<Separator />
 			<div class="flex flex-col md:flex-row items-start md:items-center mb-2">
-				<h3 class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<h3 class="text-sm md:text-base font-semibold w-48 min-w-48 text-muted-foreground">
 					{formatWords(key)}
 				</h3>
 				<div class="flex w-full">
-					<p class="text-sm md:text-base break-words p-2 rounded-md bg-slate-100 dark:bg-slate-900">
+					<p class="text-xs md:text-sm break-words p-2 rounded-md bg-slate-100 dark:bg-slate-900">
 						{aboutData[key]}
 					</p>
 				</div>
@@ -64,19 +64,19 @@
 		{/each}
 	</div>
 
-	<h2 class="text-2xl md:text-3xl font-semibold mt-2">Support</h2>
-	<p class="text-base md:text-lg text-muted-foreground mb-2">
+	<h2 class="text-xl md:text-2xl font-semibold mt-2">Support</h2>
+	<p class="text-sm md:text-base text-muted-foreground mb-2">
 		Need help? Join the Discord server or open an issue on GitHub.
 	</p>
 	<div class="flex flex-col gap-4 w-full">
 		{#each Object.keys(supportData) as key}
 			<Separator />
 			<div class="flex flex-col md:flex-row items-start md:items-center mb-2">
-				<h3 class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground">
+				<h3 class="text-sm md:text-base font-semibold w-48 min-w-48 text-muted-foreground">
 					{formatWords(key)}
 				</h3>
 				<div class="flex w-full">
-					<a href={supportData[key]} class="text-sm md:text-base break-words underline">
+					<a href={supportData[key]} class="text-xs md:text-sm break-words underline">
 						{supportData[key]}
 					</a>
 				</div>
diff --git a/frontend/src/routes/settings/content/+page.server.ts b/frontend/src/routes/settings/content/+page.server.ts
index c8dcd9ec..b3bf7981 100644
--- a/frontend/src/routes/settings/content/+page.server.ts
+++ b/frontend/src/routes/settings/content/+page.server.ts
@@ -1,9 +1,9 @@
 import type { PageServerLoad, Actions } from './$types';
 import { fail, error, redirect } from '@sveltejs/kit';
 import { message, superValidate } from 'sveltekit-superforms/server';
-import { contentSettingsSchema } from '$lib/schemas/setting';
 import { saveSettings } from '$lib/helpers';
 import {
+	contentSettingsSchema,
 	contentSettingsToGet,
 	contentSettingsToPass,
 	contentSettingsToSet
diff --git a/frontend/src/routes/settings/content/+page.svelte b/frontend/src/routes/settings/content/+page.svelte
index a01d9345..60bd00ce 100644
--- a/frontend/src/routes/settings/content/+page.svelte
+++ b/frontend/src/routes/settings/content/+page.svelte
@@ -6,8 +6,8 @@
 </script>
 
 <div class="flex flex-col">
-	<h2 class="text-2xl md:text-3xl font-semibold">Content Settings</h2>
-	<p class="text-base md:text-lg text-muted-foreground">Configure content providers for Iceberg.</p>
+	<h2 class="text-xl md:text-2xl font-semibold">Content Settings</h2>
+	<p class="text-sm md:text-base text-muted-foreground">Configure content providers for Iceberg.</p>
 
 	<ContentForm data={data.form} actionUrl="/settings/content" />
 </div>
diff --git a/frontend/src/routes/settings/general/+page.server.ts b/frontend/src/routes/settings/general/+page.server.ts
index 4ea82c01..e4d81722 100644
--- a/frontend/src/routes/settings/general/+page.server.ts
+++ b/frontend/src/routes/settings/general/+page.server.ts
@@ -1,14 +1,20 @@
 import type { PageServerLoad, Actions } from './$types';
 import { fail, error, redirect } from '@sveltejs/kit';
 import { message, superValidate } from 'sveltekit-superforms/server';
-import { generalSettingsSchema } from '$lib/schemas/setting';
 import { saveSettings } from '$lib/helpers';
-import { generalSettingsToGet, generalSettingsToPass, generalSettingsToSet } from '$lib/forms/helpers';
+import {
+	generalSettingsSchema,
+	generalSettingsToGet,
+	generalSettingsToPass,
+	generalSettingsToSet
+} from '$lib/forms/helpers';
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	async function getPartialSettings() {
 		try {
-			const results = await fetch(`http://127.0.0.1:8080/settings/get/${generalSettingsToGet.join(',')}`);
+			const results = await fetch(
+				`http://127.0.0.1:8080/settings/get/${generalSettingsToGet.join(',')}`
+			);
 			return await results.json();
 		} catch (e) {
 			console.error(e);
@@ -26,7 +32,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 export const actions: Actions = {
 	default: async (event) => {
 		const form = await superValidate(event, generalSettingsSchema);
-		console.log(event.url.searchParams)
+		console.log(event.url.searchParams);
 
 		if (!form.valid) {
 			return fail(400, {
diff --git a/frontend/src/routes/settings/general/+page.svelte b/frontend/src/routes/settings/general/+page.svelte
index 202fd626..37233814 100644
--- a/frontend/src/routes/settings/general/+page.svelte
+++ b/frontend/src/routes/settings/general/+page.svelte
@@ -7,24 +7,24 @@
 </script>
 
 <div class="flex flex-col">
-	<h2 class="text-2xl md:text-3xl font-semibold">General Settings</h2>
-	<p class="text-base md:text-lg text-muted-foreground">
+	<h2 class="text-xl md:text-2xl font-semibold">General Settings</h2>
+	<p class="text-sm md:text-base text-muted-foreground">
 		Configure global and default settings for Iceberg.
 	</p>
 	<Accordion.Root>
 		<Accordion.Item value="debug-vs-log">
-			<Accordion.Trigger class="text-base md:text-lg font-normal"
+			<Accordion.Trigger class="text-sm font-medium"
 				>What is the difference in debug and log?</Accordion.Trigger
 			>
-			<Accordion.Content class="text-sm md:text-base"
+			<Accordion.Content class=""
 				>DEBUG is the log level, if you turn it off you will only see INFO in the logs. LOG on
 				another hand means logging to file.</Accordion.Content
 			>
 		</Accordion.Item>
 	</Accordion.Root>
 
-	<p class="text-sm md:text-base text-muted-foreground mt-4">
-		* These settings require a restart to take effect.
+	<p class="text-sm text-muted-foreground mt-4">
+		<span class="text-red-500">*</span> These settings require a restart to take effect.
 	</p>
 
 	<GeneralForm data={data.form} actionUrl="/settings/general"/>
diff --git a/frontend/src/routes/settings/mediaserver/+page.server.ts b/frontend/src/routes/settings/mediaserver/+page.server.ts
index 0b2b4f54..16fbb396 100644
--- a/frontend/src/routes/settings/mediaserver/+page.server.ts
+++ b/frontend/src/routes/settings/mediaserver/+page.server.ts
@@ -1,9 +1,9 @@
 import type { PageServerLoad, Actions } from './$types';
 import { fail, error, redirect } from '@sveltejs/kit';
 import { message, superValidate } from 'sveltekit-superforms/server';
-import { mediaServerSettingsSchema } from '$lib/schemas/setting';
 import { saveSettings } from '$lib/helpers';
 import {
+	mediaServerSettingsSchema,
 	mediaServerSettingsToGet,
 	mediaServerSettingsToPass,
 	mediaServerSettingsToSet
diff --git a/frontend/src/routes/settings/mediaserver/+page.svelte b/frontend/src/routes/settings/mediaserver/+page.svelte
index 471ccd56..fbf3597d 100644
--- a/frontend/src/routes/settings/mediaserver/+page.svelte
+++ b/frontend/src/routes/settings/mediaserver/+page.svelte
@@ -5,8 +5,8 @@
 </script>
 
 <div class="flex flex-col">
-	<h2 class="text-2xl md:text-3xl font-semibold">Media Server Settings</h2>
-	<p class="text-base md:text-lg text-muted-foreground">
+	<h2 class="text-xl md:text-2xl font-semibold">Media Server Settings</h2>
+	<p class="text-sm md:text-base text-muted-foreground">
 		Configure media server settings for Iceberg.
 	</p>
 
diff --git a/frontend/src/routes/settings/scrapers/+page.server.ts b/frontend/src/routes/settings/scrapers/+page.server.ts
index dcb3558b..216d8577 100644
--- a/frontend/src/routes/settings/scrapers/+page.server.ts
+++ b/frontend/src/routes/settings/scrapers/+page.server.ts
@@ -1,14 +1,20 @@
 import type { PageServerLoad, Actions } from './$types';
 import { fail, error, redirect } from '@sveltejs/kit';
 import { message, superValidate } from 'sveltekit-superforms/server';
-import { scrapersSettingsSchema } from '$lib/schemas/setting';
 import { saveSettings } from '$lib/helpers';
-import { scrapersSettingsToGet, scrapersSettingsToPass, scrapersSettingsToSet } from '$lib/forms/helpers';
+import {
+	scrapersSettingsSchema,
+	scrapersSettingsToGet,
+	scrapersSettingsToPass,
+	scrapersSettingsToSet
+} from '$lib/forms/helpers';
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	async function getPartialSettings() {
 		try {
-			const results = await fetch(`http://127.0.0.1:8080/settings/get/${scrapersSettingsToGet.join(',')}`);
+			const results = await fetch(
+				`http://127.0.0.1:8080/settings/get/${scrapersSettingsToGet.join(',')}`
+			);
 			return await results.json();
 		} catch (e) {
 			console.error(e);
diff --git a/frontend/src/routes/settings/scrapers/+page.svelte b/frontend/src/routes/settings/scrapers/+page.svelte
index 8fe21ff1..0b92b93a 100644
--- a/frontend/src/routes/settings/scrapers/+page.svelte
+++ b/frontend/src/routes/settings/scrapers/+page.svelte
@@ -6,8 +6,8 @@
 </script>
 
 <div class="flex flex-col">
-	<h2 class="text-2xl md:text-3xl font-semibold">Scraper Settings</h2>
-	<p class="text-base md:text-lg text-muted-foreground">Configure scraper settings for Iceberg.</p>
+	<h2 class="text-xl md:text-2xl font-semibold">Scraper Settings</h2>
+	<p class="text-sm md:text-base text-muted-foreground">Configure scraper settings for Iceberg.</p>
 
 	<ScrapersForm data={data.form} actionUrl="/settings/scrapers"/>
 </div>
diff --git a/frontend/src/routes/status/+page.svelte b/frontend/src/routes/status/+page.svelte
index a57b18b7..7e5dddf5 100644
--- a/frontend/src/routes/status/+page.svelte
+++ b/frontend/src/routes/status/+page.svelte
@@ -71,15 +71,15 @@
 	{#await data.items}
 		<div class="flex items-center gap-1 w-full justify-center">
 			<Loader2 class="animate-spin w-4 h-4" />
-			<p class="text-lg text-muted-foreground">Loading library items...</p>
+			<p class="text-muted-foreground">Loading library items...</p>
 		</div>
 	{:then items}
 		<div class="flex flex-row items-center justify-between">
 			<div class="flex flex-col items-start">
-				<h1 class="text-3xl md:text-4xl font-semibold">
-					Status <span class="text-xl md:text-2xl">({items.items.length})</span>
+				<h1 class="text-2xl md:text-3xl font-semibold">
+					Status <span class="text-lg md:text-xl">({items.items.length})</span>
 				</h1>
-				<p class="md:text-lg text-muted-foreground">
+				<p class="text-muted-foreground">
 					This page shows the status of your library items.
 				</p>
 			</div>
@@ -127,13 +127,13 @@
 		<Accordion.Root>
 			<Accordion.Item value="item-1">
 				<Accordion.Trigger>
-					<div class="flex items-center gap-2 md:text-lg">
+					<div class="flex items-center gap-2 text-sm">
 						<Info class="h-4 w-4" />
 						<p>Learn more about status badges</p>
 					</div>
 				</Accordion.Trigger>
 				<Accordion.Content>
-					<ul class="list-disc list-inside md:text-lg">
+					<ul class="list-disc list-inside">
 						{#each Object.keys(statusInfo) as key (key)}
 							<li>
 								<span class="font-semibold {statusInfo[key].color}">
@@ -156,8 +156,8 @@
 		{/each}
 	{:catch error}
 		<div class="flex flex-col items-center justify-center w-full h-full font-primary">
-			<h1 class="text-4xl font-bold text-center">Something went wrong</h1>
-			<p class="text-lg text-muted-foreground">Error message: {error.message}</p>
+			<h1 class="text-3xl font-bold text-center">Something went wrong</h1>
+			<p class="text-base text-muted-foreground">Error message: {error.message}</p>
 		</div>
 	{/await}
 </div>
diff --git a/frontend/static/fonts/Afacad-Bold.woff b/frontend/static/fonts/Afacad-Bold.woff
deleted file mode 100644
index d1230007..00000000
Binary files a/frontend/static/fonts/Afacad-Bold.woff and /dev/null differ
diff --git a/frontend/static/fonts/Afacad-Bold.woff2 b/frontend/static/fonts/Afacad-Bold.woff2
deleted file mode 100644
index e2416ee8..00000000
Binary files a/frontend/static/fonts/Afacad-Bold.woff2 and /dev/null differ
diff --git a/frontend/static/fonts/Afacad-Medium.woff b/frontend/static/fonts/Afacad-Medium.woff
deleted file mode 100644
index e05b6aaa..00000000
Binary files a/frontend/static/fonts/Afacad-Medium.woff and /dev/null differ
diff --git a/frontend/static/fonts/Afacad-Medium.woff2 b/frontend/static/fonts/Afacad-Medium.woff2
deleted file mode 100644
index 2fd178e5..00000000
Binary files a/frontend/static/fonts/Afacad-Medium.woff2 and /dev/null differ
diff --git a/frontend/static/fonts/Afacad-Regular.woff b/frontend/static/fonts/Afacad-Regular.woff
deleted file mode 100644
index 2de6d9d4..00000000
Binary files a/frontend/static/fonts/Afacad-Regular.woff and /dev/null differ
diff --git a/frontend/static/fonts/Afacad-Regular.woff2 b/frontend/static/fonts/Afacad-Regular.woff2
deleted file mode 100644
index c8f2527d..00000000
Binary files a/frontend/static/fonts/Afacad-Regular.woff2 and /dev/null differ
diff --git a/frontend/static/fonts/Afacad-SemiBold.woff b/frontend/static/fonts/Afacad-SemiBold.woff
deleted file mode 100644
index 8b094a2c..00000000
Binary files a/frontend/static/fonts/Afacad-SemiBold.woff and /dev/null differ
diff --git a/frontend/static/fonts/Afacad-SemiBold.woff2 b/frontend/static/fonts/Afacad-SemiBold.woff2
deleted file mode 100644
index c9ad2149..00000000
Binary files a/frontend/static/fonts/Afacad-SemiBold.woff2 and /dev/null differ
diff --git a/frontend/static/fonts/subset-Montserrat-Bold.woff b/frontend/static/fonts/subset-Montserrat-Bold.woff
new file mode 100644
index 00000000..ed1537f9
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Bold.woff differ
diff --git a/frontend/static/fonts/subset-Montserrat-Bold.woff2 b/frontend/static/fonts/subset-Montserrat-Bold.woff2
new file mode 100644
index 00000000..21a0c0dc
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Bold.woff2 differ
diff --git a/frontend/static/fonts/subset-Montserrat-Light.woff b/frontend/static/fonts/subset-Montserrat-Light.woff
new file mode 100644
index 00000000..7874badb
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Light.woff differ
diff --git a/frontend/static/fonts/subset-Montserrat-Light.woff2 b/frontend/static/fonts/subset-Montserrat-Light.woff2
new file mode 100644
index 00000000..6a779dad
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Light.woff2 differ
diff --git a/frontend/static/fonts/subset-Montserrat-Medium.woff b/frontend/static/fonts/subset-Montserrat-Medium.woff
new file mode 100644
index 00000000..c6515db5
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Medium.woff differ
diff --git a/frontend/static/fonts/subset-Montserrat-Medium.woff2 b/frontend/static/fonts/subset-Montserrat-Medium.woff2
new file mode 100644
index 00000000..c54fb20c
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Medium.woff2 differ
diff --git a/frontend/static/fonts/subset-Montserrat-Regular.woff b/frontend/static/fonts/subset-Montserrat-Regular.woff
new file mode 100644
index 00000000..a16cb436
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Regular.woff differ
diff --git a/frontend/static/fonts/subset-Montserrat-Regular.woff2 b/frontend/static/fonts/subset-Montserrat-Regular.woff2
new file mode 100644
index 00000000..1f2c1922
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-Regular.woff2 differ
diff --git a/frontend/static/fonts/subset-Montserrat-SemiBold.woff b/frontend/static/fonts/subset-Montserrat-SemiBold.woff
new file mode 100644
index 00000000..06875418
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-SemiBold.woff differ
diff --git a/frontend/static/fonts/subset-Montserrat-SemiBold.woff2 b/frontend/static/fonts/subset-Montserrat-SemiBold.woff2
new file mode 100644
index 00000000..b250c55a
Binary files /dev/null and b/frontend/static/fonts/subset-Montserrat-SemiBold.woff2 differ
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a7a2117e..ed1ca8f8 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -56,7 +56,7 @@ const config = {
 			},
 			fontFamily: {
 				sans: [...fontFamily.sans],
-				primary: ['Afacad', ...fontFamily.sans],
+				primary: ['Montserrat', ...fontFamily.sans],
 			}
 		}
 	},