diff --git a/package-lock.json b/package-lock.json
index 79b24748..104e0cf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"flexsearch": "^0.7.31",
-				"marked": "^4.2.2",
-				"svelte-spotlight": "^1.0.4"
+				"marked": "^4.2.2"
 			},
 			"devDependencies": {
 				"@algolia/client-search": "^4.14.1",
@@ -4043,11 +4042,6 @@
 				"sourcemap-codec": "^1.4.8"
 			}
 		},
-		"node_modules/svelte-spotlight": {
-			"version": "1.0.12",
-			"resolved": "https://registry.npmjs.org/svelte-spotlight/-/svelte-spotlight-1.0.12.tgz",
-			"integrity": "sha512-1DbCtTef4Yhn7OBxg6mq0KclbldfN7DBwe8Hu1XahJ0eGz+i24Yc+HXF5TNBjpLRtNw2ogWFLNbmLaoW2RYL5g=="
-		},
 		"node_modules/tailwindcss": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -7360,11 +7354,6 @@
 				}
 			}
 		},
-		"svelte-spotlight": {
-			"version": "1.0.12",
-			"resolved": "https://registry.npmjs.org/svelte-spotlight/-/svelte-spotlight-1.0.12.tgz",
-			"integrity": "sha512-1DbCtTef4Yhn7OBxg6mq0KclbldfN7DBwe8Hu1XahJ0eGz+i24Yc+HXF5TNBjpLRtNw2ogWFLNbmLaoW2RYL5g=="
-		},
 		"tailwindcss": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
diff --git a/package.json b/package.json
index 8092169b..3c7b5cb7 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
 	"type": "module",
 	"dependencies": {
 		"flexsearch": "^0.7.31",
-		"marked": "^4.2.2",
-		"svelte-spotlight": "^1.0.4"
+		"marked": "^4.2.2"
 	}
 }
diff --git a/src/lib/search/client/components/SearchModal.svelte b/src/lib/search/client/components/SearchModal.svelte
index 926ba16d..2fde662c 100644
--- a/src/lib/search/client/components/SearchModal.svelte
+++ b/src/lib/search/client/components/SearchModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import SvelteSpotlight from 'svelte-spotlight/SvelteSpotlight.svelte';
+	import SvelteSpotlight from './spotlight/SvelteSpotlight.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import type { SearchResult } from '../../types';
 
