diff --git a/src/lib/components/AddBookmarkForm/AddBookmarkForm.svelte b/src/lib/components/AddBookmarkForm/AddBookmarkForm.svelte
index 8c14550..83df3a7 100644
--- a/src/lib/components/AddBookmarkForm/AddBookmarkForm.svelte
+++ b/src/lib/components/AddBookmarkForm/AddBookmarkForm.svelte
@@ -1,197 +1,198 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import { page } from '$app/stores';
-	import { generateTags } from '$lib/integrations/ollama';
-	import { searchEngine } from '$lib/stores/search.store';
-	import { userSettingsStore } from '$lib/stores/user-settings.store';
-	import type { Metadata } from '$lib/types/Metadata.type';
-	import { validateUrlRegex } from '$lib/utils/regex-library';
-	import { addBookmarkToSearchIndex } from '$lib/utils/search';
-	import { showToast } from '$lib/utils/show-toast';
+import { enhance } from '$app/forms';
+import { invalidate } from '$app/navigation';
+import { page } from '$app/stores';
+import { generateTags } from '$lib/integrations/ollama';
+import { searchEngine } from '$lib/stores/search.store';
+import { userSettingsStore } from '$lib/stores/user-settings.store';
+import type { Metadata } from '$lib/types/Metadata.type';
+import { validateUrlRegex } from '$lib/utils/regex-library';
+import { addBookmarkToSearchIndex } from '$lib/utils/search';
+import { showToast } from '$lib/utils/show-toast';
 
-	import { IconInfoCircle } from '@tabler/icons-svelte';
-	import _ from 'lodash';
-	import { onDestroy } from 'svelte';
-	import Select from 'svelte-select';
-	import { writable, type Writable } from 'svelte/store';
+import { IconInfoCircle } from '@tabler/icons-svelte';
+import _ from 'lodash';
+import { onDestroy } from 'svelte';
+import Select from 'svelte-select';
+import { writable, type Writable } from 'svelte/store';
 
-	const defaultFormValues: Metadata = {
-		url: '',
-		domain: '',
-		title: '',
-		description: '',
-		author: '',
-		contentText: '',
-		contentHtml: '',
-		contentType: '',
-		mainImageUrl: '',
-		iconUrl: '',
-		contentPublishedDate: null
-	};
-	const defaultCategory = $page.data.categories.find((c) => Boolean(c.initial))!;
-	const categorySelectItems = $page.data.categories.map((c) => ({
-		value: `${c.id}`,
-		label: c.name
-	}));
-
-	onDestroy(() => {
-		bookmarkTagsInput.set(null);
-		metadata = { ...defaultFormValues };
-	});
+const defaultFormValues: Metadata = {
+	url: '',
+	domain: '',
+	title: '',
+	description: '',
+	author: '',
+	contentText: '',
+	contentHtml: '',
+	contentType: '',
+	mainImageUrl: '',
+	iconUrl: '',
+	contentPublishedDate: null
+};
+const defaultCategory = $page.data.categories.find((c) => Boolean(c.initial))!;
+const categorySelectItems = $page.data.categories.map((c) => ({
+	value: `${c.id}`,
+	label: c.name
+}));
 
-	let metadata: Metadata = { ...defaultFormValues };
-	export let closeModal: () => void;
+onDestroy(() => {
+	bookmarkTagsInput.set(null);
+	metadata = { ...defaultFormValues };
+});
 
-	const bookmarkTagsInput: Writable<
-		| {
-				value: string;
-				label: string;
-				created?: boolean;
-		  }[]
-		| null
-	> = writable(null);
+let metadata: Metadata = { ...defaultFormValues };
+export let closeModal: () => void;
 
-	const bookmarkTags = writable<
-		{
+const bookmarkTagsInput: Writable<
+	| {
 			value: string;
 			label: string;
 			created?: boolean;
-		}[]
-	>([...$page.data.tags.map((t) => ({ value: `${t.id}`, label: t.name }))]);
-	const loadingTags = writable(false);
+	  }[]
+	| null
+> = writable(null);
 
-	let tagsInputFilterText: '';
+const bookmarkTags = writable<
+	{
+		value: string;
+		label: string;
+		created?: boolean;
+	}[]
+>([...$page.data.tags.map((t) => ({ value: `${t.id}`, label: t.name }))]);
+const loadingTags = writable(false);
 
-	function handleTagsFilter(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
-		if (
-			!$bookmarkTagsInput?.find((i) => i.label === tagsInputFilterText) &&
-			e.detail.length === 0 &&
-			tagsInputFilterText.length > 0
-		) {
-			const prev = $bookmarkTags.filter((i) => !i.created);
-			$bookmarkTags = [
-				...prev,
-				{ value: tagsInputFilterText, label: tagsInputFilterText, created: true }
-			];
-		}
-	}
+let tagsInputFilterText: '';
 
