diff --git a/src/lib/components/lightswitch.svelte b/src/lib/components/lightswitch.svelte
index c99ea1e..279a4e2 100644
--- a/src/lib/components/lightswitch.svelte
+++ b/src/lib/components/lightswitch.svelte
@@ -44,9 +44,9 @@
 	};
 
 	// State
-	let trackBg = $derived(!gmState.dark ? bgLight : bgDark);
-	let thumbBg = $derived(!gmState.dark ? bgDark : bgLight);
-	let thumbPosition = $derived(!gmState.dark ? 'translate-x-[100%]' : '');
+	let trackBg = $derived(!gmState.value.dark ? bgLight : bgDark);
+	let thumbBg = $derived(!gmState.value.dark ? bgDark : bgLight);
+	let thumbPosition = $derived(!gmState.value.dark ? 'translate-x-[100%]' : '');
 	// Reactive
 	let classesTrack = $derived(
 		`cursor-pointer ${cTransition} ${width} ${height} ${ring} ${rounded} ${trackBg} ${className ?? ''}`
@@ -55,16 +55,16 @@
 		`aspect-square scale-[0.8] flex justify-center items-center ${cTransition} ${height} ${rounded} ${thumbBg} ${thumbPosition}`
 	);
 	let classesIcon = $derived(
-		`w-[70%] aspect-square ${!gmState.dark ? fillLight : fillDark}`
+		`w-[70%] aspect-square ${!gmState.value.dark ? fillLight : fillDark}`
 	);
 </script>
 
 <button
 	class="lightswitch-track {classesTrack}"
-	onclick={() => (gmState.dark = !gmState.dark)}
+	onclick={() => (gmState.value.dark = !gmState.value.dark)}
 	role="switch"
 	aria-label="Light Switch"
-	aria-checked={!gmState.dark}
+	aria-checked={!gmState.value.dark}
 	{title}
 	tabindex="0"
 >
@@ -74,7 +74,7 @@
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 512 512"
 		>
-			<path d={!gmState.dark ? svgPath.sun : svgPath.moon} />
+			<path d={!gmState.value.dark ? svgPath.sun : svgPath.moon} />
 		</svg>
 	</div>
 </button>