diff --git a/src/lib/search/client/components/spotlight/SvelteSpotlight.svelte b/src/lib/search/client/components/spotlight/SvelteSpotlight.svelte
new file mode 100644
index 00000000..1e7b2762
--- /dev/null
+++ b/src/lib/search/client/components/spotlight/SvelteSpotlight.svelte
@@ -0,0 +1,376 @@
+<script lang="ts">
+	// local copy of the svelte-spotlight component which fixes the
+	// overflow: auto styles being set on the body element
+	// TODO: remove when this is fixed upstream and use the svelte-spotlight package
+	import { fade, scale } from 'svelte/transition';
+	import { browser } from '$app/env';
+	import {
+		type AnimationFunctions,
+		type AnimationConfig,
+		scrollIntoViewIfNeeded,
+		isCombo,
+		type Slots,
+		type Combo
+	} from './index';
+	import { createEventDispatcher } from 'svelte';
+	import type { ConditionalKeys } from 'type-fest';
+
+	type OverlayTransition = $$Generic<AnimationFunctions>;
+	type ModalInTransition = $$Generic<AnimationFunctions>;
+	type ModalOutTransition = $$Generic<AnimationFunctions>;
+	type R = $$Generic<Record<string, any>>;
+	type GK = $$Generic<ConditionalKeys<R, any[]>>;
+	type GroupedResult = R[GK][number];
+	type Result = GroupedResult extends string ? R : GroupedResult;
+
+	type $$Slots = Slots<R, Result>;
+
+	const dispatch = createEventDispatcher<{
+		/** Event fired when a result is either clicked or selected with the Enter key. Return the selected item */
+		select: Result;
+		/** Event fired when user hits the keyboard to navigate inside the spotlight. Return the preselected item */
+		navigate: Result;
+		/** Event fired when the user is typing inside the search input. Return the query */
+		query: string;
+	}>();
+
+	let input: HTMLInputElement;
+	let content: HTMLDivElement;
+	let clientHeight = 0;
+	let headerHeight = 0;
+	let footerHeight = 0;
+
+	/** The keyboard combo that will open the spotlight */
+	export let combo: Combo =
+		browser && !/mac/i.test(navigator.platform)
+			? { key: 'k', ctrlKey: true }
+			: { key: 'k', metaKey: true };
+
+	/** Max search input length */
+	export let maxLength = 50;
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	export let overlayTransition: OverlayTransition = fade;
+	export let overlayTransitionConfig: AnimationConfig<OverlayTransition> = { duration: 200 };
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	//@ts-ignore
+	export let modalTransitionIn: ModalInTransition = scale;
+	export let modalTransitionInConfig: AnimationConfig<ModalInTransition> = {
+		start: 0.95
+	};
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	//@ts-ignore
+	export let modalTransitionOut: ModalOutTransition = scale;
+	export let modalTransitionOutConfig: AnimationConfig<ModalOutTransition> = {
+		start: 0.95
+	};
+	/** Whether to spotlight is open */
+	export let isOpen = false;
+	/** A flat array of result or a one level deep array of grouped results */
+	export let results: R[] = [];
+	/** If the results are grouped, you want to define the key of the nested results */
+	export let groupResultsKey: GK = undefined;
+	/** The key to find the ID of a group in order to keyed the each loop */
+	export let groupIdKey: ConditionalKeys<R, string | number> = undefined;
+	/** The key to find the ID of a result in order to keyed the each loop */
+	export let resultIdKey: GroupedResult extends string
+		? ConditionalKeys<R, string | number>
+		: ConditionalKeys<GroupedResult, string | number>;
+	/** Whether to clean query on close. This option also clean the preselected result and the selected result */
+	export let cleanQueryOnClose = false;
+	/** The top distance where the spotlight will be fixed */
+	export let distanceFromTop = 100;
+	/** The input placeholder */
+	export let searchPlaceholder = 'Search';
+	/** The current value of the search input  */
+	export let query = '';
+	/** The current result that is preselected by the keyboard navigation  */
+	export let preSelectedResult = undefined;
+	/** The current selected result either after hitting "Enter" or by clicking on it */
+	export let selectedResult = undefined;
+	/** Whether the search input is focused */
+	export let isFocused = false;
+	/** The overlay class */
+	export let overlayClass = '';
+	/** The modal class */
+	export let modalClass = '';
+	/** The modal header class */
+	export let headerClass = '';
+	/** The input class */
+	/** The modal content container class */
+	export let inputClass = '';
+	export let contentClass = '';
+	/** The modal results container class */
+	export let resultsClass = '';
+	/** The modal footer class */
+	export let footerClass = '';
+	/** HTML element type for the the result list */
+	export let listElement = 'ul';
+	/** HTML element type for the result element */
+	export let resultElement = 'li';
+	/** Optional header center component to replace the default input. We don't use a slot here because it's impossible to define a conditional slot, and  you don't want to display this component all the time. It's useful if you want to simulate some sort of navigation inside the spotlight component */
+	export let headerCenterComponent: any = undefined;
+	/** Optional content component to replace the default result list. We don't use a slot here because it's impossible to define a conditional slot, and  you don't want to display this component all the time. It's useful if you want to simulate some sort of navigation inside the spotlight component */
+	export let contentComponent: any = undefined;
+
+	const toggle = () => (isOpen = !isOpen);
+	const setFocus = () => (isFocused = true);
+	const resetFocus = () => (isFocused = false);
+	const onIntroStart = () => {
+		input?.focus();
+		if (browser) document.body.style.overflow = 'hidden';
+		if (browser) document.body.style.height = '100%';
+	};
+	const onOutroEnd = () => {
+		input?.blur();
+		if (browser) document.body.style.overflow = 'visible';
+		if (browser) document.body.style.height = 'unset';
+		if (cleanQueryOnClose) {
+			query = '';
+			preSelectedResult = undefined;
+			selectedResult = undefined;
+		}
+	};
+
+	const onKeyDown = (e: KeyboardEvent) => {
+		if (isOpen && e.key === 'Escape') {
+			isOpen = false;
+			return e.preventDefault();
+		} else if (isCombo(e, combo)) {
+			isOpen = true;
+			return e.preventDefault();
+		}
+		if (!noResults && isOpen && content) {
+			const options = Array.from(content.querySelectorAll('li'));
+			const current = options.findIndex(
+				(element) => element.id === preSelectedResult?.[resultIdKey]
+			);
+			const selectResult = (position: number) => {
+				const element = options[position];
+				if (groupIdKey) {
+					const group = results.find((group) => group[groupIdKey] === element.parentElement.id);
+					preSelectedResult = group[groupResultsKey].find(
+						(result) => result[resultIdKey] === element.id
+					);
+				} else {
+					preSelectedResult = results[position];
+				}
+				scrollIntoViewIfNeeded(element, content);
+			};
+
+			if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				selectResult(current === -1 || current === options.length - 1 ? 0 : current + 1);
+			}
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				selectResult(current <= 0 ? options.length - 1 : current - 1);
+			}
+		}
+		if (e.key === 'Enter' && !!preSelectedResult && isOpen) {
+			e.preventDefault();
+			select(preSelectedResult);
+		}
+	};
+
+	const select = (item) => {
+		selectedResult = item;
+		dispatch('select', item);
+	};
+
+	$: maxHeight = clientHeight - distanceFromTop * 2 - headerHeight - footerHeight;
+	$: noResults = groupResultsKey
+		? results.every((result) => result[groupResultsKey].length === 0)
+		: results.length === 0;
+
+	$: dispatch('query', query);
+	$: dispatch('navigate', preSelectedResult);
+
+	const listProps = (id = 'sl-content') => ({
+		// TODO add some attribute for better a11y
+		role: 'listbox',
+		'aria-labelledby': 'sv-sl',
+		id,
+		class: 'sl-results-list'
+	});
+	const optionProps = (id, selected) => ({
+		// TODO add some attribute for better a11y
+		'aria-labelledby': 'sv-sl',
+		role: 'option',
+		'aria-selected': selected,
+		id,
+		class: 'sl-results-item'
+	});
+
+	$: defaultProps = {
+		selectedResult,
+		preSelectedResult,
+		noResults,
+		query
+	};
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#key isOpen}
+	{#if isOpen}
+		<div
+			bind:clientHeight
+			on:click={toggle}
+			class={`sl-overlay ${overlayClass}`}
+			transition:overlayTransition={overlayTransitionConfig}
+		/>
+		<div
+			role="combobox"
+			aria-expanded={isOpen}
+			aria-haspopup="listbox"
+			aria-labelledby="sv-sl"
+			aria-owns="sl-content"
+			aria-label="Spotlight"
+			style:top={`${distanceFromTop}px`}
+			class={`sl-modal ${modalClass}`}
+			on:introstart={onIntroStart}
+			on:outroend={onOutroEnd}
+			in:modalTransitionIn={modalTransitionInConfig}
+			out:modalTransitionOut={modalTransitionOutConfig}
+		>
+			<header bind:clientHeight={headerHeight} class={`sl-header ${headerClass}`}>
+				<slot name="headerLeft" {...defaultProps} />
+
+				{#if headerCenterComponent}
+					<svelte:component this={headerCenterComponent} {...defaultProps} />
+				{:else}
+					<input
+						aria-autocomplete="list"
+						aria-labelledby="sv-sl"
+						id="sl-input"
+						autocomplete="off"
+						autocorrect="off"
+						autocapitalize="off"
+						spellcheck="false"
+						onFocus={setFocus}
+						onBlur={resetFocus}
+						type="text"
+						bind:value={query}
+						bind:this={input}
+						role="search"
+						aria-label={searchPlaceholder}
+						aria-controls="sl-content"
+						placeholder={searchPlaceholder}
+						class={`sl-input ${inputClass}`}
+						maxlength={maxLength}
+					/>
+				{/if}
+				<slot name="headerRight" {...defaultProps} />
+			</header>
+			<div class={`sl-content ${contentClass}`}>
+				<div
+					bind:this={content}
+					class={`sl-results ${resultsClass}`}
+					style:max-height={`${maxHeight}px`}
+					{...defaultProps}
+				>
+					{#if headerCenterComponent}
+						<svelte:component this={contentComponent} {...defaultProps} />
+					{:else}
+						<slot name="contentTop" {...defaultProps} />
+						{#if query.length === 0 && $$slots.emptySearch}
+							<slot name="emptySearch" {...defaultProps} />
+						{:else if noResults}
+							<slot name="noResults" {...defaultProps} />
+						{:else if !noResults}
+							{#if groupResultsKey}
+								{#each results as group, groupIndex (group[groupIdKey])}
+									{@const groupedResults = group[groupResultsKey]}
+									{#if groupedResults.length}
+										<slot name="groupHeader" {...defaultProps} {group} {groupIndex} />
+										<svelte:element this={listElement} {...listProps(group[groupIdKey])}>
+											{#each groupedResults as result, index (result[resultIdKey])}
+												{@const selected = preSelectedResult?.[resultIdKey] === result[resultIdKey]}
+												<svelte:element
+													this={resultElement}
+													{...optionProps(result[resultIdKey], selected)}
+													on:click={() => select(result)}
+												>
+													<slot name="result" {...defaultProps} {result} {index} {selected} />
+												</svelte:element>
+											{/each}
+										</svelte:element>
+									{/if}
+								{/each}
+							{:else}
+								<svelte:element this={listElement} {...listProps()}>
+									{#each results as result, index (result[resultIdKey])}
+										{@const selected = preSelectedResult?.[resultIdKey] === result[resultIdKey]}
+										<svelte:element
+											this={resultElement}
+											{...optionProps(result[resultIdKey], selected)}
+											on:click={() => select(result)}
+										>
+											<slot name="result" {...defaultProps} {result} {index} {selected} />
+										</svelte:element>
+									{/each}
+								</svelte:element>
+							{/if}
+						{/if}
+						<slot name="contentBottom" {...defaultProps} />
+					{/if}
+				</div>
+				<slot name="sidePanel" {...defaultProps} {maxHeight} />
+			</div>
+			<footer bind:clientHeight={footerHeight} class={`sl-footer ${footerClass}`}>
+				<slot name="footer" {...defaultProps} />
+			</footer>
+		</div>
+	{/if}
+{/key}
+
+<slot name="trigger" {...defaultProps} {toggle} />
+
+<style>
+	.sl-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100vh;
+		width: 100vw;
+		background: black;
+		opacity: 0.4;
+		display: flex;
+		z-index: 100;
+		justify-content: center;
+	}
+
+	.sl-modal {
+		z-index: 110;
+		position: fixed;
+		height: fit-content;
+		margin-left: auto;
+		margin-right: auto;
+		left: 0;
+		right: 0;
+		display: flex;
+		flex-flow: row wrap;
+	}
+
+	.sl-header {
+		display: flex;
+		width: 100%;
+	}
+	.sl-footer {
+		width: 100%;
+	}
+	.sl-input {
+		flex: 1;
+	}
+	.sl-content {
+		flex: 1;
+		width: 100%;
+		max-width: 100%;
+		display: flex;
+	}
+	.sl-results {
+		flex: 1;
+		overflow-y: auto;
+	}
+</style>
diff --git a/src/lib/search/client/components/spotlight/index.ts b/src/lib/search/client/components/spotlight/index.ts
new file mode 100644
index 00000000..18008e2b
--- /dev/null
+++ b/src/lib/search/client/components/spotlight/index.ts
@@ -0,0 +1,80 @@
+import type {
+	fade,
+	fly,
+	scale,
+	blur,
+	slide,
+	BlurParams,
+	CrossfadeParams,
+	FadeParams,
+	ScaleParams,
+	SlideParams
+} from 'svelte/transition';
+import type { RequireExactlyOne } from 'type-fest';
+
+export type Fade = typeof fade;
+export type Fly = typeof fly;
+export type Scale = typeof scale;
+export type Blur = typeof blur;
+export type Slide = typeof slide;
+
+export type AnimationFunctions = Fade | Fly | Scale | Blur | Slide;
+export type AnimationConfig<T extends AnimationFunctions> = Parameters<T>[1];
+export type AnimatingParams = FadeParams & ScaleParams & CrossfadeParams & SlideParams & BlurParams;
+export const scrollIntoViewIfNeeded = (target: HTMLLIElement, container: HTMLDivElement) => {
+	const top = target.offsetTop - container.offsetTop;
+	if (
+		top + target.offsetTop / 2 > container.scrollTop + container.clientHeight ||
+		top < container.scrollTop
+	)
+		target.scrollIntoView({ block: 'center', inline: 'center' });
+};
+
+export const isCombo = <T extends Combo>(e: KeyboardEvent, combo: T) => {
+	if (typeof combo === 'boolean') {
+		return;
+	} else {
+		return combo?.key === e.key && ((combo?.metaKey && e.metaKey) || (combo?.ctrlKey && e.ctrlKey));
+	}
+};
+
+type defaultSlotProps<Result> = {
+	selectedResult: Result;
+	preSelectedResult: Result;
+	noResults: boolean;
+	query: string;
+};
+export type Slots<R, Result> = {
+	headerLeft: defaultSlotProps<Result>;
+	headerRight: defaultSlotProps<Result>;
+	contentTop: defaultSlotProps<Result>;
+	contentBottom: defaultSlotProps<Result>;
+	emptySearch: defaultSlotProps<Result>;
+	noResults: defaultSlotProps<Result>;
+	groupHeader: defaultSlotProps<Result> & {
+		group: R;
+		groupIndex: number;
+	};
+	result: defaultSlotProps<Result> & {
+		result: Result;
+		selected: boolean;
+		index: number;
+	};
+	sidePanel: defaultSlotProps<Result> & {
+		maxHeight: number;
+	};
+	trigger: defaultSlotProps<Result> & {
+		toggle: () => void;
+	};
+	footer: defaultSlotProps<Result>;
+};
+
+export type Combo =
+	| (RequireExactlyOne<
+			{
+				metaKey?: boolean;
+				ctrlKey?: boolean;
+			},
+			'ctrlKey' | 'metaKey'
+	  > & { key: string })
+	| boolean;
diff --git a/src/routes/docs/[...12]exception-handler.md b/src/routes/docs/[...12]exception-handler.md
index 0d110851..cfe00071 100644
--- a/src/routes/docs/[...12]exception-handler.md
+++ b/src/routes/docs/[...12]exception-handler.md
@@ -76,7 +76,7 @@ public override void Configure()
 ```
 Do note however that by doing so, you are effectively disabling the automatic error responses sent by the library. It would then be the responsibility of your custom exception handling middleware to handle the exceptions and send appropriate responses to the requesting client.
 
-The the thrown exception type is **ValidationFailureException**, which has a property called **Failures** where you can get access to a collection of **ValidationFailure** objects to check what sort of validation failures occurred.
+The thrown exception type is **ValidationFailureException**, which has a property called **Failures** where you can get access to a collection of **ValidationFailure** objects to check what sort of validation failures occurred.
 
 ### The Better Approach
 
diff --git a/src/routes/docs/[...13]exception-handler..md b/src/routes/docs/[...13]exception-handler..md
deleted file mode 100644
index cfe00071..00000000
--- a/src/routes/docs/[...13]exception-handler..md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: Exception Handler
-description: FastEndpoints has a built-in exception handler to help log uncaught errors in a convenient manner.
----
-
-# {$frontmatter.title}
-
-## Unhandled Exception Handler
-
-The library ships with a default exception handler middleware you can use to log the exception details on the server and return a user-friendly HTTP 500 response to the requesting client.
-
-## Example JSON Response:
-
-```json | title=json
-{
-	"Status": "Internal Server Error!",
-	"Code": 500,
-	"Reason": "'x' is an invalid start of a value. Path: $.ValMin | LineNumber: 4...",
-	"Note": "See application log for stack trace."
-}
-```
-
-## Example Server Log Entry:
-
-```
-fail: FastEndpoints.ExceptionHandler[0]
-      =================================
-      HTTP: POST /inventory/adjust-stock
-      TYPE: JsonException
-      REASON: 'x' is an invalid start of a value. Path: $.ValMin | LineNumber: 4...
-      ---------------------------------
-         at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state,...
-         at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader,...
-         at System.Text.Json.JsonSerializer.ReadCore[TValue](JsonConverter jsonConverter,...
-         ...
-```
-
-## Enabling The Exception Handler
-
-Enable the middleware as shown below during app startup.
-
-```cs |copy|title=Program.cs
-var builder = WebApplication.CreateBuilder();
-builder.Services.AddFastEndpoints();
-
-var app = builder.Build();
-app.UseDefaultExceptionHandler(); //add this
-app.UseAuthorization();
-app.UseFastEndpoints();
-app.Run();
-```
-
-Disable the ASP.NET Core Diagnostic logging for unhandled exceptions in order to avoid duplicate log entries.
-
-```json |copy|title=appsettings.json
-{
-  "Logging": {
-    "LogLevel": {
-      "Default": "Warning",
-      "Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware": "None" //add this
-    }
-}
-```
-
-## Customizing The Exception Handler
-If you'd like to modify the behavior of the above middleware, you can simply copy the [source code](https://github.com/FastEndpoints/Library/blob/main/Src/Library/Extensions/ExceptionHandlerExtensions.cs) and register your version instead.
-
-## Disable Validation Error Catching
-By default, all validation errors thrown by the endpoints are caught internally and not thrown out to the middleware pipeline. If you need those thrown, you can instruct the endpoint to do so by doing the following:
-```cs title=MyEndpoint.cs
-public override void Configure()
-{
-    Get("throw-error");
-    DontCatchExceptions();
-}
-```
-Do note however that by doing so, you are effectively disabling the automatic error responses sent by the library. It would then be the responsibility of your custom exception handling middleware to handle the exceptions and send appropriate responses to the requesting client.
-
-The thrown exception type is **ValidationFailureException**, which has a property called **Failures** where you can get access to a collection of **ValidationFailure** objects to check what sort of validation failures occurred.
-
-### The Better Approach
-
-Instead of using a custom exception handling middleware, you could register a **global post-processor** like the following:
-
-```cs title=ErrorLoggerPostProcessor.cs
-public class ErrorLogger : IGlobalPostProcessor
-{
-    public Task PostProcessAsync(object req, object res, HttpContext ctx, IReadOnlyCollection<ValidationFailure> failures, CancellationToken ct)
-    {
-        if (failures.Count > 0)
-        {
-            var logger = ctx.Resolve<ILogger<ErrorLogger>>();
-            logger.LogWarning("Validation error count: {@count}", failures.Count);
-        }
-        return Task.CompletedTask;
-    }
-}
-```
-Wire it up in app startup like so:
-```cs title=Program.cs
-app.UseFastEndpoints(c =>
-{
-    c.Endpoints.Configurator = ep =>
-    {
-        ep.PostProcessors(new ErrorLogger());
-    };
-});
-```
\ No newline at end of file