-	function handleTagsInput(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
-		if (!e.detail) {
-			$bookmarkTags = [];
-			return e;
-		}
-		const lastItemIndex = e.detail.length - 1;
-		e.detail[lastItemIndex] = {
-			...e.detail[lastItemIndex],
-			label: e.detail[lastItemIndex].label.replace(/#/g, ''),
-			value: e.detail[lastItemIndex].value.replace(/#/g, '')
-		};
-
-		return e;
-	}
-
-	function handleTagsChange() {
+function handleTagsFilter(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
+	if (
+		!$bookmarkTagsInput?.find((i) => i.label === tagsInputFilterText) &&
+		e.detail.length === 0 &&
+		tagsInputFilterText.length > 0
+	) {
+		const prev = $bookmarkTags.filter((i) => !i.created);
 		$bookmarkTags = [
-			...$bookmarkTags?.map((i) => {
-				if (i.label.startsWith('#')) {
-					i.label = i.label.replace(/#/g, '');
-					i.value = i.value.replace(/#/g, '');
-				}
-				if (i.created) {
-					delete i.created;
-				}
-				return i;
-			})
+			...prev,
+			{ value: tagsInputFilterText, label: tagsInputFilterText, created: true }
 		];
 	}
+}
 
-	let note = '';
-	let error = '';
-	let warning = '';
-	const loading = writable(false);
-
-	const onGetMetadata = _.debounce(
-		async (event: Event) => {
-			const target = event.target as HTMLButtonElement;
-			const url = target.value;
-			error = '';
+function handleTagsInput(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
+	if (!e.detail) {
+		$bookmarkTags = [];
+		return e;
+	}
+	const lastItemIndex = e.detail.length - 1;
+	e.detail[lastItemIndex] = {
+		...e.detail[lastItemIndex],
+		label: e.detail[lastItemIndex].label.replace(/#/g, ''),
+		value: e.detail[lastItemIndex].value.replace(/#/g, '')
+	};
 
-			loading.set(true);
+	return e;
+}
 
-			if (!url) {
-				metadata = { ...defaultFormValues };
-				loading.set(false);
-				return;
+function handleTagsChange() {
+	$bookmarkTags = [
+		...$bookmarkTags?.map((i) => {
+			if (i.label.startsWith('#')) {
+				i.label = i.label.replace(/#/g, '');
+				i.value = i.value.replace(/#/g, '');
 			}
-			if (!url.match(validateUrlRegex)) {
-				error = 'Invalid URL';
-				loading.set(false);
-				return;
-			}
-
-			const bookmarkExists = $page.data.bookmarks.find((b) => b.url === url);
-			if (bookmarkExists) {
-				warning = `Be warned, bookmark with this URL already exists as '${bookmarkExists.title}' in '${bookmarkExists.category?.name}' category.`;
+			if (i.created) {
+				delete i.created;
 			}
+			return i;
+		})
+	];
+}
 
-			fetch(`/api/fetch-metadata`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify({ url })
-			})
-				.then((res) => res.json())
-				.then((data) => {
-					metadata = data?.metadata || { ...defaultFormValues };
+let note = '';
+let error = '';
+let warning = '';
+const loading = writable(false);
 
-					if (!metadata.contentText || !$userSettingsStore?.llm || !$userSettingsStore.llm.enabled)
-						return;
+const onGetMetadata = _.debounce(
+	async (event: Event) => {
+		const target = event.target as HTMLButtonElement;
+		const url = target.value;
+		error = '';
 
-					$loadingTags = true;
+		loading.set(true);
 
-					const generateTagsPromise = generateTags(
-						metadata.contentText,
-						$userSettingsStore?.llm?.ollama
-					);
+		if (!url) {
+			metadata = { ...defaultFormValues };
+			loading.set(false);
+			return;
+		}
+		if (!url.match(validateUrlRegex)) {
+			error = 'Invalid URL';
+			loading.set(false);
+			return;
+		}
 
-					showToast
-						.promise(
-							generateTagsPromise,
-							{
-								loading: 'Generating tags...',
-								success: 'Tags generated!',
-								error: 'Failed to generate tags.'
-							},
-							{
-								position: 'bottom-right'
-							}
-						)
-						.then((tags) => {
-							$loadingTags = false;
-							bookmarkTagsInput.set(tags!.map((t) => ({ value: t, label: t })));
-						})
-						.catch((err) => {
-							$loadingTags = false;
-							console.error(err);
-						});
-				})
-				.catch((err) => {
-					console.error(err);
-					error = 'Failed to fetch metadata';
-				})
-				.finally(() => {
-					loading.set(false);
-				});
-		},
-		1000,
-		{
-			leading: false,
-			trailing: true,
-			maxWait: 1000
+		const bookmarkExists = $page.data.bookmarks.find((b) => b.url === url);
+		if (bookmarkExists) {
+			warning = `Be warned, bookmark with this URL already exists as '${bookmarkExists.title}' in '${bookmarkExists.category?.name}' category.`;
 		}
-	);
+
+		fetch(`/api/fetch-metadata`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ url })
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				metadata = data?.metadata || { ...defaultFormValues };
+
+				if (!metadata.contentText || !$userSettingsStore?.llm || !$userSettingsStore.llm.enabled)
+					return;
+
+				$loadingTags = true;
+
+				const generateTagsPromise = generateTags(
+					metadata.contentText,
+					$userSettingsStore?.llm?.ollama
+				);
+
+				showToast
+					.promise(
+						generateTagsPromise,
+						{
+							loading: 'Generating tags...',
+							success: 'Tags generated!',
+							error: 'Failed to generate tags.'
+						},
+						{
+							position: 'bottom-right'
+						}
+					)
+					.then((tags) => {
+						$loadingTags = false;
+						bookmarkTagsInput.set(tags!.map((t) => ({ value: t, label: t })));
+					})
+					.catch((err) => {
+						$loadingTags = false;
+						console.error(err);
+					});
+			})
+			.catch((err) => {
+				console.error(err);
+				error = 'Failed to fetch metadata';
+			})
+			.finally(() => {
+				loading.set(false);
+			});
+	},
+	1000,
+	{
+		leading: false,
+		trailing: true,
+		maxWait: 1000
+	}
+);
 </script>
 
 <form
@@ -202,6 +203,7 @@
 			formData.set('category', `${defaultCategory?.id}`);
 		}
 		return async ({ update, result }) => {
+			await invalidate('app:main-page');
 			if (result.type === 'success' && result?.data?.bookmark) {
 				// @ts-ignore-next-line
 				addBookmarkToSearchIndex($searchEngine, result.data.bookmark);
@@ -213,8 +215,7 @@
 				closeModal();
 			}
 		};
-	}}
->
+	}}>
 	<div class="w-full">
 		<div class="form-control flex w-full gap-4">
 			<input type="text" class="hidden" name="domain" value={metadata.domain} />
@@ -223,8 +224,7 @@
 				type="text"
 				class="hidden"
 				name="content_published_date"
-				value={metadata.contentPublishedDate}
-			/>
+				value={metadata.contentPublishedDate} />
 
 			{#if error}
 				<div class="alert alert-error">{error}</div>
@@ -243,8 +243,7 @@
 					name="url"
 					value={metadata.url}
 					on:input={onGetMetadata}
-					disabled={$loading}
-				/>
+					disabled={$loading} />
 				{#if metadata.url}
 					<button
 						class="btn btn-primary join-item"
@@ -252,8 +251,7 @@
 							// @ts-ignore-next-line
 							metadata.url = '';
 						}}
-						disabled={!metadata.url || $loading}
-					>
+						disabled={!metadata.url || $loading}>
 						X
 					</button>
 				{/if}
@@ -274,8 +272,7 @@
 									placeholder="Select category..."
 									value={`${defaultCategory.id}`}
 									items={categorySelectItems}
-									class="this-select input input-bordered w-full"
-								/>
+									class="this-select input input-bordered w-full" />
 							</div>
 							<div class="flex w-full flex-1 flex-col">
 								<label for="tags" class="label">Tags</label>
@@ -291,8 +288,7 @@
 									bind:value={$bookmarkTagsInput}
 									bind:loading={$loadingTags}
 									items={$bookmarkTags}
-									class="this-select input input-bordered min-w-full flex-1"
-								>
+									class="this-select input input-bordered min-w-full flex-1">
 									<div slot="item" let:item>
 										{item.created ? 'Create tag: ' : ''}
 										{item.label}
@@ -309,20 +305,17 @@
 										type="radio"
 										name="importance"
 										class="mask mask-star-2 bg-orange-400"
-										value="1"
-									/>
+										value="1" />
 									<input
 										type="radio"
 										name="importance"
 										class="mask mask-star-2 bg-orange-400"
-										value="2"
-									/>
+										value="2" />
 									<input
 										type="radio"
 										name="importance"
 										class="mask mask-star-2 bg-orange-400"
-										value="3"
-									/>
+										value="3" />
 								</div>
 							</div>
 							<div class="flex w-full flex-col">
@@ -345,8 +338,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								metadata.title = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex w-full flex-col">
 						<label for="icon" class="label">Icon</label>
@@ -359,8 +351,7 @@
 								on:input={(event) => {
 									// @ts-ignore-next-line
 									metadata.icon_url = event.target.value;
-								}}
-							/>
+								}} />
 							{#if metadata.iconUrl}
 								<img class="m-auto h-8 w-8 md:ml-8" src={metadata.iconUrl} alt={metadata.title} />
 							{/if}
@@ -375,8 +366,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								metadata.description = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex flex-col gap-2">
 						<label for="main image" class="label">Main image</label>
@@ -384,8 +374,7 @@
 							<img
 								class="m-auto max-h-64 rounded-md"
 								src={metadata.mainImageUrl}
-								alt={metadata.title}
-							/>
+								alt={metadata.title} />
 						{/if}
 						<input
 							type="text"
@@ -395,8 +384,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								metadata.main_image_url = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex w-auto flex-col">
 						<label for="content_text" class="label">Content (text)</label>
@@ -408,8 +396,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								metadata.content_text = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex w-full flex-col">
 						<label for="author" class="label">Author</label>
@@ -418,8 +405,7 @@
 							class="input input-bordered"
 							name="author"
 							value={metadata.author}
-							placeholder="Extracted if possible..."
-						/>
+							placeholder="Extracted if possible..." />
 					</div>
 					<div class="flex w-auto flex-col">
 						<label for="note" class="label">Your note</label>
@@ -431,16 +417,14 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								metadata.note = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 				</div>
 			{/if}
 
 			<button
 				class="btn btn-primary mx-auto my-6 w-full max-w-xs"
-				disabled={$loading || !metadata.url || !metadata.title}>Add</button
-			>
+				disabled={$loading || !metadata.url || !metadata.title}>Add</button>
 		</div>
 	</div>
 </form>
diff --git a/src/lib/components/BookmarkCard/BookmarkCard.svelte b/src/lib/components/BookmarkCard/BookmarkCard.svelte
index 0849610..b3f82c5 100644
--- a/src/lib/components/BookmarkCard/BookmarkCard.svelte
+++ b/src/lib/components/BookmarkCard/BookmarkCard.svelte
@@ -2,11 +2,12 @@
 	import type { Bookmark } from '$lib/types/Bookmark.type';
 
 	import { applyAction, enhance } from '$app/forms';
+	import { invalidate } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { bookmarksStore } from '$lib/stores/bookmarks.store';
 	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 	import { searchEngine } from '$lib/stores/search.store';
 	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
-	import { userSettingsStore } from '$lib/stores/user-settings.store';
 	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
 	import { showToast } from '$lib/utils/show-toast';
 	import {
@@ -37,7 +38,7 @@
 
 <div
 	class={`card relative mb-4 flex h-64 w-full min-w-[20rem] break-inside-avoid flex-col justify-between border border-base-100 bg-base-100 shadow-xl hover:border-secondary ${
-		$userSettingsStore.uiAnimations
+		$page.data.user?.settings.uiAnimations
 			? 'transition duration-300 ease-in-out hover:-translate-y-1 hover:shadow-2xl'
 			: ''
 	}`}
@@ -82,14 +83,18 @@
 				{/if}
 			</div>
 		</div>
-		<div
-			class="badge-xl badge absolute left-1 top-1"
-			style={`border-color: ${bookmark.category.color};`}
-		>
-			<span class="text-opacity-90" style={`_color: ${bookmark.category.color};`}
-				>{bookmark.category.name}</span
+		{#if !bookmark.category}
+				No category? That's odd...
+		{:else}
+			<div
+				class="badge-xl badge absolute left-1 top-1"
+				style={`border-color: ${bookmark.category.color};`}
 			>
-		</div>
+				<span class="text-opacity-90" style={`_color: ${bookmark.category.color};`}
+					>{bookmark.category.name}</span
+				>
+			</div>
+		{/if}
 
 		<form
 			bind:this={importanceForm}
@@ -328,6 +333,7 @@
 							action="/?/deleteBookmark"
 							use:enhance={() => {
 								return async ({ result }) => {
+									await invalidate('app:main-page');
 									if (result.type === 'success') {
 										showToast.success('Bookmark deleted', {
 											position: 'bottom-center'
diff --git a/src/lib/components/BookmarkListItem/BookmarkListItem.svelte b/src/lib/components/BookmarkListItem/BookmarkListItem.svelte
index 13215f3..4c9cd4d 100644
--- a/src/lib/components/BookmarkListItem/BookmarkListItem.svelte
+++ b/src/lib/components/BookmarkListItem/BookmarkListItem.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { applyAction, enhance } from '$app/forms';
+	import { invalidate } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { bookmarksStore } from '$lib/stores/bookmarks.store';
 	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 	import { searchEngine } from '$lib/stores/search.store';
 	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
-	import { userSettingsStore } from '$lib/stores/user-settings.store';
 	import type { Bookmark } from '$lib/types/Bookmark.type';
 	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
 	import { showToast } from '$lib/utils/show-toast';
@@ -36,7 +37,7 @@
 
 <div
 	class={`flex min-h-[6rem] flex-col justify-between gap-1 rounded-md border border-base-content border-opacity-20 p-2 hover:border-secondary  ${
-		$userSettingsStore.uiAnimations
+		$page.data.user?.settings.uiAnimations
 			? 'transition duration-300 ease-in-out hover:-translate-x-1'
 			: ''
 	}`}
@@ -125,31 +126,35 @@
 	</div>
 	<div class="flex justify-between">
 		<div class="flex items-center gap-1">
-			<a
-				href={`/categories/${bookmark.category.slug}`}
-				class="badge badge-sm w-full max-w-[8rem]"
-				style={`border-color: ${bookmark.category.color};`}
-			>
-				<span
-					class="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-opacity-90"
-					style={`_color: ${bookmark.category.color};`}>{bookmark.category.name}</span
-				>
-			</a>
-			<div class="flex w-full gap-1">
-				<span class="font-sans text-xs font-semibold">#</span>
-				{#if bookmark.tags}
-					{#each bookmark.tags as tag (tag.id)}
-						<a
-							href={`/tags/${tag.slug}`}
-							class="link w-full max-w-[8rem] whitespace-nowrap font-sans text-xs hover:text-secondary"
-							>{tag.name}</a
-						>
-					{/each}
-				{/if}
-				<button title="Add new tag" class="link-hover link font-sans text-xs text-gray-400"
-					>+</button
+			{#if !bookmark.category}
+				No category? That's odd...
+				{:else}
+					<a
+					href={`/categories/${bookmark.category.slug}`}
+					class="badge badge-sm w-full max-w-[8rem]"
+					style={`border-color: ${bookmark.category.color};`}
 				>
-			</div>
+					<span
+						class="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-opacity-90"
+						style={`_color: ${bookmark.category.color};`}>{bookmark.category.name}</span
+					>
+				</a>
+				<div class="flex w-full gap-1">
+					<span class="font-sans text-xs font-semibold">#</span>
+					{#if bookmark.tags}
+						{#each bookmark.tags as tag (tag.id)}
+							<a
+								href={`/tags/${tag.slug}`}
+								class="link w-full max-w-[8rem] whitespace-nowrap font-sans text-xs hover:text-secondary"
+								>{tag.name}</a
+							>
+						{/each}
+					{/if}
+					<button title="Add new tag" class="link-hover link font-sans text-xs text-gray-400"
+						>+</button
+					>
+				</div>
+			{/if}
 		</div>
 		<div class="flex items-center gap-1">
 			<form
@@ -306,6 +311,7 @@
 								use:enhance={() => {
 									return async ({ result }) => {
 										if (result.type === 'success') {
+											await invalidate('app:main-page');
 											showToast.success('Bookmark deleted', {
 												position: 'bottom-center'
 											});
diff --git a/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte b/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
index c912d7f..3c05057 100644
--- a/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
+++ b/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
@@ -1,139 +1,140 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import { page } from '$app/stores';
-	import _ from 'lodash';
-	import Select from 'svelte-select';
-	import { writable, type Writable } from 'svelte/store';
+import { enhance } from '$app/forms';
+import { page } from '$app/stores';
+import _ from 'lodash';
+import Select from 'svelte-select';
+import { writable, type Writable } from 'svelte/store';
 
-	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
-	import { searchEngine } from '$lib/stores/search.store';
-	import type { Bookmark } from '$lib/types/Bookmark.type';
-	import { updateBookmarkInSearchIndex } from '$lib/utils/search';
-	import { showToast } from '$lib/utils/show-toast';
+import { invalidate } from '$app/navigation';
+import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
+import { searchEngine } from '$lib/stores/search.store';
+import type { Bookmark } from '$lib/types/Bookmark.type';
+import { updateBookmarkInSearchIndex } from '$lib/utils/search';
+import { showToast } from '$lib/utils/show-toast';
 
-	let form: HTMLFormElement;
-	export let closeModal: () => void;
+let form: HTMLFormElement;
+export let closeModal: () => void;
 
-	let error = '';
-	const loading = writable(false);
-	const bookmark = writable<Partial<Bookmark>>({});
+let error = '';
+const loading = writable(false);
+const bookmark = writable<Partial<Bookmark>>({});
 
-	$: $bookmark = { ...$editBookmarkStore };
+$: $bookmark = { ...$editBookmarkStore };
 
-	const categoryItems = $page.data.categories.map((c) => ({
-		value: `${c.id}`,
-		label: c.name
-	}));
+const categoryItems = $page.data.categories.map((c) => ({
+	value: `${c.id}`,
+	label: c.name
+}));
 
-	const bookmarkTagsInput: Writable<
-		| {
-				value: string;
-				label: string;
-				created?: boolean;
-		  }[]
-		| null
-	> = writable(null);
-
-	$: $bookmarkTagsInput = $bookmark.tags?.map((t) => ({ value: `${t.id}`, label: t.name })) || null;
-
-	const bookmarkTags = writable<
-		{
+const bookmarkTagsInput: Writable<
+	| {
 			value: string;
 			label: string;
 			created?: boolean;
-		}[]
-	>([...$page.data.tags.map((t) => ({ value: `${t.id}`, label: t.name }))]);
-	let tagsInputFilterText: '';
-
-	function handleTagsFilter(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
-		if (
-			!$bookmarkTagsInput?.find((i) => i.label === tagsInputFilterText) &&
-			e.detail.length === 0 &&
-			tagsInputFilterText.length > 0
-		) {
-			const prev = $bookmarkTags.filter((i) => !i.created);
-			$bookmarkTags = [
-				...prev,
-				{ value: tagsInputFilterText, label: tagsInputFilterText, created: true }
-			];
-		}
-	}
+	  }[]
+	| null
+> = writable(null);
 
-	function handleTagsInput(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
-		if (!e.detail) {
-			$bookmarkTags = [];
-			return e;
-		}
-		const lastItemIndex = e.detail.length - 1;
-		e.detail[lastItemIndex] = {
-			...e.detail[lastItemIndex],
-			label: e.detail[lastItemIndex].label.replace(/#/g, ''),
-			value: e.detail[lastItemIndex].value
-		};
+$: $bookmarkTagsInput = $bookmark.tags?.map((t) => ({ value: `${t.id}`, label: t.name })) || null;
 
-		return e;
-	}
+const bookmarkTags = writable<
+	{
+		value: string;
+		label: string;
+		created?: boolean;
+	}[]
+>([...$page.data.tags.map((t) => ({ value: `${t.id}`, label: t.name }))]);
+let tagsInputFilterText: '';
 
-	function handleTagsChange() {
+function handleTagsFilter(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
+	if (
+		!$bookmarkTagsInput?.find((i) => i.label === tagsInputFilterText) &&
+		e.detail.length === 0 &&
+		tagsInputFilterText.length > 0
+	) {
+		const prev = $bookmarkTags.filter((i) => !i.created);
 		$bookmarkTags = [
-			...$bookmarkTags.map((i) => {
-				if (i.label.startsWith('#')) {
-					i.label = i.label.replace(/#/g, '');
-					i.value = i.value.replace(/#/g, '');
-				}
-				if (i.created) {
-					delete i.created;
-				}
-				return i;
-			})
+			...prev,
+			{ value: tagsInputFilterText, label: tagsInputFilterText, created: true }
 		];
 	}
+}
 
-	const onGetMetadata = _.debounce(
-		async (event: Event) => {
-			const validateUrlRegex =
-				/^(?:(?:https?|ftp):\/\/|www\.|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’])/;
-			const target = event.target as HTMLButtonElement;
-			const url = target.value;
-			error = '';
+function handleTagsInput(e: CustomEvent<{ value: string; label: string; created?: boolean }[]>) {
+	if (!e.detail) {
+		$bookmarkTags = [];
+		return e;
+	}
+	const lastItemIndex = e.detail.length - 1;
+	e.detail[lastItemIndex] = {
+		...e.detail[lastItemIndex],
+		label: e.detail[lastItemIndex].label.replace(/#/g, ''),
+		value: e.detail[lastItemIndex].value
+	};
 
-			loading.set(true);
+	return e;
+}
 
-			if (!url.match(validateUrlRegex)) {
-				error = 'Invalid URL';
-				loading.set(false);
-				return;
+function handleTagsChange() {
+	$bookmarkTags = [
+		...$bookmarkTags.map((i) => {
+			if (i.label.startsWith('#')) {
+				i.label = i.label.replace(/#/g, '');
+				i.value = i.value.replace(/#/g, '');
+			}
+			if (i.created) {
+				delete i.created;
 			}
+			return i;
+		})
+	];
+}
 
-			fetch(`/api/fetch-metadata`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify({ url })
-			})
-				.then((res) => res.json())
-				.then((data) => {
-					$bookmark = {
-						...$bookmark,
-						...data?.metadata
-					};
-				})
-				.catch((err) => {
-					console.error(err);
-					error = 'Failed to fetch metadata';
-				})
-				.finally(() => {
-					loading.set(false);
-				});
-		},
-		500,
-		{
-			leading: false,
-			trailing: true,
-			maxWait: 1000
+const onGetMetadata = _.debounce(
+	async (event: Event) => {
+		const validateUrlRegex =
+			/^(?:(?:https?|ftp):\/\/|www\.|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’])/;
+		const target = event.target as HTMLButtonElement;
+		const url = target.value;
+		error = '';
+
+		loading.set(true);
+
+		if (!url.match(validateUrlRegex)) {
+			error = 'Invalid URL';
+			loading.set(false);
+			return;
 		}
-	);
+
+		fetch(`/api/fetch-metadata`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ url })
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				$bookmark = {
+					...$bookmark,
+					...data?.metadata
+				};
+			})
+			.catch((err) => {
+				console.error(err);
+				error = 'Failed to fetch metadata';
+			})
+			.finally(() => {
+				loading.set(false);
+			});
+	},
+	500,
+	{
+		leading: false,
+		trailing: true,
+		maxWait: 1000
+	}
+);
 </script>
 
 {#if $bookmark?.id}
@@ -142,8 +143,9 @@
 		method="POST"
 		action="/?/updateBookmark"
 		use:enhance={() =>
-			({ update, result }) => {
+			async ({ update, result }) => {
 				if (result.type === 'success') {
+					await invalidate('app:main-page');
 					showToast.success('Bookmark updated', {
 						position: 'bottom-center'
 					});
@@ -162,8 +164,7 @@
 				}
 				closeModal();
 				update();
-			}}
-	>
+			}}>
 		<input type="text" class="hidden" name="id" value={$bookmark.id} />
 
 		<div class="w-full">
@@ -174,8 +175,7 @@
 					type="text"
 					class="hidden"
 					name="content_published_date"
-					value={$bookmark.contentPublishedDate}
-				/>
+					value={$bookmark.contentPublishedDate} />
 
 				{#if error}
 					<div class="alert alert-error">{error}</div>
@@ -188,8 +188,7 @@
 						name="url"
 						value={$bookmark.url}
 						on:input={onGetMetadata}
-						disabled={$loading}
-					/>
+						disabled={$loading} />
 				</div>
 
 				{#if $loading}
@@ -207,8 +206,7 @@
 										items={categoryItems}
 										value={`${$bookmark.category?.id}`}
 										placeholder={'Select category'}
-										class="this-select input input-bordered w-full md:min-w-28"
-									/>
+										class="this-select input input-bordered w-full md:min-w-28" />
 								{/if}
 							</div>
 							<div class="flex w-full flex-1 flex-col">
@@ -224,8 +222,7 @@
 									bind:filterText={tagsInputFilterText}
 									bind:value={$bookmarkTagsInput}
 									items={$bookmarkTags}
-									class="this-select input input-bordered min-w-full flex-1"
-								>
+									class="this-select input input-bordered min-w-full flex-1">
 									<div slot="item" let:item>
 										{item.created ? 'Create tag: ' : ''}
 										{item.label}
@@ -242,29 +239,25 @@
 										name="importance"
 										class="rating-hidden"
 										value=""
-										checked={!$bookmark.importance}
-									/>
+										checked={!$bookmark.importance} />
 									<input
 										type="radio"
 										name="importance"
 										class="mask mask-star-2 bg-orange-400"
 										value="1"
-										checked={$bookmark.importance === 1}
-									/>
+										checked={$bookmark.importance === 1} />
 									<input
 										type="radio"
 										name="importance"
 										class="mask mask-star-2 bg-orange-400"
 										value="2"
-										checked={$bookmark.importance === 2}
-									/>
+										checked={$bookmark.importance === 2} />
 									<input
 										type="radio"
 										name="importance"
 										class="mask mask-star-2 bg-orange-400"
 										value="3"
-										checked={$bookmark.importance === 3}
-									/>
+										checked={$bookmark.importance === 3} />
 								</div>
 							</div>
 							<div class="flex w-full flex-col">
@@ -275,8 +268,7 @@
 										type="checkbox"
 										name="flagged"
 										class="checkbox-error checkbox"
-										checked={!!$bookmark.flagged}
-									/>
+										checked={!!$bookmark.flagged} />
 								</label>
 							</div>
 						</div>
@@ -292,8 +284,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								$bookmark.title = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex w-full flex-col">
 						<label for="icon" class="label">Icon</label>
@@ -306,8 +297,7 @@
 								on:input={(event) => {
 									// @ts-ignore-next-line
 									$bookmark.icon_url = event.target.value;
-								}}
-							/>
+								}} />
 							{#if $bookmark.iconUrl}
 								<img class="m-auto h-8 w-8 md:ml-8" src={$bookmark.iconUrl} alt={$bookmark.title} />
 							{/if}
@@ -322,8 +312,7 @@
 							on:change={(event) => {
 								// @ts-ignore-next-line
 								$bookmark.description = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex flex-col gap-2">
 						<label for="main image" class="label">Main image</label>
@@ -331,8 +320,7 @@
 							<img
 								class="m-auto max-h-64 rounded-md"
 								src={$bookmark.mainImageUrl}
-								alt={$bookmark.title}
-							/>
+								alt={$bookmark.title} />
 						{/if}
 						<input
 							type="text"
@@ -342,8 +330,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								$bookmark.main_image_url = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex w-auto flex-col">
 						<label for="content_text" class="label">Content (text)</label>
@@ -355,8 +342,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								bookmark.content_text = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex w-full flex-col">
 						<label for="author" class="label">Author</label>
@@ -369,8 +355,7 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								$bookmark.author = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 					<div class="flex w-auto flex-col">
 						<label for="note" class="label">Your note</label>
@@ -382,15 +367,13 @@
 							on:input={(event) => {
 								// @ts-ignore-next-line
 								$bookmark.note = event.target.value;
-							}}
-						/>
+							}} />
 					</div>
 				</div>
 
 				<button
 					class="btn btn-primary mx-auto my-6 w-full max-w-xs"
-					disabled={$loading || !$bookmark.url || !$bookmark.title}>Save</button
-				>
+					disabled={$loading || !$bookmark.url || !$bookmark.title}>Save</button>
 			</div>
 		</div>
 	</form>
diff --git a/src/lib/components/EditCategoryForm/EditCategoryForm.svelte b/src/lib/components/EditCategoryForm/EditCategoryForm.svelte
index 5c688a5..f7bd698 100644
--- a/src/lib/components/EditCategoryForm/EditCategoryForm.svelte
+++ b/src/lib/components/EditCategoryForm/EditCategoryForm.svelte
@@ -16,9 +16,9 @@
 	let form: HTMLFormElement;
 	export let closeModal: () => void;
 
-	const categoriesOptions = writable<{ value: string; label: string }[]>([
+	const categoriesOptions = writable<{ value: number; label: string }[]>([
 		{
-			value: 'null',
+			value: 0,
 			label: 'No parent'
 		}
 	]);
@@ -26,7 +26,7 @@
 	$: {
 		$categoriesOptions = [
 			{
-				value: 'null',
+				value: 0,
 				label: 'No parent'
 			},
 			...$page.data.categories
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 704e257..7d8e3f4 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,7 +1,8 @@
 import type { LayoutServerLoad } from './$types';
 import { db } from '$lib/database/db';
 import {
-    getBookmarksByUserId, getBookmarksCountForUser
+	getBookmarksByUserId,
+	getBookmarksCountForUser
 } from '$lib/database/repositories/Bookmark.repository';
 import { fetchUserCategoryAndTags, getUserCount } from '$lib/database/repositories/User.repository';
 import { searchIndexKeys } from '$lib/utils/search';
@@ -10,7 +11,9 @@ import type { Category } from '$lib/types/Category.type';
 
 import type { Bookmark, BookmarkForIndex } from '$lib/types/Bookmark.type';
 import type { Tag } from '$lib/types/Tag.type';
-export const load = (async ({ locals, url }) => {
+export const load = (async ({ locals, url, depends }) => {
+	depends('app:main-page');
+
 	const userCount = await getUserCount();
 	const noUsersFound = userCount === 0;
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e47f83..47c1720 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,30 +1,53 @@
+<style>
+/* SvelteSelect styling fix */
+:global(.this-select) {
+	border: 0 !important;
+	border-color: rgba(209, 213, 219, 0.5) !important;
+	max-width: 10rem;
+	background: oklch(var(--b1) / var(--tw-bg-opacity, 1)) !important;
+}
+:global(.svelte-select-list) {
+	background-color: oklch(var(--b1) / var(--tw-bg-opacity, 1)) !important;
+	box-shadow: 0 0 0 1px rgba(209, 213, 219, 0.5) !important;
+}
+:global(.svelte-select-list .list-item .item.hover) {
+	background-color: oklch(var(--s) / var(--tw-bg-opacity, 1)) !important;
+}
+:global(.svelte-select .value-container .multi-item) {
+	background-color: oklch(var(--nc)) !important;
+}
+:global(.svelte-select .value-container .multi-item .multi-item-clear svg) {
+	color: oklch(var(--pc)) !important;
+}
+</style>
+
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import { page } from '$app/stores';
-	import AddBookmarkModal from '$lib/components/AddBookmarkModal/AddBookmarkModal.svelte';
-	import AddCategoryModal from '$lib/components/AddCategoryModal/AddCategoryModal.svelte';
-	import CategoryTree from '$lib/components/CategoryTree/CategoryTree.svelte';
-	import EditBookmarkModal from '$lib/components/EditBookmarkModal/EditBookmarkModal.svelte';
-	import EditCategoryModal from '$lib/components/EditCategoryModal/EditCategoryModal.svelte';
-	import Footer from '$lib/components/Footer/Footer.svelte';
-	import ShowBookmarkModal from '$lib/components/ShowBookmarkModal/ShowBookmarkModal.svelte';
-	import ThemeSwitch from '$lib/components/ThemeSwitch/ThemeSwitch.svelte';
-	import { searchedValue } from '$lib/stores/search.store';
-	import type { Category } from '$lib/types/Category.type';
-	import { buildCategoryTree } from '$lib/utils/build-category-tree';
-	import { ToastNode } from '$lib/utils/show-toast';
-	import { IconMenu, IconX } from '@tabler/icons-svelte';
-	import { writable } from 'svelte/store';
-	import '../app.css';
+import { enhance } from '$app/forms';
+import { page } from '$app/stores';
+import AddBookmarkModal from '$lib/components/AddBookmarkModal/AddBookmarkModal.svelte';
+import AddCategoryModal from '$lib/components/AddCategoryModal/AddCategoryModal.svelte';
+import CategoryTree from '$lib/components/CategoryTree/CategoryTree.svelte';
+import EditBookmarkModal from '$lib/components/EditBookmarkModal/EditBookmarkModal.svelte';
+import EditCategoryModal from '$lib/components/EditCategoryModal/EditCategoryModal.svelte';
+import Footer from '$lib/components/Footer/Footer.svelte';
+import ShowBookmarkModal from '$lib/components/ShowBookmarkModal/ShowBookmarkModal.svelte';
+import ThemeSwitch from '$lib/components/ThemeSwitch/ThemeSwitch.svelte';
+import { searchedValue } from '$lib/stores/search.store';
+import type { Category } from '$lib/types/Category.type';
+import { buildCategoryTree } from '$lib/utils/build-category-tree';
+import { ToastNode } from '$lib/utils/show-toast';
+import { IconMenu, IconX } from '@tabler/icons-svelte';
+import { writable } from 'svelte/store';
+import '../app.css';
 
-	const categoriesTree = writable<(Category & { children?: Category[] })[] | []>([]);
-	const user = $page.data.user;
+const categoriesTree = writable<(Category & { children?: Category[] })[] | []>([]);
+const user = $page.data.user;
 
-	$: {
-		const categories = $page.data.categories;
+$: {
+	const categories = $page.data.categories;
 
-		categoriesTree.set(buildCategoryTree(categories));
-	}
+	categoriesTree.set(buildCategoryTree(categories));
+}
 </script>
 
 <div class="flex min-h-screen flex-col">
@@ -42,8 +65,7 @@
 						type="text"
 						placeholder="Search"
 						bind:value={$searchedValue}
-						class={`input input-bordered w-full ${$searchedValue ? 'rounded-r-none' : ''}`}
-					/>
+						class={`input input-bordered w-full ${$searchedValue ? 'rounded-r-none' : ''}`} />
 					{#if $searchedValue}
 						<button class="btn join-item" on:click={() => ($searchedValue = '')}>
 							<IconX />
@@ -52,7 +74,7 @@
 				</div>
 			</div>
 			<div class="flex-none gap-2 md:mr-6">
-				<ThemeSwitch {user} />
+				<ThemeSwitch user={user} />
 				{#if !user}
 					<ul class="menu menu-horizontal px-1">
 						<li><a href="/signup">Sign up</a></li>
@@ -71,8 +93,7 @@
 						</label>
 						<ul
 							tabindex="-1"
-							class="menu dropdown-content menu-sm mt-3 w-auto gap-2 rounded-box bg-base-100 p-2 shadow"
-						>
+							class="menu dropdown-content menu-sm mt-3 w-auto gap-2 rounded-box bg-base-100 p-2 shadow">
 							<li>
 								<a href="/profile" class="justify-between">
 									Profile
@@ -97,8 +118,7 @@
 						<label
 							for="my-drawer-2"
 							class="btn btn-primary drawer-button fixed bottom-4 right-4 lg:hidden"
-							><IconMenu /></label
-						>
+							><IconMenu /></label>
 					</div>
 					<div class="min-w-screen drawer-side min-h-full">
 						<div class="flex h-14 flex-col items-end justify-center">
@@ -114,8 +134,7 @@
 									<h3 class="text-xl">Categories</h3>
 									<button
 										class="link-hover link ml-auto opacity-50 hover:opacity-90"
-										onclick="addCategoryModal.showModal()">➕</button
-									>
+										onclick="addCategoryModal.showModal()">➕</button>
 								</div>
 								<div class="flex flex-col p-2">
 									<CategoryTree categories={$categoriesTree} />
@@ -127,8 +146,7 @@
 									{#each $page.data.tags as tag (tag.id)}
 										{#if tag.bookmarks?.length > 0}
 											<a href={`/tags/${tag.slug}`} class="link m-1 hover:text-secondary"
-												>#{tag.name}</a
-											>
+												>#{tag.name}</a>
 										{/if}
 									{/each}
 								</div>
@@ -159,28 +177,4 @@
 <ToastNode
 	toastOptions={{
 		position: 'bottom-right'
-	}}
-/>
-
-<style>
-	/* SvelteSelect styling fix */
-	:global(.this-select) {
-		border: 0 !important;
-		border-color: rgba(209, 213, 219, 0.5) !important;
-		max-width: 10rem;
-		background: oklch(var(--b1) / var(--tw-bg-opacity, 1)) !important;
-	}
-	:global(.svelte-select-list) {
-		background-color: oklch(var(--b1) / var(--tw-bg-opacity, 1)) !important;
-		box-shadow: 0 0 0 1px rgba(209, 213, 219, 0.5) !important;
-	}
-	:global(.svelte-select-list .list-item .item.hover) {
-		background-color: oklch(var(--s) / var(--tw-bg-opacity, 1)) !important;
-	}
-	:global(.svelte-select .value-container .multi-item) {
-		background-color: oklch(var(--nc)) !important;
-	}
-	:global(.svelte-select .value-container .multi-item .multi-item-clear svg) {
-		color: oklch(var(--pc)) !important;
-	}
-</style>
+	}} />
diff --git a/src/routes/settings/+page.server.ts b/src/routes/settings/+page.server.ts
index dda4fb8..954ffb6 100644
--- a/src/routes/settings/+page.server.ts
+++ b/src/routes/settings/+page.server.ts
@@ -22,16 +22,43 @@ export const actions = {
 			};
 		}
 
-		const data = await request.formData();
-		const settings = JSON.parse(data.get('settings') as string) as UserSettings;
+		const settings = await request.formData();
 
-		const updatedSettings = await updateUserSettings(owner, settings)
+		const mappedSettings: UserSettings = {
+			theme: settings.get('theme') as UserSettings['theme'],
+			uiAnimations: settings.get('uiAnimations') === 'on',
+			llm: {
+				enabled: settings.get('llmEnabled') === 'on',
+				provider: settings.get('llmProvider') as UserSettings['llm']['provider'],
+				ollama: {
+					url: settings.get('llmOllamaUrl') as string,
+					model: settings.get('llmOllamaModel') as string,
+					summarize: {
+						enabled: settings.get('llmOllamaSummarizeEnabled') === 'on',
+						system: settings.get('llmOllamaSystemmsg') as string
+					},
+					generateTags: {
+						enabled: settings.get('llmOllamaGenerateTagsEnabled') === 'on',
+						system: settings.get('llmOllamaSystemmsg') as string
+					}
+				},
+				openai: {
+					apiKey: settings.get('llmOpenaiApikey') as string
+				}
+			}
+		};
+
+		console.log('Received mappedSettings:', JSON.stringify(mappedSettings, null, 2));
+
+		const updatedSettings = await updateUserSettings(owner, mappedSettings)
 			.then(({ settings }) => settings)
 			.catch((err) => {
 				console.error('Error updating user settings. Details:', JSON.stringify(err, null, 2));
 				return null;
 			});
 
+		console.log('Updated settings:', JSON.stringify(updatedSettings, null, 2));
+
 		if (!updatedSettings) {
 			return {
 				success: false,