diff --git a/src/lib/gql/graphqlClient.ts b/src/lib/gql/graphqlClient.ts
index 687b084..be0bc17 100644
--- a/src/lib/gql/graphqlClient.ts
+++ b/src/lib/gql/graphqlClient.ts
@@ -751,11 +751,11 @@ function fetchExtensionsUpdater(
 ) {
 	if (!data?.fetchExtensions) return;
 	let filteredExtensions = data.fetchExtensions.extensions;
-	if (!gmState.nsfw)
+	if (!gmState.value.nsfw)
 		filteredExtensions = filteredExtensions.filter((e) => !e.isNsfw);
 	filteredExtensions.forEach((e) => {
 		cache.writeFragment(ExtensionTypeFragment, e, {
-			isNsfw: gmState.nsfw ? null : false
+			isNsfw: gmState.value.nsfw ? null : false
 		});
 	});
 	lastFetched.set(new Date());
@@ -874,7 +874,7 @@ function updateExtentionsList<T extends { pkgName: string }>(
 	cache.updateQuery(
 		{
 			query: getExtensions,
-			variables: { isNsfw: gmState.nsfw ? null : false }
+			variables: { isNsfw: gmState.value.nsfw ? null : false }
 		},
 		(extensionsData) => {
 			if (!extensionsData) return extensionsData;
@@ -900,7 +900,7 @@ function updateSourcesList<T extends { pkgName: string }>(
 	cache.updateQuery(
 		{
 			query: getSources,
-			variables: { isNsfw: gmState.nsfw ? null : false }
+			variables: { isNsfw: gmState.value.nsfw ? null : false }
 		},
 		(sourcesData) => {
 			if (!sourcesData) return sourcesData;
diff --git a/src/lib/simpleStores.svelte.ts b/src/lib/simpleStores.svelte.ts
index eb65225..003484e 100644
--- a/src/lib/simpleStores.svelte.ts
+++ b/src/lib/simpleStores.svelte.ts
@@ -13,7 +13,7 @@ import {
 	type OperationResultStore
 } from '@urql/svelte';
 import type { ResultOf, VariablesOf } from '$lib/gql/graphql';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 import type { ToastStore } from './components/Toast/types';
 import {
 	deleteGlobalMeta,
@@ -26,6 +26,7 @@ import { client } from './gql/graphqlClient';
 import type { presetConst } from './presets';
 import type { TriState } from './util.svelte';
 import { browser } from '$app/environment';
+import { untrack } from 'svelte';
 
 // function getObjectEntries<T extends object>(obj: T): [keyof T, T[keyof T]][] {
 // 	return Object.entries(obj) as [keyof T, T[keyof T]][];
@@ -116,12 +117,6 @@ const trueDefaults = {
 	mangaMetaDefaults,
 	downloadsBadge: true,
 	unreadBadge: true,
-	mangaUpdatesTracking: {
-		enabled: false,
-		username: '',
-		password: '',
-		Authorization: ''
-	},
 	libraryCategoryTotalCounts: false,
 	DownloadAllChaptersOnAddToLibrary: false,
 	DeleteAllChaptersOnRemoveFromLibrary: false,
@@ -139,15 +134,20 @@ class LocalStore<T> {
 		this.key = key;
 		if (browser) {
 			const item = localStorage.getItem(this.key);
-			if (item) this.val = this.#deserialize(item);
+			if (item) this.val = this.deserialize(item);
 		}
+		$effect.root(() => {
+			$effect(() => {
+				localStorage.setItem(key, this.serialize(this.value));
+			});
+		});
 	}
 
-	#serialize(value: T): string {
+	private serialize(value: T): string {
 		return JSON.stringify(value);
 	}
 
-	#deserialize(item: string): T {
+	private deserialize(item: string): T {
 		return JSON.parse(item);
 	}
 
@@ -157,7 +157,7 @@ class LocalStore<T> {
 
 	set value(value: T) {
 		this.val = value;
-		localStorage.setItem(this.key, this.#serialize(value));
+		localStorage.setItem(this.key, this.serialize(value));
 	}
 }
 
@@ -165,10 +165,10 @@ function localStore<T>(key: string, value: T) {
 	return new LocalStore(key, value);
 }
 
-function GMState() {
-	const store = localStore<typeof trueDefaults>('GlobalMeta', trueDefaults);
-	let runningMutations = false;
-	const mutations: Map<
+class GMState {
+	private store = localStore<typeof trueDefaults>('GlobalMeta', trueDefaults);
+	private runningMutations = false;
+	private mutations: Map<
 		string,
 		OperationResultSource<
 			| OperationResult<
@@ -181,31 +181,69 @@ function GMState() {
 			  >
 		>
 	> = new Map();
-	let unSub = () => {};
-	const Meta = queryStore({
-		client,
-		query: metas
-	});
-
-	async function startRunMutations() {
-		if (runningMutations) return;
-		runningMutations = true;
+	private unSub = () => {};
+	constructor() {
+		$effect.root(() => {
+			const Meta = queryStore({
+				client,
+				query: metas
+			});
+
+			this.unSub = Meta.subscribe((queryResult) => {
+				this.store.value = this.extractGlobalMeta(queryResult);
+				if (queryResult.fetching) return;
+				this.unSub();
+			});
+			$effect(() => {
+				for (const key of getObjectKeys(trueDefaults)) {
+					const stringValue = JSON.stringify(this.store.value[key]);
+					const metaKey = metaKeyBase + key;
+					const existingValue = get(Meta).data?.metas?.nodes.find(
+						(e) => e.key === metaKey
+					)?.value;
+
+					if (stringValue !== existingValue) {
+						const variables = { key: metaKey, value: stringValue };
+						if (stringValue !== JSON.stringify(trueDefaults[key])) {
+							this.mutations.set(
+								key,
+								client.mutation(setGlobalMeta, variables)
+							);
+							continue;
+						}
+						if (existingValue !== undefined) {
+							this.mutations.set(
+								key,
+								client.mutation(deleteGlobalMeta, variables)
+							);
+							continue;
+						}
+					}
+				}
+				this.startRunMutations();
+			});
+		});
+	}
+
+	private async startRunMutations() {
+		if (this.runningMutations) return;
+		this.runningMutations = true;
 		let prom: Promise<unknown> | undefined = undefined;
-		while (mutations.size > 0) {
-			const key = Array.from(mutations.keys())[0];
-			const mutation = mutations.get(key);
-			mutations.delete(key);
+		while (this.mutations.size > 0) {
+			const key = Array.from(this.mutations.keys())[0];
+			const mutation = this.mutations.get(key);
+			this.mutations.delete(key);
 			prom = mutation?.toPromise();
 			await prom;
 		}
 		await prom;
-		runningMutations = false;
+		this.runningMutations = false;
 	}
 
-	function extractGlobalMeta(
+	private extractGlobalMeta(
 		queryResult: OperationResultState<ResultOf<typeof metas>>
 	): typeof trueDefaults {
-		const globalMetaCopy = $state.snapshot(store.value);
+		const globalMetaCopy = $state.snapshot(this.store.value);
 		const metas = queryResult.data?.metas?.nodes || [];
 		getObjectKeys(trueDefaults).forEach(
 			<T extends keyof typeof trueDefaults>(key: T) => {
@@ -223,57 +261,42 @@ function GMState() {
 		);
 		return globalMetaCopy;
 	}
-	unSub = Meta.subscribe((queryResult) => {
-		store.value = extractGlobalMeta(queryResult);
-		if (queryResult.fetching) return;
-		unSub();
-	});
-
-	const ret = {} as typeof trueDefaults;
-
-	getObjectKeys(trueDefaults).forEach((key) => {
-		Object.defineProperty(ret, key, {
-			get: function () {
-				if (store.value[key] === undefined) {
-					(store.value[key] as unknown) = trueDefaults[key];
-				}
-				return store.value[key];
-			},
-			set: function (value: (typeof trueDefaults)[typeof key]) {
-				(store.value[key] as unknown) = value;
-				const stringValue = JSON.stringify(value);
-				if (stringValue !== JSON.stringify(trueDefaults[key])) {
-					mutations.set(
-						key,
-						client.mutation(setGlobalMeta, {
-							key: metaKeyBase + key,
-							value: stringValue
-						})
-					);
-					startRunMutations();
-					return;
-				}
-				mutations.set(
-					key,
-					client.mutation(deleteGlobalMeta, { key: metaKeyBase + key })
-				);
-				startRunMutations();
+
+	private isRecord(obj: unknown): obj is Record<string, unknown> {
+		return obj === Object(obj);
+	}
+
+	private traverse<T extends Record<string, unknown>>(value: T, defaults: T) {
+		getObjectKeys(value).forEach((key) => {
+			if (value[key] === undefined) {
+				value[key] = defaults[key];
 			}
+			if (this.isRecord(value[key]) && this.isRecord(defaults[key]))
+				this.traverse(value[key], defaults[key]);
 		});
-	});
+	}
 
-	return ret;
-}
+	get value() {
+		this.traverse(this.store.value, trueDefaults);
+		return this.store.value;
+	}
 
-export const gmState = GMState();
+	set value(val: typeof trueDefaults) {
+		this.store.value = val;
+	}
+}
 
-function MMState() {
-	let _id: number = -1;
-	let store = $state<typeof mangaMetaDefaults>(gmState.mangaMetaDefaults);
-	let unSub = () => {};
-	let MMeta: OperationResultStore<ResultOf<typeof getManga>> | null = null;
-	let isRunningMutations = false;
-	const mutations: Map<
+export const gmState = new GMState();
+
+class MMState {
+	private _id: number = -1;
+	private store = $state<typeof mangaMetaDefaults>(
+		gmState.value.mangaMetaDefaults
+	);
+	private unSub = () => {};
+	private MMeta: OperationResultStore<ResultOf<typeof getManga>> | null = null;
+	private isRunningMutations = false;
+	private mutations: Map<
 		string,
 		OperationResultSource<
 			| OperationResult<
@@ -286,27 +309,114 @@ function MMState() {
 			  >
 		>
 	> = new Map();
-	async function runPendingMutations() {
-		if (isRunningMutations) return;
-		isRunningMutations = true;
+
+	constructor() {
+		$effect.root(() => {
+			$effect(() => {
+				for (const key of getObjectKeys(
+					untrack(() => {
+						return $state.snapshot(gmState.value.mangaMetaDefaults);
+					})
+				)) {
+					const serializedValue = JSON.stringify(this.store[key]);
+					const metaKey = metaKeyBase + key;
+					const storedValue = untrack(() => {
+						if (!this.MMeta) return;
+						return get(this.MMeta).data?.manga?.meta.find(
+							(e) => e.key === metaKey
+						)?.value;
+					});
+					if (serializedValue !== storedValue) {
+						const mutationVariables = {
+							key: metaKey,
+							value: serializedValue,
+							id: this._id
+						};
+						untrack(() => {
+							if (
+								serializedValue !==
+								JSON.stringify(gmState.value.mangaMetaDefaults[key])
+							) {
+								this.mutations.set(
+									key + this.id,
+									client.mutation(setMangaMeta, mutationVariables)
+								);
+								return;
+							}
+							if (storedValue !== undefined) {
+								this.mutations.set(
+									key + this.id,
+									client.mutation(deleteMangaMeta, mutationVariables)
+								);
+								return;
+							}
+						});
+					}
+				}
+				this.runPendingMutations();
+			});
+		});
+	}
+
+	private isRecord(obj: unknown): obj is Record<string, unknown> {
+		return obj === Object(obj);
+	}
+
+	private traverse<T extends Record<string, unknown>>(value: T, defaults: T) {
+		getObjectKeys(value).forEach((key) => {
+			if (value[key] === undefined) {
+				value[key] = defaults[key];
+			}
+			if (this.isRecord(value[key]) && this.isRecord(defaults[key]))
+				this.traverse(value[key], defaults[key]);
+		});
+	}
+
+	get value() {
+		this.traverse(this.store, gmState.value.mangaMetaDefaults);
+		return this.store;
+	}
+
+	set value(val: typeof mangaMetaDefaults) {
+		this.store = val;
+	}
+
+	set id(val: number) {
+		this._id = val;
+		this.unSub();
+		this.MMeta = queryStore({
+			client,
+			query: getManga,
+			variables: { id: val }
+		});
+		this.unSub = this.MMeta.subscribe((queryResult) => {
+			this.store = this.extractMangaMeta(queryResult);
+			if (queryResult.fetching) return;
+			this.unSub();
+		});
+	}
+
+	private async runPendingMutations() {
+		if (this.isRunningMutations) return;
+		this.isRunningMutations = true;
 		let prom: Promise<unknown> | undefined = undefined;
-		while (mutations.size > 0) {
-			const key = Array.from(mutations.keys())[0];
-			const mutation = mutations.get(key);
-			mutations.delete(key);
+		while (this.mutations.size > 0) {
+			const key = Array.from(this.mutations.keys())[0];
+			const mutation = this.mutations.get(key);
+			this.mutations.delete(key);
 			prom = mutation?.toPromise();
 			await prom;
 		}
 		await prom;
-		isRunningMutations = false;
+		this.isRunningMutations = false;
 	}
 
-	function extractMangaMeta(
+	private extractMangaMeta(
 		queryResult: OperationResultState<ResultOf<typeof getManga>>
 	): typeof mangaMetaDefaults {
-		const clonedStore = $state.snapshot(store);
+		const clonedStore = $state.snapshot(this.store);
 		const metas = queryResult.data?.manga.meta || [];
-		const Defaults = $state.snapshot(gmState.mangaMetaDefaults);
+		const Defaults = $state.snapshot(gmState.value.mangaMetaDefaults);
 		getObjectKeys(Defaults).forEach(
 			<T extends keyof typeof mangaMetaDefaults>(key: T) => {
 				const matchedMeta = metas.find(
@@ -323,65 +433,6 @@ function MMState() {
 		);
 		return clonedStore;
 	}
-
-	const ret = {
-		set id(val: number) {
-			_id = val;
-			unSub();
-			MMeta = queryStore({
-				client,
-				query: getManga,
-				variables: { id: val }
-			});
-			unSub = MMeta.subscribe((queryResult) => {
-				store = extractMangaMeta(queryResult);
-				if (queryResult.fetching) return;
-				unSub();
-			});
-		},
-		get id() {
-			return _id;
-		}
-	} as typeof mangaMetaDefaults & { id: number };
-
-	getObjectKeys(mangaMetaDefaults).forEach((key) => {
-		Object.defineProperty(ret, key, {
-			get: function () {
-				if (store[key] === undefined) {
-					(store[key] as unknown) = gmState.mangaMetaDefaults[key];
-				}
-				return store[key];
-			},
-			set: function (value: (typeof mangaMetaDefaults)[typeof key]) {
-				(store[key] as unknown) = value;
-				const serializedValue = JSON.stringify(value);
-				if (
-					serializedValue !== JSON.stringify(gmState.mangaMetaDefaults[key])
-				) {
-					mutations.set(
-						key + _id,
-						client.mutation(setMangaMeta, {
-							key: metaKeyBase + key,
-							value: serializedValue,
-							id: _id
-						})
-					);
-					runPendingMutations();
-					return;
-				}
-				mutations.set(
-					key + _id,
-					client.mutation(deleteMangaMeta, {
-						key: metaKeyBase + key,
-						id: _id
-					})
-				);
-				runPendingMutations();
-			}
-		});
-	});
-
-	return ret;
 }
 
-export const mmState = MMState();
+export const mmState = new MMState();
diff --git a/src/routes/(app)/(library)/+page.svelte b/src/routes/(app)/(library)/+page.svelte
index 1e37dca..4ef0e63 100644
--- a/src/routes/(app)/(library)/+page.svelte
+++ b/src/routes/(app)/(library)/+page.svelte
@@ -249,7 +249,7 @@
 	let filteredMangas = $derived(
 		mangas.value.data?.category?.mangas.nodes.filter((ele) => {
 			if (!ele.inLibrary) return false;
-			if (gmState.ignoreFiltersWhenSearching) {
+			if (gmState.value.ignoreFiltersWhenSearching) {
 				if (
 					parsedQuery !== null &&
 					specificSearch(ele, parsedQuery).findIndex((e) => e === false) === -1
@@ -258,15 +258,17 @@
 				}
 			}
 
-			if (gmState.Downloaded === 1 && ele.downloadCount === 0) return false;
-			if (gmState.Downloaded === 2 && ele.downloadCount !== 0) return false;
+			if (gmState.value.Downloaded === 1 && ele.downloadCount === 0)
+				return false;
+			if (gmState.value.Downloaded === 2 && ele.downloadCount !== 0)
+				return false;
 
-			if (gmState.Unread === 1 && ele.unreadCount === 0) return false;
-			if (gmState.Unread === 2 && ele.unreadCount !== 0) return false;
+			if (gmState.value.Unread === 1 && ele.unreadCount === 0) return false;
+			if (gmState.value.Unread === 2 && ele.unreadCount !== 0) return false;
 
-			if (gmState.Tracked === 1 && ele.trackRecords.nodes.length === 0)
+			if (gmState.value.Tracked === 1 && ele.trackRecords.nodes.length === 0)
 				return false;
-			if (gmState.Tracked === 2 && ele.trackRecords.nodes.length !== 0)
+			if (gmState.value.Tracked === 2 && ele.trackRecords.nodes.length !== 0)
 				return false;
 
 			if (
@@ -295,11 +297,11 @@
 	});
 	let sortedMangas = $derived(
 		filteredMangas
-			? gmState.Sort === sort.Random
+			? gmState.value.Sort === sort.Random
 				? shuffle([...filteredMangas])
 				: [...filteredMangas].sort((a, b) => {
 						let tru = true;
-						switch (gmState.Sort) {
+						switch (gmState.value.Sort) {
 							case sort.ID:
 								tru = a.id > b.id;
 								break;
@@ -326,7 +328,7 @@
 								break;
 						}
 
-						if (gmState.Asc) tru = !tru;
+						if (gmState.value.Asc) tru = !tru;
 						return tru ? -1 : 1;
 					})
 			: undefined
@@ -344,10 +346,10 @@
 			<div class="aspect-cover w-full">
 				<div
 					class="placeholder h-full animate-pulse
-			{gmState.Display === display.Compact && 'rounded-lg'}
-			{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+			{gmState.value.Display === display.Compact && 'rounded-lg'}
+			{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 				></div>
-				{#if gmState.Display === display.Comfortable}
+				{#if gmState.value.Display === display.Comfortable}
 					<div
 						class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 					></div>
@@ -366,7 +368,7 @@
 				<Tab bind:group={$tab} name={cat.name} value={cat.id}>
 					{#snippet lead()}
 						{cat.name}
-						{#if gmState.libraryCategoryTotalCounts}
+						{#if gmState.value.libraryCategoryTotalCounts}
 							<span
 								class="variant-filled-surface m-0 rounded-full px-1 text-sm"
 							>
@@ -384,10 +386,10 @@
 						<div class="aspect-cover w-full">
 							<div
 								class="placeholder h-full animate-pulse
-									{gmState.Display === display.Compact && 'rounded-lg'}
-									{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+									{gmState.value.Display === display.Compact && 'rounded-lg'}
+									{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 							></div>
-							{#if gmState.Display === display.Comfortable}
+							{#if gmState.value.Display === display.Comfortable}
 								<div
 									class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 								></div>
@@ -437,14 +439,15 @@
 												thumbnailUrl={manga.thumbnailUrl ?? ''}
 												title={manga.title}
 												class="select-none {$selectMode && 'opacity-80'}"
-												rounded="{gmState.Display === display.Compact &&
+												rounded="{gmState.value.Display === display.Compact &&
 													'rounded-lg'}
-												{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+												{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 											>
 												<div class="absolute left-2 top-2 flex">
-													{#if manga.downloadCount && gmState.downloadsBadge}
+													{#if manga.downloadCount && gmState.value.downloadsBadge}
 														<div
-															class="{manga.unreadCount && gmState.unreadBadge
+															class="{manga.unreadCount &&
+															gmState.value.unreadBadge
 																? 'rounded-l'
 																: 'rounded'}
 															variant-filled-primary m-0 px-1 py-0.5"
@@ -452,10 +455,10 @@
 															{manga.downloadCount}
 														</div>
 													{/if}
-													{#if manga.unreadCount && gmState.unreadBadge}
+													{#if manga.unreadCount && gmState.value.unreadBadge}
 														<div
 															class="{manga.downloadCount &&
-															gmState.downloadsBadge
+															gmState.value.downloadsBadge
 																? 'rounded-r'
 																: 'rounded'}
 															variant-filled-secondary m-0 px-1 py-0.5"
@@ -476,7 +479,7 @@
 														/>
 													</div>
 												{/if}
-												{#if gmState.Display === display.Compact}
+												{#if gmState.value.Display === display.Compact}
 													<div
 														class="variant-glass absolute bottom-0 left-0 right-0 rounded-b-olg"
 													>
@@ -489,7 +492,7 @@
 													</div>
 												{/if}
 											</MangaCard>
-											{#if gmState.Display === display.Comfortable}
+											{#if gmState.value.Display === display.Comfortable}
 												<div class="variant-glass-surface rounded-b-lg">
 													<div
 														class="line-clamp-2 h-12 px-2 text-center"
@@ -502,7 +505,7 @@
 										</a>
 									{/if}
 								</div>
-								{#if !intersecting && gmState.Display === display.Comfortable}
+								{#if !intersecting && gmState.value.Display === display.Comfortable}
 									<div class="h-12"></div>
 								{/if}
 							{/snippet}
diff --git a/src/routes/(app)/(library)/+page.ts b/src/routes/(app)/(library)/+page.ts
new file mode 100644
index 0000000..83c46d0
--- /dev/null
+++ b/src/routes/(app)/(library)/+page.ts
@@ -0,0 +1,27 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { browser } from '$app/environment';
+import { getCategories, getCategory } from '$lib/gql/Queries';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ fetch, url }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getCategories,
+					{},
+					{
+						fetch
+					}
+				)
+				.toPromise();
+			const tab = parseInt(url.searchParams.get('tab') ?? '0');
+			mod.client.query(getCategory, { id: tab }, { fetch }).toPromise();
+		})();
+};
diff --git a/src/routes/(app)/(library)/LibraryFilterModal.svelte b/src/routes/(app)/(library)/LibraryFilterModal.svelte
index 8411224..dc0be0f 100644
--- a/src/routes/(app)/(library)/LibraryFilterModal.svelte
+++ b/src/routes/(app)/(library)/LibraryFilterModal.svelte
@@ -79,7 +79,7 @@
 				<div class="mx-4 mb-4">
 					{#if $tabSet === 0}
 						<TriStateSlide
-							bind:state={gmState.Unread}
+							bind:state={gmState.value.Unread}
 							label={'Unread'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -87,7 +87,7 @@
 							<span>Unread</span>
 						</TriStateSlide>
 						<TriStateSlide
-							bind:state={gmState.Downloaded}
+							bind:state={gmState.value.Downloaded}
 							label={'Downloaded'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -95,7 +95,7 @@
 							<span>Downloaded</span>
 						</TriStateSlide>
 						<TriStateSlide
-							bind:state={gmState.Tracked}
+							bind:state={gmState.value.Tracked}
 							label={'Tracked'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -105,7 +105,7 @@
 					{:else if $tabSet === 1}
 						<TriStateSlide
 							triState={false}
-							bind:checked={gmState.Asc}
+							bind:checked={gmState.value.Asc}
 							label={'Ascending'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -122,7 +122,7 @@
 						>
 							{#each enumKeys(sort) as value}
 								<RadioItem
-									bind:group={gmState.Sort}
+									bind:group={gmState.value.Sort}
 									class="focus:outline-0"
 									name="justify"
 									{value}
@@ -133,18 +133,18 @@
 						</RadioGroup>
 					{:else if $tabSet === 2}
 						<Slide
-							bind:checked={gmState.libraryCategoryTotalCounts}
+							bind:checked={gmState.value.libraryCategoryTotalCounts}
 							class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface"
 						>
 							Category Total Counts
 						</Slide>
 						<Slide
-							bind:checked={gmState.downloadsBadge}
+							bind:checked={gmState.value.downloadsBadge}
 							class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface"
 							>Downloads Badge</Slide
 						>
 						<Slide
-							bind:checked={gmState.unreadBadge}
+							bind:checked={gmState.value.unreadBadge}
 							class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface"
 							>Unread Badge</Slide
 						>
@@ -158,7 +158,7 @@
 						>
 							{#each enumKeys(display) as value}
 								<RadioItem
-									bind:group={gmState.Display}
+									bind:group={gmState.value.Display}
 									class="focus:outline-0"
 									name="justify"
 									{value}
diff --git a/src/routes/(app)/browse/HorisontalmangaElement.svelte b/src/routes/(app)/browse/HorisontalmangaElement.svelte
index 6019067..ffbb95c 100644
--- a/src/routes/(app)/browse/HorisontalmangaElement.svelte
+++ b/src/routes/(app)/browse/HorisontalmangaElement.svelte
@@ -58,12 +58,13 @@
 								<MangaCard
 									thumbnailUrl={manga.thumbnailUrl ?? ''}
 									title={manga.title}
-									rounded="{gmState.Display === display.Compact && 'rounded-lg'}
-	                  {gmState.Display === display.Comfortable &&
+									rounded="{gmState.value.Display === display.Compact &&
+										'rounded-lg'}
+	                  {gmState.value.Display === display.Comfortable &&
 										'rounded-none rounded-t-lg'}"
 									aspect="aspect-cover"
 								>
-									{#if gmState.Display === display.Compact}
+									{#if gmState.value.Display === display.Compact}
 										<div
 											class="variant-glass absolute bottom-0 left-0 right-0 rounded-b-olg"
 										>
@@ -84,7 +85,7 @@
 									{/if}
 								</MangaCard>
 							</div>
-							{#if gmState.Display === display.Comfortable}
+							{#if gmState.value.Display === display.Comfortable}
 								<div class="variant-glass-surface rounded-b-lg">
 									<div
 										class="line-clamp-2 h-12 px-2 text-center"
@@ -97,7 +98,7 @@
 						</a>
 					{:else}
 						<div class="aspect-cover w-full"></div>
-						{#if gmState.Display === display.Comfortable}
+						{#if gmState.value.Display === display.Comfortable}
 							<div class="h-12"></div>
 						{/if}
 					{/if}
diff --git a/src/routes/(app)/browse/extensions/+page.svelte b/src/routes/(app)/browse/extensions/+page.svelte
index ff0c223..b858655 100644
--- a/src/routes/(app)/browse/extensions/+page.svelte
+++ b/src/routes/(app)/browse/extensions/+page.svelte
@@ -54,7 +54,7 @@
 		extensions = queryState({
 			client,
 			query: getExtensions,
-			variables: { isNsfw: gmState.nsfw ? null : false }
+			variables: { isNsfw: gmState.value.nsfw ? null : false }
 		});
 	}
 
diff --git a/src/routes/(app)/browse/extensions/+page.ts b/src/routes/(app)/browse/extensions/+page.ts
new file mode 100644
index 0000000..54bcc9d
--- /dev/null
+++ b/src/routes/(app)/browse/extensions/+page.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { browser } from '$app/environment';
+import { getExtensions } from '$lib/gql/Queries';
+import { gmState } from '$lib/simpleStores.svelte';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getExtensions,
+					{ isNsfw: gmState.value.nsfw ? null : false },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+};
diff --git a/src/routes/(app)/browse/globalSearch.svelte b/src/routes/(app)/browse/globalSearch.svelte
index d439a8f..8cdf279 100644
--- a/src/routes/(app)/browse/globalSearch.svelte
+++ b/src/routes/(app)/browse/globalSearch.svelte
@@ -48,7 +48,7 @@
 
 	const client = getContextClient();
 	client
-		.query(getSources, { isNsfw: gmState.nsfw ? null : false })
+		.query(getSources, { isNsfw: gmState.value.nsfw ? null : false })
 		.toPromise()
 		.then((ee) => {
 			rawSources.update((e) => {
@@ -214,12 +214,13 @@
 										<div class="aspect-cover h-full w-auto">
 											<div
 												class="placeholder h-full w-full animate-pulse
-	                        {gmState.Display === display.Compact && 'rounded-lg'}
-	                        {gmState.Display === display.Comfortable &&
+	                        {gmState.value.Display === display.Compact &&
+													'rounded-lg'}
+	                        {gmState.value.Display === display.Comfortable &&
 													'rounded-none rounded-t-lg'}"
 											></div>
 										</div>
-										{#if gmState.Display === display.Comfortable}
+										{#if gmState.value.Display === display.Comfortable}
 											<div
 												class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 											></div>
diff --git a/src/routes/(app)/browse/globalsearch/+page.ts b/src/routes/(app)/browse/globalsearch/+page.ts
new file mode 100644
index 0000000..3238d4e
--- /dev/null
+++ b/src/routes/(app)/browse/globalsearch/+page.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { browser } from '$app/environment';
+import { getSources } from '$lib/gql/Queries';
+import { gmState } from '$lib/simpleStores.svelte';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getSources,
+					{ isNsfw: gmState.value.nsfw ? null : false },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+};
diff --git a/src/routes/(app)/browse/migrate/+page.ts b/src/routes/(app)/browse/migrate/+page.ts
new file mode 100644
index 0000000..1c8a7af
--- /dev/null
+++ b/src/routes/(app)/browse/migrate/+page.ts
@@ -0,0 +1,25 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+import { browser } from '$app/environment';
+import { sourcesMigration } from '$lib/gql/Queries';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ params, fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					sourcesMigration,
+					{},
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+	return params;
+};
diff --git a/src/routes/(app)/browse/migrate/manga/[MangaID]/+page.ts b/src/routes/(app)/browse/migrate/manga/[MangaID]/+page.ts
index 825fa8a..93b6e35 100644
--- a/src/routes/(app)/browse/migrate/manga/[MangaID]/+page.ts
+++ b/src/routes/(app)/browse/migrate/manga/[MangaID]/+page.ts
@@ -6,12 +6,37 @@
 
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { getManga, getSources } from '$lib/gql/Queries';
+import { gmState } from '$lib/simpleStores.svelte';
 
-export const load: PageLoad = ({ params }) => {
+export const load: PageLoad = ({ params, fetch }) => {
 	const MangaID = parseInt(params.MangaID);
 	if (isNaN(MangaID)) {
 		error(400, 'MangaID should be a number');
 	}
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getManga,
+					{ id: MangaID },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+			mod.client
+				.query(
+					getSources,
+					{ isNsfw: gmState.value.nsfw ? null : false },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
 	return {
 		MangaID
 	};
diff --git a/src/routes/(app)/browse/migrate/source/[SourceID]/+page.svelte b/src/routes/(app)/browse/migrate/source/[SourceID]/+page.svelte
index eec41af..402063a 100644
--- a/src/routes/(app)/browse/migrate/source/[SourceID]/+page.svelte
+++ b/src/routes/(app)/browse/migrate/source/[SourceID]/+page.svelte
@@ -51,10 +51,10 @@
 			<div class="aspect-cover w-full">
 				<div
 					class="placeholder h-full animate-pulse
-						{gmState.Display === display.Compact && 'rounded-lg'}
-						{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+						{gmState.value.Display === display.Compact && 'rounded-lg'}
+						{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 				></div>
-				{#if gmState.Display === display.Comfortable}
+				{#if gmState.value.Display === display.Comfortable}
 					<div
 						class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 					></div>
@@ -85,10 +85,11 @@
 								<MangaCard
 									thumbnailUrl={manga.thumbnailUrl ?? ''}
 									title={manga.title}
-									rounded="{gmState.Display === display.Compact && 'rounded-lg'}
-										{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+									rounded="{gmState.value.Display === display.Compact &&
+										'rounded-lg'}
+										{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 								>
-									{#if gmState.Display === display.Compact}
+									{#if gmState.value.Display === display.Compact}
 										<div
 											class="variant-glass absolute bottom-0 left-0 right-0 rounded-b-olg"
 										>
@@ -101,7 +102,7 @@
 										</div>
 									{/if}
 								</MangaCard>
-								{#if gmState.Display === display.Comfortable}
+								{#if gmState.value.Display === display.Comfortable}
 									<div class="variant-glass-surface rounded-b-lg">
 										<div
 											class="line-clamp-2 h-12 px-2 text-center"
@@ -114,7 +115,7 @@
 							</a>
 						{/if}
 					</div>
-					{#if !intersecting && gmState.Display === display.Comfortable}
+					{#if !intersecting && gmState.value.Display === display.Comfortable}
 						<div class="h-12"></div>
 					{/if}
 				{/snippet}
diff --git a/src/routes/(app)/browse/migrate/source/[SourceID]/+page.ts b/src/routes/(app)/browse/migrate/source/[SourceID]/+page.ts
index 5027a95..0bfea21 100644
--- a/src/routes/(app)/browse/migrate/source/[SourceID]/+page.ts
+++ b/src/routes/(app)/browse/migrate/source/[SourceID]/+page.ts
@@ -4,8 +4,32 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+import { browser } from '$app/environment';
+import { sourceMigrationManga, sourceMigrationSource } from '$lib/gql/Queries';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = ({ params }) => {
+export const load: PageLoad = ({ params, fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					sourceMigrationManga,
+					{ sourceId: params.SourceID },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+			mod.client
+				.query(
+					sourceMigrationSource,
+					{ sourceId: params.SourceID },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
 	return params;
 };
diff --git a/src/routes/(app)/browse/source/[sourceID]/+layout.ts b/src/routes/(app)/browse/source/[sourceID]/+layout.ts
index b0c49be..8c51cf3 100644
--- a/src/routes/(app)/browse/source/[sourceID]/+layout.ts
+++ b/src/routes/(app)/browse/source/[sourceID]/+layout.ts
@@ -5,7 +5,22 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 import type { LayoutLoad } from './$types';
+import { browser } from '$app/environment';
+import { getSource } from '$lib/gql/Queries';
 
-export const load: LayoutLoad = ({ params }) => {
+export const load: LayoutLoad = ({ params, fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getSource,
+					{ id: params.sourceID },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
 	return { ...params };
 };
diff --git a/src/routes/(app)/browse/source/[sourceID]/Grid.svelte b/src/routes/(app)/browse/source/[sourceID]/Grid.svelte
index 96d6cb5..79dc8a3 100644
--- a/src/routes/(app)/browse/source/[sourceID]/Grid.svelte
+++ b/src/routes/(app)/browse/source/[sourceID]/Grid.svelte
@@ -148,10 +148,11 @@
 								<MangaCard
 									thumbnailUrl={manga.thumbnailUrl ?? ''}
 									title={manga.title}
-									rounded="{gmState.Display === display.Compact && 'rounded-lg'}
-											{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+									rounded="{gmState.value.Display === display.Compact &&
+										'rounded-lg'}
+											{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 								>
-									{#if gmState.Display === display.Compact}
+									{#if gmState.value.Display === display.Compact}
 										<div
 											class="variant-glass absolute bottom-0 left-0 right-0 rounded-b-olg"
 										>
@@ -171,7 +172,7 @@
 										</div>
 									{/if}
 								</MangaCard>
-								{#if gmState.Display === display.Comfortable}
+								{#if gmState.value.Display === display.Comfortable}
 									<div class="variant-glass-surface rounded-b-lg">
 										<div
 											class="line-clamp-2 h-12 px-2 text-center"
@@ -184,7 +185,7 @@
 							</a>
 						{/if}
 					</div>
-					{#if !intersecting && gmState.Display === display.Comfortable}
+					{#if !intersecting && gmState.value.Display === display.Comfortable}
 						<div class="h-12"></div>
 					{/if}
 				{/snippet}
@@ -205,10 +206,10 @@
 				<div class="aspect-cover w-full">
 					<div
 						class="placeholder h-full animate-pulse
-						{gmState.Display === display.Compact && 'rounded-lg'}
-						{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+						{gmState.value.Display === display.Compact && 'rounded-lg'}
+						{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 					></div>
-					{#if gmState.Display === display.Comfortable}
+					{#if gmState.value.Display === display.Comfortable}
 						<div
 							class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 						></div>
diff --git a/src/routes/(app)/browse/sources/+page.svelte b/src/routes/(app)/browse/sources/+page.svelte
index 9a8680c..6f72a7a 100644
--- a/src/routes/(app)/browse/sources/+page.svelte
+++ b/src/routes/(app)/browse/sources/+page.svelte
@@ -32,7 +32,7 @@
 	const sources = queryState({
 		client,
 		query: getSources,
-		variables: { isNsfw: gmState.nsfw ? null : false }
+		variables: { isNsfw: gmState.value.nsfw ? null : false }
 	});
 	const query = queryParam('q', ssp.string(), { pushHistory: false });
 
diff --git a/src/routes/(app)/browse/sources/+page.ts b/src/routes/(app)/browse/sources/+page.ts
new file mode 100644
index 0000000..0c79660
--- /dev/null
+++ b/src/routes/(app)/browse/sources/+page.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { getSources } from '$lib/gql/Queries';
+import { gmState } from '$lib/simpleStores.svelte';
+
+export const load: PageLoad = ({ params, fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getSources,
+					{ isNsfw: gmState.value.nsfw ? null : false },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+	return { ...params };
+};
diff --git a/src/routes/(app)/history/+page.svelte b/src/routes/(app)/history/+page.svelte
index 05d247e..54ed3ba 100644
--- a/src/routes/(app)/history/+page.svelte
+++ b/src/routes/(app)/history/+page.svelte
@@ -55,10 +55,10 @@
 			<div class="aspect-cover w-full">
 				<div
 					class="placeholder h-full animate-pulse
-						{gmState.Display === display.Compact && 'rounded-lg'}
-						{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+						{gmState.value.Display === display.Compact && 'rounded-lg'}
+						{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 				></div>
-				{#if gmState.Display === display.Comfortable}
+				{#if gmState.value.Display === display.Comfortable}
 					<div
 						class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 					></div>
@@ -91,10 +91,11 @@
 								title={updat.manga.title}
 								titleA="{updat.isDownloaded ? 'Downloaded' : ''}
 	{updat.isBookmarked ? 'Bookmarked' : ''}"
-								rounded="{gmState.Display === display.Compact && 'rounded-lg'}
-								{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+								rounded="{gmState.value.Display === display.Compact &&
+									'rounded-lg'}
+								{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 							>
-								{#if gmState.Display === display.Compact}
+								{#if gmState.value.Display === display.Compact}
 									<div
 										class="variant-glass absolute bottom-0 left-0 right-0 rounded-b-olg"
 									>
@@ -129,7 +130,7 @@
 									{/if}
 								</div>
 							</MangaCard>
-							{#if gmState.Display === display.Comfortable}
+							{#if gmState.value.Display === display.Comfortable}
 								<div class="variant-glass-surface rounded-b-lg">
 									<div
 										class="line-clamp-1 h-6 px-2 text-center"
@@ -175,10 +176,10 @@
 				<div class="aspect-cover w-full">
 					<div
 						class="placeholder h-full animate-pulse
-							{gmState.Display === display.Compact && 'rounded-lg'}
-							{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+							{gmState.value.Display === display.Compact && 'rounded-lg'}
+							{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 					></div>
-					{#if gmState.Display === display.Comfortable}
+					{#if gmState.value.Display === display.Comfortable}
 						<div
 							class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 						></div>
diff --git a/src/routes/(app)/history/+page.ts b/src/routes/(app)/history/+page.ts
new file mode 100644
index 0000000..622f758
--- /dev/null
+++ b/src/routes/(app)/history/+page.ts
@@ -0,0 +1,25 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { History } from '$lib/gql/Queries';
+
+export const load: PageLoad = ({ params, fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					History,
+					{ offset: 0 },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+	return { ...params };
+};
diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/+page.ts b/src/routes/(app)/manga/[MangaID]/(manga)/+page.ts
index 242e5b7..e0c3f58 100644
--- a/src/routes/(app)/manga/[MangaID]/(manga)/+page.ts
+++ b/src/routes/(app)/manga/[MangaID]/(manga)/+page.ts
@@ -6,11 +6,26 @@
 
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { getManga } from '$lib/gql/Queries';
 
-export const load: PageLoad = ({ params }) => {
-	const tmp = parseInt(params.MangaID);
-	if (isNaN(tmp)) error(400, 'MangaID should be a number');
+export const load: PageLoad = ({ params, fetch }) => {
+	const MangaID = parseInt(params.MangaID);
+	if (isNaN(MangaID)) error(400, 'MangaID should be a number');
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getManga,
+					{ id: MangaID },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
 	return {
-		MangaID: tmp
+		MangaID
 	};
 };
diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/ChaptersFilterModal.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/ChaptersFilterModal.svelte
index 09954e3..9723cff 100644
--- a/src/routes/(app)/manga/[MangaID]/(manga)/ChaptersFilterModal.svelte
+++ b/src/routes/(app)/manga/[MangaID]/(manga)/ChaptersFilterModal.svelte
@@ -85,7 +85,7 @@
 				<div class="mx-4 mb-4">
 					{#if $tabSet === 0}
 						<TriStateSlide
-							bind:state={mmState.ChapterUnread}
+							bind:state={mmState.value.ChapterUnread}
 							label={'Unread'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -93,7 +93,7 @@
 							<span>Unread</span>
 						</TriStateSlide>
 						<TriStateSlide
-							bind:state={mmState.ChapterDownloaded}
+							bind:state={mmState.value.ChapterDownloaded}
 							label={'Downloaded'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -101,7 +101,7 @@
 							<span>Downloaded</span>
 						</TriStateSlide>
 						<TriStateSlide
-							bind:state={mmState.ChapterBookmarked}
+							bind:state={mmState.value.ChapterBookmarked}
 							label={'Downloaded'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -115,14 +115,14 @@
 								<span class="pr-2">Groups</span>
 								<input
 									onchange={(e) => {
-										mmState.groupPartials = e.currentTarget.value
+										mmState.value.groupPartials = e.currentTarget.value
 											.split(',')
 											.map((a) => a.trim())
 											.filter((a) => a.length > 0);
 										e.currentTarget.value =
-											mmState.groupPartials?.join(',') ?? '';
+											mmState.value.groupPartials?.join(',') ?? '';
 									}}
-									value={mmState.groupPartials?.join(',') ?? ''}
+									value={mmState.value.groupPartials?.join(',') ?? ''}
 									class="input w-1/2"
 									type="text"
 									placeholder="asura,dex,..."
@@ -132,7 +132,7 @@
 					{:else if $tabSet === 1}
 						<TriStateSlide
 							triState={false}
-							bind:checked={mmState.ChapterAsc}
+							bind:checked={mmState.value.ChapterAsc}
 							label={'Ascending'}
 							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 							labelClass="w-full"
@@ -149,7 +149,7 @@
 						>
 							{#each enumKeys(ChapterSort) as value}
 								<RadioItem
-									bind:group={mmState.ChapterSort}
+									bind:group={mmState.value.ChapterSort}
 									class="focus:outline-0"
 									name="justify"
 									{value}
@@ -164,14 +164,15 @@
 							onclick={(e) => {
 								e.stopPropagation();
 								e.preventDefault();
-								mmState.showMissingChapters = !mmState.showMissingChapters;
+								mmState.value.showMissingChapters =
+									!mmState.value.showMissingChapters;
 							}}
 						>
 							<span>Show Missing Chapters</span>
 							<SlideToggle
 								name="slide"
 								class="focus:outline-0"
-								bind:checked={mmState.showMissingChapters}
+								bind:checked={mmState.value.showMissingChapters}
 							/>
 						</button>
 						<button
@@ -179,14 +180,15 @@
 							onclick={(e) => {
 								e.stopPropagation();
 								e.preventDefault();
-								mmState.ChapterFetchUpload = !mmState.ChapterFetchUpload;
+								mmState.value.ChapterFetchUpload =
+									!mmState.value.ChapterFetchUpload;
 							}}
 						>
 							<span>FetchDate/UploadDate</span>
 							<SlideToggle
 								name="slide"
 								class="focus:outline-0"
-								bind:checked={mmState.ChapterFetchUpload}
+								bind:checked={mmState.value.ChapterFetchUpload}
 							/>
 						</button>
 						<RadioGroup
@@ -199,7 +201,7 @@
 						>
 							{#each enumKeys(ChapterTitle) as value}
 								<RadioItem
-									bind:group={mmState.ChapterTitle}
+									bind:group={mmState.value.ChapterTitle}
 									class="focus:outline-0"
 									name="justify"
 									{value}
diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/InfoSide.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/InfoSide.svelte
index ddbf027..c408484 100644
--- a/src/routes/(app)/manga/[MangaID]/(manga)/InfoSide.svelte
+++ b/src/routes/(app)/manga/[MangaID]/(manga)/InfoSide.svelte
@@ -40,7 +40,7 @@
 
 	function libToggle() {
 		if (
-			gmState.DownloadAllChaptersOnAddToLibrary &&
+			gmState.value.DownloadAllChaptersOnAddToLibrary &&
 			!manga.value?.data?.manga?.inLibrary
 		) {
 			client
@@ -51,7 +51,7 @@
 		}
 		if (
 			manga.value?.data?.manga?.inLibrary &&
-			gmState.DeleteAllChaptersOnRemoveFromLibrary
+			gmState.value.DeleteAllChaptersOnRemoveFromLibrary
 		) {
 			client
 				.mutation(deleteDownloadedChapters, {
@@ -62,7 +62,7 @@
 
 		if (
 			manga.value?.data?.manga?.inLibrary &&
-			gmState.RemoveChaptersFromDownloadQueueOnRemoveFromLibrary
+			gmState.value.RemoveChaptersFromDownloadQueueOnRemoveFromLibrary
 		) {
 			client
 				.mutation(dequeueChapterDownloads, {
@@ -313,8 +313,8 @@
 				Notes:
 			</button>
 			<div class="whitespace-pre-line pl-4 text-left">
-				{#if mmState.notes}
-					{mmState.notes}
+				{#if mmState.value.notes}
+					{mmState.value.notes}
 				{/if}
 			</div>
 		</div>
diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/NotesModal.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/NotesModal.svelte
index 22d57cc..af2168e 100644
--- a/src/routes/(app)/manga/[MangaID]/(manga)/NotesModal.svelte
+++ b/src/routes/(app)/manga/[MangaID]/(manga)/NotesModal.svelte
@@ -18,8 +18,8 @@
 		<div>
 			<textarea
 				class="textarea h-40 w-full"
-				onchange={(e) => (mmState.notes = e.currentTarget.value)}
-				value={mmState.notes ?? ''}
+				onchange={(e) => (mmState.value.notes = e.currentTarget.value)}
+				value={mmState.value.notes ?? ''}
 			></textarea>
 		</div>
 	</ModalTemplate>
diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte
index 19edb3f..d66b411 100644
--- a/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte
+++ b/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte
@@ -212,14 +212,16 @@
 		filteredChapters
 			? [...filteredChapters].sort((a, b) => {
 					let tmp = true;
-					if (mmState.ChapterSort === ChapterSort.Source) {
+					if (mmState.value.ChapterSort === ChapterSort.Source) {
 						tmp = a.sourceOrder > b.sourceOrder;
-					} else if (mmState.ChapterSort === ChapterSort['Fetched Date']) {
+					} else if (
+						mmState.value.ChapterSort === ChapterSort['Fetched Date']
+					) {
 						tmp = a.fetchedAt > b.fetchedAt;
 					} else {
 						tmp = a.uploadDate > b.uploadDate;
 					}
-					if (mmState.ChapterAsc) tmp = !tmp;
+					if (mmState.value.ChapterAsc) tmp = !tmp;
 					return tmp ? -1 : 1;
 				})
 			: undefined
@@ -289,7 +291,7 @@
 					<span class="line-clamp-1 pl-2 text-2xl font-medium md:text-3xl">
 						{sortedChapters.length} Chapters
 					</span>
-					{#if mmState.showMissingChapters && missingChapters?.length}
+					{#if mmState.value.showMissingChapters && missingChapters?.length}
 						<span
 							class="line-clamp-1 h-full pl-2 text-2xl font-medium md:text-xl"
 							title={missingChapters.join('\n')}
@@ -455,7 +457,8 @@
 											class="w-full space-y-0 {chapter.isRead && 'opacity-50'}"
 										>
 											<div class="line-clamp-1 w-full text-xl md:text-2xl">
-												{mmState.ChapterTitle === ChapterTitle['Source Title']
+												{mmState.value.ChapterTitle ===
+												ChapterTitle['Source Title']
 													? chapter.name
 													: `Chapter ${chapter.chapterNumber}`}
 											</div>
@@ -468,7 +471,7 @@
 												).toLocaleString()}"
 											>
 												{new Date(
-													mmState.ChapterFetchUpload
+													mmState.value.ChapterFetchUpload
 														? parseInt(chapter.uploadDate)
 														: parseInt(chapter.fetchedAt) * 1000
 												).toLocaleDateString()}{chapter.isDownloaded
diff --git a/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+layout.ts b/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+layout.ts
index 20cdc3d..58e15b4 100644
--- a/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+layout.ts
+++ b/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+layout.ts
@@ -6,6 +6,8 @@
 
 import { error } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
+import { browser } from '$app/environment';
+import { fetchChapterPages } from '$lib/gql/Mutations';
 
 export const ssr = false;
 export const prerender = false;
@@ -15,6 +17,22 @@ export const load: LayoutLoad = ({ params }) => {
 	const ChapterID = parseInt(params.ChapterID);
 	if (isNaN(MangaID)) error(400, 'MangaID should be a number');
 	if (isNaN(ChapterID)) error(400, 'MangaID should be a number');
+	if (browser)
+		return import('$lib/gql/graphqlClient').then((mod) => {
+			return {
+				pre: mod.client
+					.mutation(
+						fetchChapterPages,
+						{ chapterId: ChapterID },
+						{
+							fetch
+						}
+					)
+					.toPromise(),
+				MangaID,
+				ChapterID
+			};
+		});
 	return {
 		MangaID,
 		ChapterID
diff --git a/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+page.svelte b/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+page.svelte
index 09472af..626183c 100644
--- a/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+page.svelte
+++ b/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+page.svelte
@@ -52,7 +52,7 @@
 			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 				navigator.userAgent
 			) &&
-			mmState.mobileFullScreenOnChapterPage
+			mmState.value.mobileFullScreenOnChapterPage
 		) {
 			document.documentElement.requestFullscreen();
 		}
@@ -61,7 +61,7 @@
 				/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 					navigator.userAgent
 				) &&
-				mmState.mobileFullScreenOnChapterPage
+				mmState.value.mobileFullScreenOnChapterPage
 			) {
 				document.exitFullscreen();
 			}
@@ -102,8 +102,11 @@
 		| Promise<OperationResult<ResultOf<typeof fetchChapterPages>>>
 		| undefined = $state();
 	function loadNew() {
-		if (preload && !pagenav) pages = preload;
-		else
+		if (preload && !$pagenav) pages = preload;
+		else if (preload === data.pre) {
+			pages = preload;
+			preload = undefined;
+		} else
 			pages = client
 				.mutation(fetchChapterPages, { chapterId: currentChapterID })
 				.toPromise();
@@ -111,7 +114,7 @@
 
 	let preload:
 		| Promise<OperationResult<ResultOf<typeof fetchChapterPages>>>
-		| undefined = $state(undefined);
+		| undefined = $state(data.pre);
 	let preLoadingId: number | undefined = $state(undefined);
 	async function updatePages(
 		pages:
@@ -145,8 +148,7 @@
 	}
 
 	function getChapterAfterID(
-		currentID: number,
-		_: unknown = undefined
+		currentID: number
 	): ResultOf<typeof ChapterTypeFragment> | undefined {
 		const currentChapter = getChapterOfID(currentID);
 		if (!currentChapter) return undefined;
@@ -376,7 +378,7 @@
 		pageElement?.scrollTo({
 			top:
 				addition + (pageElement.scrollTop + pageElement.clientHeight * decimal),
-			behavior: mmState.SmoothScroll ? 'smooth' : 'instant'
+			behavior: mmState.value.SmoothScroll ? 'smooth' : 'instant'
 		});
 	}
 
@@ -460,16 +462,11 @@
 		const _ = [currentChapterID];
 		untrack(loadNew);
 	});
-	let nextid = $derived.by(() => {
-		const _ = [currentChapterID];
-		untrack(() => {
-			return getChapterAfterID(currentChapterID, manga)?.id;
-		});
-	});
+	let nextid = $derived(getChapterAfterID(currentChapterID)?.id);
 	$effect(() => {
 		if (
 			nextid !== undefined &&
-			mmState.preLoadNextChapter &&
+			mmState.value.preLoadNextChapter &&
 			nextid !== preLoadingId
 		) {
 			untrack(() => {
@@ -487,10 +484,10 @@
 		});
 	});
 	$effect(() => {
-		if (mmState.ReaderMode === Mode.RTL) {
-			path = layoutToPath(paths.rtl, mmState.NavLayout);
+		if (mmState.value.ReaderMode === Mode.RTL) {
+			path = layoutToPath(paths.rtl, mmState.value.NavLayout);
 		} else {
-			path = layoutToPath(paths.ltr, mmState.NavLayout);
+			path = layoutToPath(paths.ltr, mmState.value.NavLayout);
 		}
 	});
 	$effect(() => {
@@ -583,35 +580,38 @@
 		<div>
 			<div
 				class="
-				{mmState.ReaderMode === Mode.Vertical && 'flex flex-col items-center'}
-				{mmState.ReaderMode === Mode.single && 'flex flex-col items-center'}
-				{mmState.ReaderMode === Mode.RTL &&
+				{mmState.value.ReaderMode === Mode.Vertical && 'flex flex-col items-center'}
+				{mmState.value.ReaderMode === Mode.single && 'flex flex-col items-center'}
+				{mmState.value.ReaderMode === Mode.RTL &&
 					'place-content-center[&>div:nth-child(even)]:justify-self-start grid grid-cols-2 [&>div:nth-child(odd)]:justify-self-end'}
-				{mmState.ReaderMode === Mode.LTR &&
+				{mmState.value.ReaderMode === Mode.LTR &&
 					'place-content-center[&>div:nth-child(even)]:justify-self-start grid grid-cols-2 [&>div:nth-child(odd)]:justify-self-end'}
 				"
-				dir={mmState.ReaderMode === Mode.RTL ? 'rtl' : 'ltr'}
+				dir={mmState.value.ReaderMode === Mode.RTL ? 'rtl' : 'ltr'}
 			>
-				{#if (mmState.ReaderMode === Mode.RTL || mmState.ReaderMode === Mode.LTR) && mmState.Offset}
+				{#if (mmState.value.ReaderMode === Mode.RTL || mmState.value.ReaderMode === Mode.LTR) && mmState.value.Offset}
 					<div></div>
 				{/if}
 				{#each chapter.pages as page, pageIndex (page)}
 					<div
 						class="h-auto w-auto
-							{mmState.Margins && mmState.ReaderMode === Mode.Vertical && 'mb-4'}
-							{mmState.Margins && mmState.ReaderMode === Mode.single && 'mb-4'}
-							{mmState.Margins &&
-							mmState.ReaderMode === Mode.RTL &&
+							{mmState.value.Margins && mmState.value.ReaderMode === Mode.Vertical && 'mb-4'}
+							{mmState.value.Margins && mmState.value.ReaderMode === Mode.single && 'mb-4'}
+							{mmState.value.Margins &&
+							mmState.value.ReaderMode === Mode.RTL &&
 							'mb-4 odd:ml-2 even:mr-2'}
-							{mmState.Margins &&
-							mmState.ReaderMode === Mode.LTR &&
+							{mmState.value.Margins &&
+							mmState.value.ReaderMode === Mode.LTR &&
 							'mb-4 odd:mr-2 even:ml-2'}
-							{mmState.Scale && mmState.ReaderMode !== Mode.Vertical
+							{mmState.value.Scale && mmState.value.ReaderMode !== Mode.Vertical
 							? 'h-full max-h-screen'
-							: 'h-auto'} {mmState.Scale && mmState.ReaderMode === Mode.Vertical
+							: 'h-auto'} {mmState.value.Scale &&
+						mmState.value.ReaderMode === Mode.Vertical
 							? 'w-full'
 							: 'w-auto'}
-								{mmState.Scale && mmState.ReaderMode === Mode.single ? 'max-w-full' : ''}"
+								{mmState.value.Scale && mmState.value.ReaderMode === Mode.single
+							? 'max-w-full'
+							: ''}"
 					>
 						<IntersectionObserver
 							onintersect={(e) => {
@@ -626,28 +626,35 @@
 							}}
 							root={document.querySelector('#page') ?? undefined}
 							bottom={0}
-							top={mmState.Margins ? 16 : 0}
+							top={mmState.value.Margins ? 16 : 0}
 						/>
 						<div
 							id="c{index}p{pageIndex}"
-							class="{mmState.Scale && mmState.ReaderMode !== Mode.Vertical
+							class="{mmState.value.Scale &&
+							mmState.value.ReaderMode !== Mode.Vertical
 								? 'h-full max-h-screen'
-								: 'h-auto'} {mmState.Scale &&
-							mmState.ReaderMode === Mode.Vertical
+								: 'h-auto'} {mmState.value.Scale &&
+							mmState.value.ReaderMode === Mode.Vertical
 								? 'w-full'
 								: 'w-auto'}
-								{mmState.Scale && mmState.ReaderMode === Mode.single ? 'max-w-full' : ''}"
+								{mmState.value.Scale && mmState.value.ReaderMode === Mode.single
+								? 'max-w-full'
+								: ''}"
 						>
 							<Image
 								reload_button={true}
 								src={page}
-								height={mmState.Scale && mmState.ReaderMode !== Mode.Vertical
+								height={mmState.value.Scale &&
+								mmState.value.ReaderMode !== Mode.Vertical
 									? 'max-h-screen h-full'
 									: 'h-auto'}
-								width="{mmState.Scale && mmState.ReaderMode === Mode.Vertical
+								width="{mmState.value.Scale &&
+								mmState.value.ReaderMode === Mode.Vertical
 									? 'w-full'
 									: 'w-auto'}
-									{mmState.Scale && mmState.ReaderMode === Mode.single ? 'max-w-full' : ''}"
+									{mmState.value.Scale && mmState.value.ReaderMode === Mode.single
+									? 'max-w-full'
+									: ''}"
 								rounded=" rounded-none"
 								LoadingHeight="h-screen"
 								LoadingWidth="w-screen"
@@ -693,7 +700,7 @@
 			</div>
 		</div>
 	{/each}
-	{#if mmState.doPageIndicator}
+	{#if mmState.value.doPageIndicator}
 		<div
 			class="fixed bottom-2 left-1/2 -translate-x-1/2 rounded bg-surface-500/60 p-2 text-black dark:text-white"
 		>
diff --git a/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/chapterDrawer.svelte b/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/chapterDrawer.svelte
index 1b98823..852951c 100644
--- a/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/chapterDrawer.svelte
+++ b/src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/chapterDrawer.svelte
@@ -56,7 +56,7 @@
 			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 				navigator.userAgent
 			) &&
-			mmState.mobileFullScreenOnChapterPage
+			mmState.value.mobileFullScreenOnChapterPage
 		) {
 			document.exitFullscreen();
 		}
@@ -65,7 +65,7 @@
 				/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 					navigator.userAgent
 				) &&
-				mmState.mobileFullScreenOnChapterPage
+				mmState.value.mobileFullScreenOnChapterPage
 			) {
 				document.documentElement.requestFullscreen();
 			}
@@ -129,33 +129,33 @@
 			<Slide
 				tabindex={0}
 				class="p-1 hover:variant-glass-surface"
-				bind:checked={mmState.Margins}
+				bind:checked={mmState.value.Margins}
 			>
 				Page Margins
 			</Slide>
 			<Slide
 				class="p-1 hover:variant-glass-surface"
-				bind:checked={mmState.Scale}
+				bind:checked={mmState.value.Scale}
 			>
 				Page Scale
 			</Slide>
 			<Slide
 				class="p-1 hover:variant-glass-surface"
-				bind:checked={mmState.SmoothScroll}
+				bind:checked={mmState.value.SmoothScroll}
 			>
 				Smooth Scroll
 			</Slide>
-			{#if mmState.ReaderMode !== Mode.Vertical}
+			{#if mmState.value.ReaderMode !== Mode.Vertical}
 				<Slide
 					class="p-1 hover:variant-glass-surface"
-					bind:checked={mmState.Offset}
+					bind:checked={mmState.value.Offset}
 				>
 					Page Offset
 				</Slide>
 			{/if}
 			<label class="pl-3">
 				<span>Reader Mode</span>
-				<select bind:value={mmState.ReaderMode} class="select">
+				<select bind:value={mmState.value.ReaderMode} class="select">
 					{#each enumKeys(Mode) as value}
 						<option {value}>{value}</option>
 					{/each}
@@ -166,7 +166,7 @@
 			</Slide>
 			<label class="pl-3">
 				<span>Navigation Layout</span>
-				<select bind:value={mmState.NavLayout} class="select">
+				<select bind:value={mmState.value.NavLayout} class="select">
 					{#each enumKeys(Layout) as value}
 						<option {value}>{value}</option>
 					{/each}
@@ -209,7 +209,8 @@
 										{chapter.isRead && 'opacity-50'}"
 									>
 										<div class="line-clamp-1 w-full text-xl md:text-2xl">
-											{mmState.ChapterTitle === ChapterTitle['Source Title']
+											{mmState.value.ChapterTitle ===
+											ChapterTitle['Source Title']
 												? chapter.name
 												: `Chapter ${chapter.chapterNumber}`}
 										</div>
@@ -222,7 +223,7 @@
 											).toLocaleString()}"
 										>
 											{new Date(
-												mmState.ChapterFetchUpload
+												mmState.value.ChapterFetchUpload
 													? parseInt(chapter.uploadDate)
 													: parseInt(chapter.fetchedAt) * 1000
 											).toLocaleDateString()}{chapter.isDownloaded
diff --git a/src/routes/(app)/manga/[MangaID]/util.ts b/src/routes/(app)/manga/[MangaID]/util.ts
index bc5acc4..22f5969 100644
--- a/src/routes/(app)/manga/[MangaID]/util.ts
+++ b/src/routes/(app)/manga/[MangaID]/util.ts
@@ -11,7 +11,7 @@ export function filterChapters(mangaMeta: typeof mmState, reading = false) {
 	return (
 		chapter: ResultOf<typeof getManga>['manga']['chapters']['nodes'][number]
 	) => {
-		const groupPartials = mangaMeta.groupPartials;
+		const groupPartials = mangaMeta.value.groupPartials;
 		if (groupPartials && groupPartials.length > 0) {
 			if (
 				!groupPartials
@@ -26,17 +26,17 @@ export function filterChapters(mangaMeta: typeof mmState, reading = false) {
 			}
 		}
 		if (!reading) {
-			if (mangaMeta.ChapterUnread === 1 && chapter.isRead) return false;
-			if (mangaMeta.ChapterUnread === 2 && !chapter.isRead) return false;
+			if (mangaMeta.value.ChapterUnread === 1 && chapter.isRead) return false;
+			if (mangaMeta.value.ChapterUnread === 2 && !chapter.isRead) return false;
 
-			if (mangaMeta.ChapterDownloaded === 1 && !chapter.isDownloaded)
+			if (mangaMeta.value.ChapterDownloaded === 1 && !chapter.isDownloaded)
 				return false;
-			if (mangaMeta.ChapterDownloaded === 2 && chapter.isDownloaded)
+			if (mangaMeta.value.ChapterDownloaded === 2 && chapter.isDownloaded)
 				return false;
 
-			if (mangaMeta.ChapterBookmarked === 1 && !chapter.isBookmarked)
+			if (mangaMeta.value.ChapterBookmarked === 1 && !chapter.isBookmarked)
 				return false;
-			if (mangaMeta.ChapterBookmarked === 2 && chapter.isBookmarked)
+			if (mangaMeta.value.ChapterBookmarked === 2 && chapter.isBookmarked)
 				return false;
 		}
 		return true;
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
index 8ccc181..073f8af 100644
--- a/src/routes/(app)/settings/+page.svelte
+++ b/src/routes/(app)/settings/+page.svelte
@@ -90,7 +90,7 @@
 >
 	<IconWrapper class="h-full w-auto p-2" name="mdi:television-guide" />
 	<div class="w-full">Grid Display</div>
-	<select bind:value={gmState.Display} class="select mr-1 max-w-sm">
+	<select bind:value={gmState.value.Display} class="select mr-1 max-w-sm">
 		{#each enumKeys(display) as value}
 			<option {value}>{value}</option>
 		{/each}
@@ -100,7 +100,7 @@
 	onclickcapture={(e) => {
 		e.stopPropagation();
 		e.preventDefault();
-		gmState.dark = !gmState.dark;
+		gmState.value.dark = !gmState.value.dark;
 	}}
 	class="flex h-16 w-full cursor-pointer items-center text-left hover:variant-glass-surface"
 >
@@ -113,7 +113,7 @@
 >
 	<IconWrapper class="h-full w-auto p-2" name="mdi:palette-outline" />
 	<div class="w-full">Theme settings</div>
-	<select bind:value={gmState.theme} class="select mr-1 max-w-sm">
+	<select bind:value={gmState.value.theme} class="select mr-1 max-w-sm">
 		{#each presetWithIcons as preset}
 			<option value={preset.name}>{preset.icon} {preset.name}</option>
 		{/each}
@@ -121,14 +121,14 @@
 </label>
 <button
 	onclick={() => {
-		gmState.nsfw = !gmState.nsfw;
+		gmState.value.nsfw = !gmState.value.nsfw;
 	}}
 	class="flex h-16 w-full cursor-pointer items-center text-left hover:variant-glass-surface"
 >
 	<IconWrapper class="h-full w-auto p-2" name="mdi:heart" />
 	<div class="w-full">Show Nsfw</div>
 	<Slide
-		bind:checked={gmState.nsfw}
+		bind:checked={gmState.value.nsfw}
 		class="p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 	/>
 </button>
diff --git a/src/routes/(app)/settings/LibrarySettings.svelte b/src/routes/(app)/settings/LibrarySettings.svelte
index aea9d1a..ae07f0e 100644
--- a/src/routes/(app)/settings/LibrarySettings.svelte
+++ b/src/routes/(app)/settings/LibrarySettings.svelte
@@ -18,7 +18,7 @@
 {#if $modalStore[0]}
 	<ModalTemplate titleText="Library settings">
 		<Slide
-			bind:checked={gmState.ignoreFiltersWhenSearching}
+			bind:checked={gmState.value.ignoreFiltersWhenSearching}
 			class="my-1 p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 		>
 			Ignore Filters When Searching
diff --git a/src/routes/(app)/settings/MangaSettingsModal.svelte b/src/routes/(app)/settings/MangaSettingsModal.svelte
index a7752b7..43cc9e1 100644
--- a/src/routes/(app)/settings/MangaSettingsModal.svelte
+++ b/src/routes/(app)/settings/MangaSettingsModal.svelte
@@ -25,26 +25,27 @@
 {#if $modalStore[0]}
 	<ModalTemplate titleText="Manga Settings Defaults">
 		<Slide
-			bind:checked={gmState.DownloadAllChaptersOnAddToLibrary}
+			bind:checked={gmState.value.DownloadAllChaptersOnAddToLibrary}
 			class="my-1 p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 		>
 			Download all chapters when add manga to library
 		</Slide>
 		<Slide
-			bind:checked={gmState.DeleteAllChaptersOnRemoveFromLibrary}
+			bind:checked={gmState.value.DeleteAllChaptersOnRemoveFromLibrary}
 			class="my-1 p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 		>
 			Delete all chapters when remove manga from library
 		</Slide>
 		<Slide
-			bind:checked={gmState.RemoveChaptersFromDownloadQueueOnRemoveFromLibrary}
+			bind:checked={gmState.value
+				.RemoveChaptersFromDownloadQueueOnRemoveFromLibrary}
 			class="my-1 p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 		>
 			Remove chapters from download queue when remove manga from library
 		</Slide>
 		<h2 class="h4 mb-1 border-b border-surface-700">Filters</h2>
 		<TriStateSlide
-			bind:state={gmState.mangaMetaDefaults.ChapterUnread}
+			bind:state={gmState.value.mangaMetaDefaults.ChapterUnread}
 			label={'Unread'}
 			class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 			labelClass="w-full"
@@ -52,7 +53,7 @@
 			<span>Unread</span>
 		</TriStateSlide>
 		<TriStateSlide
-			bind:state={gmState.mangaMetaDefaults.ChapterDownloaded}
+			bind:state={gmState.value.mangaMetaDefaults.ChapterDownloaded}
 			label={'Downloaded'}
 			class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 			labelClass="w-full"
@@ -60,7 +61,7 @@
 			<span>Downloaded</span>
 		</TriStateSlide>
 		<TriStateSlide
-			bind:state={gmState.mangaMetaDefaults.ChapterBookmarked}
+			bind:state={gmState.value.mangaMetaDefaults.ChapterBookmarked}
 			label={'Downloaded'}
 			class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 			labelClass="w-full"
@@ -70,7 +71,7 @@
 		<h2 class="h4 mb-1 border-b border-surface-700">Sort</h2>
 		<TriStateSlide
 			triState={false}
-			bind:checked={gmState.mangaMetaDefaults.ChapterAsc}
+			bind:checked={gmState.value.mangaMetaDefaults.ChapterAsc}
 			label={'Ascending'}
 			class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
 			labelClass="w-full"
@@ -87,7 +88,7 @@
 		>
 			{#each enumKeys(ChapterSort) as value}
 				<RadioItem
-					bind:group={gmState.mangaMetaDefaults.ChapterSort}
+					bind:group={gmState.value.mangaMetaDefaults.ChapterSort}
 					class="focus:outline-0"
 					name="justify"
 					{value}
@@ -102,15 +103,15 @@
 			onclick={(e) => {
 				e.preventDefault();
 				e.stopPropagation();
-				gmState.mangaMetaDefaults.showMissingChapters =
-					!gmState.mangaMetaDefaults.showMissingChapters;
+				gmState.value.mangaMetaDefaults.showMissingChapters =
+					!gmState.value.mangaMetaDefaults.showMissingChapters;
 			}}
 		>
 			<span>Show Missing Chapters</span>
 			<SlideToggle
 				name="slide"
 				class="focus:outline-0"
-				bind:checked={gmState.mangaMetaDefaults.showMissingChapters}
+				bind:checked={gmState.value.mangaMetaDefaults.showMissingChapters}
 			/>
 		</button>
 		<button
@@ -118,15 +119,15 @@
 			onclick={(e) => {
 				e.preventDefault();
 				e.stopPropagation();
-				gmState.mangaMetaDefaults.ChapterFetchUpload =
-					!gmState.mangaMetaDefaults.ChapterFetchUpload;
+				gmState.value.mangaMetaDefaults.ChapterFetchUpload =
+					!gmState.value.mangaMetaDefaults.ChapterFetchUpload;
 			}}
 		>
 			<span>FetchDate/UploadDate</span>
 			<SlideToggle
 				name="slide"
 				class="focus:outline-0"
-				bind:checked={gmState.mangaMetaDefaults.ChapterFetchUpload}
+				bind:checked={gmState.value.mangaMetaDefaults.ChapterFetchUpload}
 			/>
 		</button>
 		<RadioGroup
@@ -139,7 +140,7 @@
 		>
 			{#each enumKeys(ChapterTitle) as value}
 				<RadioItem
-					bind:group={gmState.mangaMetaDefaults.ChapterTitle}
+					bind:group={gmState.value.mangaMetaDefaults.ChapterTitle}
 					class="focus:outline-0"
 					name="justify"
 					{value}
diff --git a/src/routes/(app)/settings/ReaderDefaultsModal.svelte b/src/routes/(app)/settings/ReaderDefaultsModal.svelte
index a5ea7af..4ee1a74 100644
--- a/src/routes/(app)/settings/ReaderDefaultsModal.svelte
+++ b/src/routes/(app)/settings/ReaderDefaultsModal.svelte
@@ -20,33 +20,36 @@
 	<ModalTemplate titleText="Reader Defaults">
 		<Slide
 			class="mt-1 p-1 outline-0 hover:variant-glass-surface"
-			bind:checked={gmState.mangaMetaDefaults.Margins}
+			bind:checked={gmState.value.mangaMetaDefaults.Margins}
 		>
 			Page Margins
 		</Slide>
 		<Slide
 			class="p-1 outline-0 hover:variant-glass-surface"
-			bind:checked={gmState.mangaMetaDefaults.Scale}
+			bind:checked={gmState.value.mangaMetaDefaults.Scale}
 		>
 			Page Scale
 		</Slide>
 		<Slide
 			class="p-1 outline-0 hover:variant-glass-surface"
-			bind:checked={gmState.mangaMetaDefaults.SmoothScroll}
+			bind:checked={gmState.value.mangaMetaDefaults.SmoothScroll}
 		>
 			Smooth Scroll
 		</Slide>
-		{#if gmState.mangaMetaDefaults.ReaderMode !== Mode.Vertical}
+		{#if gmState.value.mangaMetaDefaults.ReaderMode !== Mode.Vertical}
 			<Slide
 				class="p-1 outline-0 hover:variant-glass-surface"
-				bind:checked={gmState.mangaMetaDefaults.Offset}
+				bind:checked={gmState.value.mangaMetaDefaults.Offset}
 			>
 				Page Offset
 			</Slide>
 		{/if}
 		<label class="pl-3">
 			<span>Reader Mode</span>
-			<select bind:value={gmState.mangaMetaDefaults.ReaderMode} class="select">
+			<select
+				bind:value={gmState.value.mangaMetaDefaults.ReaderMode}
+				class="select"
+			>
 				{#each enumKeys(Mode) as value}
 					<option {value}>{value}</option>
 				{/each}
@@ -54,7 +57,10 @@
 		</label>
 		<label class="mb-2 pl-3">
 			<span>Navigation Layout</span>
-			<select bind:value={gmState.mangaMetaDefaults.NavLayout} class="select">
+			<select
+				bind:value={gmState.value.mangaMetaDefaults.NavLayout}
+				class="select"
+			>
 				{#each enumKeys(Layout) as value}
 					<option {value}>{value}</option>
 				{/each}
@@ -62,19 +68,20 @@
 		</label>
 		<Slide
 			class="p-1 outline-0 hover:variant-glass-surface"
-			bind:checked={gmState.mangaMetaDefaults.preLoadNextChapter}
+			bind:checked={gmState.value.mangaMetaDefaults.preLoadNextChapter}
 		>
 			preload Next Chapter
 		</Slide>
 		<Slide
 			class="p-1 outline-0 hover:variant-glass-surface"
-			bind:checked={gmState.mangaMetaDefaults.mobileFullScreenOnChapterPage}
+			bind:checked={gmState.value.mangaMetaDefaults
+				.mobileFullScreenOnChapterPage}
 		>
 			mobile Full Screen On Chapter Page
 		</Slide>
 		<Slide
 			class="p-1 outline-0 hover:variant-glass-surface"
-			bind:checked={gmState.mangaMetaDefaults.doPageIndicator}
+			bind:checked={gmState.value.mangaMetaDefaults.doPageIndicator}
 		>
 			Chapter Page Indicator
 		</Slide>
diff --git a/src/routes/(app)/settings/about/+page.ts b/src/routes/(app)/settings/about/+page.ts
new file mode 100644
index 0000000..e605cfe
--- /dev/null
+++ b/src/routes/(app)/settings/about/+page.ts
@@ -0,0 +1,24 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { getabout } from '$lib/gql/Queries';
+
+export const load: PageLoad = ({ fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getabout,
+					{},
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+};
diff --git a/src/routes/(app)/settings/categories/+page.ts b/src/routes/(app)/settings/categories/+page.ts
new file mode 100644
index 0000000..cb9719a
--- /dev/null
+++ b/src/routes/(app)/settings/categories/+page.ts
@@ -0,0 +1,24 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { getCategories } from '$lib/gql/Queries';
+
+export const load: PageLoad = ({ fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					getCategories,
+					{},
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+};
diff --git a/src/routes/(app)/settings/server/+page.ts b/src/routes/(app)/settings/server/+page.ts
new file mode 100644
index 0000000..50ee664
--- /dev/null
+++ b/src/routes/(app)/settings/server/+page.ts
@@ -0,0 +1,24 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { serverSettings } from '$lib/gql/Queries';
+
+export const load: PageLoad = ({ fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					serverSettings,
+					{},
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+};
diff --git a/src/routes/(app)/updates/+page.svelte b/src/routes/(app)/updates/+page.svelte
index e67292f..f9c68b8 100644
--- a/src/routes/(app)/updates/+page.svelte
+++ b/src/routes/(app)/updates/+page.svelte
@@ -106,10 +106,10 @@
 			<div class="aspect-cover w-full">
 				<div
 					class="placeholder h-full animate-pulse
-						{gmState.Display === display.Compact && 'rounded-lg'}
-						{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+						{gmState.value.Display === display.Compact && 'rounded-lg'}
+						{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 				></div>
-				{#if gmState.Display === display.Comfortable}
+				{#if gmState.value.Display === display.Comfortable}
 					<div
 						class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 					></div>
@@ -163,8 +163,9 @@
 								titleA="{updat.isDownloaded ? 'Downloaded' : ''}
 	{updat.isRead ? 'Read' : ''}
 	{updat.isBookmarked ? 'Bookmarked' : ''}"
-								rounded="{gmState.Display === display.Compact && 'rounded-lg'}
-								{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+								rounded="{gmState.value.Display === display.Compact &&
+									'rounded-lg'}
+								{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 							>
 								{#if $selectMode}
 									<div
@@ -178,7 +179,7 @@
 										/>
 									</div>
 								{/if}
-								{#if gmState.Display === display.Compact}
+								{#if gmState.value.Display === display.Compact}
 									<div
 										class="variant-glass absolute bottom-0 left-0 right-0 rounded-b-olg"
 									>
@@ -219,7 +220,7 @@
 									{/if}
 								</div>
 							</MangaCard>
-							{#if gmState.Display === display.Comfortable}
+							{#if gmState.value.Display === display.Comfortable}
 								<div class="variant-glass-surface rounded-b-lg">
 									<div
 										class="line-clamp-1 h-6 px-2 text-center"
@@ -265,10 +266,10 @@
 				<div class="aspect-cover w-full">
 					<div
 						class="placeholder h-full animate-pulse
-							{gmState.Display === display.Compact && 'rounded-lg'}
-							{gmState.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+							{gmState.value.Display === display.Compact && 'rounded-lg'}
+							{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
 					></div>
-					{#if gmState.Display === display.Comfortable}
+					{#if gmState.value.Display === display.Comfortable}
 						<div
 							class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 						></div>
diff --git a/src/routes/(app)/updates/+page.ts b/src/routes/(app)/updates/+page.ts
new file mode 100644
index 0000000..8048fe6
--- /dev/null
+++ b/src/routes/(app)/updates/+page.ts
@@ -0,0 +1,24 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
+import { updates } from '$lib/gql/Queries';
+
+export const load: PageLoad = ({ fetch }) => {
+	if (browser)
+		(async () => {
+			const mod = await import('$lib/gql/graphqlClient');
+			mod.client
+				.query(
+					updates,
+					{ offset: 0 },
+					{
+						fetch
+					}
+				)
+				.toPromise();
+		})();
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a00d0d7..1f8bc06 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -46,12 +46,18 @@
 
 	$effect(themeFunc);
 	function themeFunc() {
-		document.body.dataset.theme = gmState.theme;
-		if (gmState.dark && !document.documentElement.classList.contains('dark')) {
+		document.body.dataset.theme = gmState.value.theme;
+		if (
+			gmState.value.dark &&
+			!document.documentElement.classList.contains('dark')
+		) {
 			document.documentElement.classList.add('dark');
 			return;
 		}
-		if (!gmState.dark && document.documentElement.classList.contains('dark')) {
+		if (
+			!gmState.value.dark &&
+			document.documentElement.classList.contains('dark')
+		) {
 			document.documentElement.classList.remove('dark');
 		}
 	}