diff --git a/app/package.json b/app/package.json
index 0bba18cec..5497bd8b0 100644
--- a/app/package.json
+++ b/app/package.json
@@ -86,7 +86,6 @@
 		"svelte-floating-ui": "^1.5.8",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-loadable-store": "^2.0.1",
-		"svelte-outclick": "^3.7.1",
 		"svelte-resize-observer": "^2.0.0",
 		"tauri-plugin-context-menu": "^0.7.0",
 		"tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
diff --git a/app/src/lib/components/Modal.svelte b/app/src/lib/components/Modal.svelte
index 3308936cc..b7650e9fb 100644
--- a/app/src/lib/components/Modal.svelte
+++ b/app/src/lib/components/Modal.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
 	import Icon from '$lib/components/Icon.svelte';
 	import { onMount } from 'svelte';
-	import OutClick from 'svelte-outclick';
 	import type iconsJson from '$lib/icons/icons.json';
 
 	let dialog: HTMLDialogElement;
 	let item: any;
-	let open = false;
 
 	export let width: 'default' | 'small' | 'large' = 'default';
 	export let title: string | undefined = undefined;
@@ -15,20 +13,26 @@
 	export function show(newItem?: any) {
 		item = newItem;
 		dialog.showModal();
-		open = true;
 	}
 
 	export function close() {
 		item = undefined;
 		dialog.close();
-		open = false;
 	}
 
-	onMount(() => {
-		document.body.appendChild(dialog);
-	});
+	//onMount(() => {
+	//	document.body.appendChild(dialog);
+	//});
+
+	function handleClickOutside(e: MouseEvent) {
+		if (dialog && !dialog.contains(e.target as Node)) {
+			dialog.close();
+		}
+	}
 </script>
 
+<svelte:window on:click={handleClickOutside} />
+
 <dialog
 	class="dialog-wrap"
 	class:s-default={width === 'default'}
@@ -37,34 +41,30 @@
 	bind:this={dialog}
 	on:close={close}
 >
-	{#if open}
-		<OutClick on:outclick={close}>
-			<div class="dialog">
-				<form class="modal-content" on:submit>
-					{#if title}
-						<div class="modal__header">
-							{#if icon}
-								<Icon name={icon} />
-							{/if}
-							<h2 class="text-base-14 text-semibold">
-								{title}
-							</h2>
-						</div>
+	<div class="dialog">
+		<form class="modal-content" on:submit>
+			{#if title}
+				<div class="modal__header">
+					{#if icon}
+						<Icon name={icon} />
 					{/if}
+					<h2 class="text-base-14 text-semibold">
+						{title}
+					</h2>
+				</div>
+			{/if}
 
-					<div class="modal__body custom-scrollbar">
-						<slot {item} {close} />
-					</div>
-
-					{#if $$slots.controls}
-						<div class="modal__footer">
-							<slot name="controls" {item} {close} />
-						</div>
-					{/if}
-				</form>
+			<div class="modal__body custom-scrollbar">
+				<slot {item} {close} />
 			</div>
-		</OutClick>
-	{/if}
+
+			{#if $$slots.controls}
+				<div class="modal__footer">
+					<slot name="controls" {item} {close} />
+				</div>
+			{/if}
+		</form>
+	</div>
 </dialog>
 
 <style lang="postcss">