diff --git a/src/lib/sections/settings/Conversion.svelte b/src/lib/sections/settings/Conversion.svelte
index 3a4daea..21e0b26 100644
--- a/src/lib/sections/settings/Conversion.svelte
+++ b/src/lib/sections/settings/Conversion.svelte
@@ -2,9 +2,9 @@
 	import FancyTextInput from "$lib/components/functional/FancyInput.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import { RefreshCwIcon } from "lucide-svelte";
-	import type { Settings } from "./index.svelte";
+	import type { ISettings } from "./index.svelte";
 
-	const { settings }: { settings: Settings } = $props();
+	const { settings }: { settings: ISettings } = $props();
 </script>
 
 <Panel class="flex flex-col gap-8 p-6">
@@ -38,7 +38,7 @@
 				</div>
 				<FancyTextInput
 					placeholder="VERT_%name%"
-					bind:value={settings.settings.filenameFormat}
+					bind:value={settings.filenameFormat}
 					extension=".ext"
 					type="text"
 				/>
diff --git a/src/lib/sections/settings/Vertd.svelte b/src/lib/sections/settings/Vertd.svelte
index 1c42ddc..b8da73e 100644
--- a/src/lib/sections/settings/Vertd.svelte
+++ b/src/lib/sections/settings/Vertd.svelte
@@ -2,23 +2,23 @@
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import { GITHUB_URL_VERTD } from "$lib/consts";
 	import { ServerIcon } from "lucide-svelte";
-	import type { Settings } from "./index.svelte";
+	import type { ISettings } from "./index.svelte";
 	import clsx from "clsx";
 	import Dropdown from "$lib/components/functional/Dropdown.svelte";
 
 	let vertdCommit = $state<string | null>(null);
 	let abortController: AbortController | null = null;
 
-	const { settings }: { settings: Settings } = $props();
+	const { settings }: { settings: ISettings } = $props();
 
 	$effect(() => {
-		if (settings.settings.vertdURL) {
+		if (settings.vertdURL) {
 			if (abortController) abortController.abort();
 			abortController = new AbortController();
 			const { signal } = abortController;
 
 			vertdCommit = "loading";
-			fetch(`${settings.settings.vertdURL}/api/version`, { signal })
+			fetch(`${settings.vertdURL}/api/version`, { signal })
 				.then((res) => {
 					if (!res.ok) throw new Error("bad response");
 					return res.json();
@@ -33,6 +33,10 @@
 			if (abortController) abortController.abort();
 			vertdCommit = null;
 		}
+
+		return () => {
+			if (abortController) abortController.abort();
+		};
 	});
 </script>
 
@@ -82,7 +86,7 @@
 					<input
 						type="text"
 						placeholder="Example: http://localhost:24153"
-						bind:value={settings.settings.vertdURL}
+						bind:value={settings.vertdURL}
 					/>
 				</div>
 				<div class="flex flex-col gap-4">
@@ -94,17 +98,6 @@
 							but will get the job done quicker.
 						</p>
 					</div>
-					<!-- <select
-						bind:value={settings.settings.vertdSpeed}
-						class="w-1/2 dropdown"
-					>
-						<option value="verySlow">Very Slow</option>
-						<option value="slower">Slower</option>
-						<option value="slow">Slow</option>
-						<option value="medium">Medium</option>
-						<option value="fast">Fast</option>
-						<option value="ultraFast">Ultra Fast</option>
-					</select> -->
 					<Dropdown
 						options={[
 							"Very Slow",
@@ -115,25 +108,42 @@
 							"Ultra Fast",
 						]}
 						settingsStyle
+						selected={(() => {
+							switch (settings.vertdSpeed) {
+								case "verySlow":
+									return "Very Slow";
+								case "slower":
+									return "Slower";
+								case "slow":
+									return "Slow";
+								case "medium":
+									return "Medium";
+								case "fast":
+									return "Fast";
+								case "ultraFast":
+									return "Ultra Fast";
+							}
+						})()}
 						onselect={(selected) => {
+							console.log(selected);
 							switch (selected) {
 								case "Very Slow":
-									settings.settings.vertdSpeed = "verySlow";
+									settings.vertdSpeed = "verySlow";
 									break;
 								case "Slower":
-									settings.settings.vertdSpeed = "slower";
+									settings.vertdSpeed = "slower";
 									break;
 								case "Slow":
-									settings.settings.vertdSpeed = "slow";
+									settings.vertdSpeed = "slow";
 									break;
 								case "Medium":
-									settings.settings.vertdSpeed = "medium";
+									settings.vertdSpeed = "medium";
 									break;
 								case "Fast":
-									settings.settings.vertdSpeed = "fast";
+									settings.vertdSpeed = "fast";
 									break;
 								case "Ultra Fast":
-									settings.settings.vertdSpeed = "ultraFast";
+									settings.vertdSpeed = "ultraFast";
 									break;
 							}
 						}}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 7bbbc43..6419056 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -6,6 +6,8 @@
 	import { SettingsIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 
+	let settings = $state(Settings.Settings.instance.settings);
+
 	let isInitial = $state(true);
 
 	$effect(() => {
@@ -14,18 +16,17 @@
 			isInitial = false;
 			return;
 		}
+		settings;
 		const savedSettings = localStorage.getItem("settings");
 		if (savedSettings) {
 			const parsedSettings = JSON.parse(savedSettings);
-			if (parsedSettings === Settings.Settings.instance.settings) return;
+			if (parsedSettings === settings) return;
 		}
 
 		log(["settings"], "saving settings");
 		try {
-			localStorage.setItem(
-				"settings",
-				JSON.stringify(Settings.Settings.instance.settings),
-			);
+			Settings.Settings.instance.settings = settings;
+			Settings.Settings.instance.save();
 		} catch (error) {
 			log(["settings", "error"], `failed to save settings: ${error}`);
 			addToast("error", "Failed to save settings!");
@@ -54,8 +55,8 @@
 		class="w-full max-w-[1280px] flex flex-col md:flex-row gap-4 p-4 md:px-4 md:py-0"
 	>
 		<div class="flex flex-col gap-4 flex-1">
-			<Settings.Conversion settings={Settings.Settings.instance} />
-			<Settings.Vertd settings={Settings.Settings.instance} />
+			<Settings.Conversion {settings} />
+			<Settings.Vertd {settings} />
 		</div>
 
 		<div class="flex flex-col gap-4 flex-1">