diff --git a/app/package.json b/app/package.json
index 9210ae4..3e26015 100644
--- a/app/package.json
+++ b/app/package.json
@@ -55,11 +55,11 @@
         "jwt-decode": "^4.0.0",
         "nipplejs": "^0.10.1",
         "svelte-dnd-list": "^0.1.8",
-        "svelte-modals": "^1.3.0",
+        "svelte-modals": "^2.0.0",
         "three": "^0.162.0",
         "urdf-loader": "^0.12.1",
         "uzip": "^0.20201231.0",
         "xacro-parser": "^0.3.9"
     },
     "packageManager": "pnpm@9.3.0"
-}
\ No newline at end of file
+}
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 6eb1705..42320ea 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -33,8 +33,8 @@ importers:
         specifier: ^0.1.8
         version: 0.1.8
       svelte-modals:
-        specifier: ^1.3.0
-        version: 1.3.0(svelte@5.20.4)
+        specifier: ^2.0.0
+        version: 2.0.0(svelte@5.20.4)
       three:
         specifier: ^0.162.0
         version: 0.162.0
@@ -1813,10 +1813,10 @@ packages:
   svelte-focus-trap@1.2.0:
     resolution: {integrity: sha512-/hIUHgKcFlewsQreq8v7DYNBkQe7rR0c94PNBOCsmeUwoIYAy6iXJ1pH0k3rWpjwZHKtUxeXbX1iRFlFhipbeg==}
 
-  svelte-modals@1.3.0:
-    resolution: {integrity: sha512-b1Ylnyv9O6b7VYeWGJVToaVU2lw7GtErVwiEdojyfnOuZcrhNlQ5eDqbTrL3xyKz8j2VTy/QiGUl1lm/6SnQ2A==}
+  svelte-modals@2.0.0:
+    resolution: {integrity: sha512-wBClXmScNStF/rG75ZP7hEiKXRJ5H+DhA2dkMPQd+FX2Hc1XTj1n5cZGC7uTYCYOVmQwrsDOlL5a2V5E6q3f+A==}
     peerDependencies:
-      svelte: ^3.0.0 || ^4.0.0
+      svelte: '>=5'
 
   svelte@5.20.4:
     resolution: {integrity: sha512-2Mo/AfObaw9zuD0u1JJ7sOVzRCGcpETEyDkLbtkcctWpCMCIyT0iz83xD8JT29SR7O4SgswuPRIDYReYF/607A==}
@@ -3740,7 +3740,7 @@ snapshots:
     dependencies:
       mousetrap: 1.6.5
 
-  svelte-modals@1.3.0(svelte@5.20.4):
+  svelte-modals@2.0.0(svelte@5.20.4):
     dependencies:
       svelte: 5.20.4
 
diff --git a/app/src/lib/components/ConfirmDialog.svelte b/app/src/lib/components/ConfirmDialog.svelte
index 576d381..4916948 100644
--- a/app/src/lib/components/ConfirmDialog.svelte
+++ b/app/src/lib/components/ConfirmDialog.svelte
@@ -1,65 +1,61 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
+    import { focusTrap } from 'svelte-focus-trap';
+    import { fly } from 'svelte/transition';
+    import { Cancel, Check } from '$lib/components/icons';
+    import { modals, exitBeforeEnter } from 'svelte-modals';
 
-	const bubble = createBubbler();
-	import { closeModal } from 'svelte-modals';
-	import { focusTrap } from 'svelte-focus-trap';
-	import { fly } from 'svelte/transition';
-	import { Cancel, Check } from '$lib/components/icons';
+    // provided by <Modals />
 
-	// provided by <Modals />
+    interface Props {
+        isOpen: boolean;
+        title: string;
+        message: string;
+        onConfirm: any;
+        labels?: any;
+    }
 
-	interface Props {
-		isOpen: boolean;
-		title: string;
-		message: string;
-		onConfirm: any;
-		labels?: any;
-	}
-
-	let {
-		isOpen,
-		title,
-		message,
-		onConfirm,
-		labels = {
-		cancel: { label: 'Cancel', icon: Cancel },
-		confirm: { label: 'OK', icon: Check }
-	}
-	}: Props = $props();
+    let {
+        isOpen,
+        title,
+        message,
+        onConfirm,
+        labels = {
+            cancel: { label: 'Cancel', icon: Cancel },
+            confirm: { label: 'OK', icon: Check }
+        }
+    }: Props = $props();
 </script>
 
 {#if isOpen}
-	{@const SvelteComponent = labels?.confirm.icon}
-	<div
-		role="dialog"
-		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-		transition:fly={{ y: 50 }}
-		onintrostart={bubble('introstart')}
-		onoutroend={bubble('outroend')}
+    {@const SvelteComponent = labels?.confirm.icon}
+    <div
+        role="dialog"
+        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+        transition:fly={{ y: 50 }}
+        use:exitBeforeEnter
         use:focusTrap
-	>
-		<div
-			class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-		>
-			<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-			<div class="divider my-2"></div>
-			<p class="text-base-content mb-1 text-start">{message}</p>
-			<div class="divider my-2"></div>
-			<div class="flex justify-end gap-2">
-				<button class="btn btn-primary inline-flex items-center" onclick={closeModal}
-					><labels.cancel.icon class="mr-2 h-5 w-5" /><span
-						>{labels?.cancel.label}</span
-					></button
-				>
-				<button
-					class="btn btn-warning text-warning-content inline-flex items-center"
-					onclick={onConfirm}
-					><SvelteComponent class="mr-2 h-5 w-5" /><span
-						>{labels?.confirm.label}</span
-					></button
-				>
-			</div>
-		</div>
-	</div>
+    >
+        <div
+            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+        >
+            <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
+            <div class="divider my-2"></div>
+            <p class="text-base-content mb-1 text-start">{message}</p>
+            <div class="divider my-2"></div>
+            <div class="flex justify-end gap-2">
+                <button
+                    class="btn btn-primary inline-flex items-center"
+                    onclick={() => modals.close()}
+                >
+                    <labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
+                </button>
+                <button
+                    class="btn btn-warning text-warning-content inline-flex items-center"
+                    onclick={onConfirm}
+                >
+                    <SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span>
+                </button>
+            </div>
+        </div>
+    </div>
 {/if}
diff --git a/app/src/lib/components/GithubUpdateDialog.svelte b/app/src/lib/components/GithubUpdateDialog.svelte
index 9fd48f3..766b0fe 100644
--- a/app/src/lib/components/GithubUpdateDialog.svelte
+++ b/app/src/lib/components/GithubUpdateDialog.svelte
@@ -1,105 +1,104 @@
 <script lang="ts">
-	import { run, createBubbler } from 'svelte/legacy';
+    import { run } from 'svelte/legacy';
 
-	const bubble = createBubbler();
-	import { closeAllModals, onBeforeClose } from 'svelte-modals';
-	import { focusTrap } from 'svelte-focus-trap';
-	import { fly } from 'svelte/transition';
-	import { telemetry } from '$lib/stores/telemetry';
-	import { Cancel } from './icons';
+    import { focusTrap } from 'svelte-focus-trap';
+    import { fly } from 'svelte/transition';
+    import { telemetry } from '$lib/stores/telemetry';
+    import { Cancel } from './icons';
+    import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals';
 
-	// provided by <Modals />
-	interface Props {
-		isOpen: boolean;
-	}
+    // provided by <Modals />
+    interface Props {
+        isOpen: boolean;
+    }
 
-	let { isOpen }: Props = $props();
+    let { isOpen }: Props = $props();
 
-	let updating = $state(true);
+    let updating = $state(true);
 
-	let progress = $state(0);
-	run(() => {
-		if ($telemetry.download_ota.status == 'progress') {
-			progress = $telemetry.download_ota.progress;
-		}
-	});
+    let progress = $state(0);
+    run(() => {
+        if ($telemetry.download_ota.status == 'progress') {
+            progress = $telemetry.download_ota.progress;
+        }
+    });
 
-	run(() => {
-		if ($telemetry.download_ota.status == 'error') {
-			updating = false;
-		}
-	});
+    run(() => {
+        if ($telemetry.download_ota.status == 'error') {
+            updating = false;
+        }
+    });
 
-	let message = $state('Preparing ...');
-	let timerId: number = $state();
+    let message = $state('Preparing ...');
+    let timerId: number = $state();
 
-	run(() => {
-		if ($telemetry.download_ota.status == 'progress') {
-			message = 'Downloading ...';
-		} else if ($telemetry.download_ota.status == 'error') {
-			message = $telemetry.download_ota.error;
-		} else if ($telemetry.download_ota.status == 'finished') {
-			message = 'Restarting ...';
-			progress = 0;
-			// Reload page after 5 sec
-			timerId = setTimeout(() => {
-				closeAllModals();
-				location.reload();
-			}, 5000);
-		}
-	});
+    run(() => {
+        if ($telemetry.download_ota.status == 'progress') {
+            message = 'Downloading ...';
+        } else if ($telemetry.download_ota.status == 'error') {
+            message = $telemetry.download_ota.error;
+        } else if ($telemetry.download_ota.status == 'finished') {
+            message = 'Restarting ...';
+            progress = 0;
+            // Reload page after 5 sec
+            timerId = setTimeout(() => {
+                modals.closeAll();
+                location.reload();
+            }, 5000);
+        }
+    });
 
-	onBeforeClose(() => {
-		if (updating) {
-			// prevents modal from closing
-			return false;
-		} else {
-			$telemetry.download_ota.status = 'idle';
-			$telemetry.download_ota.error = '';
-			$telemetry.download_ota.progress = 0;
-			return true;
-		}
-	});
+    onBeforeClose(() => {
+        if (updating) {
+            // prevents modal from closing
+            return false;
+        } else {
+            $telemetry.download_ota.status = 'idle';
+            $telemetry.download_ota.error = '';
+            $telemetry.download_ota.progress = 0;
+            return true;
+        }
+    });
 </script>
 
 {#if isOpen}
-	<div
-		role="dialog"
-		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-		transition:fly={{ y: 50 }}
-		onintrostart={bubble('introstart')}
-		onoutroend={bubble('outroend')}
-		use:focusTrap
-	>
-		<div
-			class="bg-base-100 rounded-box pointer-events-auto flex max-h-full min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-		>
-			<h2 class="text-base-content text-start text-2xl font-bold">Updating Firmware</h2>
-			<div class="divider my-2"></div>
-			<div class="overflow-y-auto">
-				<div class="bg-base-100 flex flex-col items-center justify-center p-6">
-					{#if $telemetry.download_ota.status == 'progress'}
-						<progress class="progress progress-primary w-56" value={progress} max="100"></progress>
-					{:else}
-						<progress class="progress progress-primary w-56"></progress>
-					{/if}
-					<p class="mt-8 text-2xl">{message}</p>
-				</div>
-			</div>
-			<div class="divider my-2"></div>
-			<div class="flex flex-wrap justify-end gap-2">
-				<div class="flex-grow"></div>
-				<button
-					class="btn btn-warning text-warning-content inline-flex flex-none items-center"
-					disabled={updating}
-					onclick={() => {
-						closeAllModals();
-						location.reload();
-					}}
-				>
-					<Cancel class="mr-2 h-5 w-5" /><span>Close</span></button
-				>
-			</div>
-		</div>
-	</div>
+    <div
+        role="dialog"
+        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+        transition:fly={{ y: 50 }}
+        use:exitBeforeEnter
+        use:focusTrap
+    >
+        <div
+            class="bg-base-100 rounded-box pointer-events-auto flex max-h-full min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+        >
+            <h2 class="text-base-content text-start text-2xl font-bold">Updating Firmware</h2>
+            <div class="divider my-2"></div>
+            <div class="overflow-y-auto">
+                <div class="bg-base-100 flex flex-col items-center justify-center p-6">
+                    {#if $telemetry.download_ota.status == 'progress'}
+                        <progress class="progress progress-primary w-56" value={progress} max="100"
+                        ></progress>
+                    {:else}
+                        <progress class="progress progress-primary w-56"></progress>
+                    {/if}
+                    <p class="mt-8 text-2xl">{message}</p>
+                </div>
+            </div>
+            <div class="divider my-2"></div>
+            <div class="flex flex-wrap justify-end gap-2">
+                <div class="flex-grow"></div>
+                <button
+                    class="btn btn-warning text-warning-content inline-flex flex-none items-center"
+                    disabled={updating}
+                    onclick={() => {
+                        closeAllModals();
+                        location.reload();
+                    }}
+                >
+                    <Cancel class="mr-2 h-5 w-5" /><span>Close</span></button
+                >
+            </div>
+        </div>
+    </div>
 {/if}
diff --git a/app/src/lib/components/InfoDialog.svelte b/app/src/lib/components/InfoDialog.svelte
index cd67f86..1810f01 100644
--- a/app/src/lib/components/InfoDialog.svelte
+++ b/app/src/lib/components/InfoDialog.svelte
@@ -1,54 +1,51 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
+    import { focusTrap } from 'svelte-focus-trap';
+    import { fly } from 'svelte/transition';
+    import { Check } from './icons';
+    import { exitBeforeEnter } from 'svelte-modals';
 
-	const bubble = createBubbler();
-	import { focusTrap } from 'svelte-focus-trap';
-	import { fly } from 'svelte/transition';
-	import { Check } from './icons';
+    // provided by <Modals />
 
-	// provided by <Modals />
+    interface Props {
+        isOpen: boolean;
+        title: string;
+        message: string;
+        onDismiss: any;
+        dismiss?: any;
+    }
 
-	interface Props {
-		isOpen: boolean;
-		title: string;
-		message: string;
-		onDismiss: any;
-		dismiss?: any;
-	}
-
-	let {
-		isOpen,
-		title,
-		message,
-		onDismiss,
-		dismiss = { label: 'Dismiss', icon: Check }
-	}: Props = $props();
+    let {
+        isOpen,
+        title,
+        message,
+        onDismiss,
+        dismiss = { label: 'Dismiss', icon: Check }
+    }: Props = $props();
 </script>
 
 {#if isOpen}
-	<div
-		role="dialog"
-		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-		transition:fly={{ y: 50 }}
-		onintrostart={bubble('introstart')}
-		onoutroend={bubble('outroend')}
-		use:focusTrap
-	>
-		<div
-			class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-		>
-			<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-			<div class="divider my-2"></div>
-			<p class="text-base-content mb-1 text-start">{message}</p>
-			<div class="divider my-2"></div>
-			<div class="flex justify-end gap-2">
-				<button
-					class="btn btn-warning text-warning-content inline-flex items-center"
-					onclick={onDismiss}
-					><dismiss.icon class="mr-2 h-5 w-5" /><span>{dismiss.label}</span
-					></button
-				>
-			</div>
-		</div>
-	</div>
+    <div
+        role="dialog"
+        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+        transition:fly={{ y: 50 }}
+        use:exitBeforeEnter
+        use:focusTrap
+    >
+        <div
+            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+        >
+            <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
+            <div class="divider my-2"></div>
+            <p class="text-base-content mb-1 text-start">{message}</p>
+            <div class="divider my-2"></div>
+            <div class="flex justify-end gap-2">
+                <button
+                    class="btn btn-warning text-warning-content inline-flex items-center"
+                    onclick={onDismiss}
+                >
+                    <dismiss.icon class="mr-2 h-5 w-5" /><span>{dismiss.label}</span>
+                </button>
+            </div>
+        </div>
+    </div>
 {/if}
diff --git a/app/src/lib/components/statusbar/SleepButton.svelte b/app/src/lib/components/statusbar/SleepButton.svelte
index bc20689..56d07cc 100644
--- a/app/src/lib/components/statusbar/SleepButton.svelte
+++ b/app/src/lib/components/statusbar/SleepButton.svelte
@@ -1,28 +1,28 @@
 <script lang="ts">
-	import { useFeatureFlags } from '$lib/stores';
-	import { closeModal, openModal } from 'svelte-modals';
+    import { useFeatureFlags } from '$lib/stores';
+    import { closeModal, openModal } from 'svelte-modals/legacy';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-	import { api } from '$lib/api';
-	import { Cancel, Power } from '../icons';
+    import { api } from '$lib/api';
+    import { Cancel, Power } from '../icons';
 
     const features = useFeatureFlags();
 
     const postSleep = async () => await api.post('/api/system/sleep');
 
     const confirmSleep = () => {
-		openModal(ConfirmDialog, {
-			title: 'Confirm Power Down',
-			message: 'Are you sure you want to switch off the device?',
-			labels: {
-				cancel: { label: 'Abort', icon: Cancel },
-				confirm: { label: 'Switch Off', icon: Power }
-			},
-			onConfirm: () => {
-				closeModal();
-				postSleep();
-			}
-		});
-	}
+        openModal(ConfirmDialog, {
+            title: 'Confirm Power Down',
+            message: 'Are you sure you want to switch off the device?',
+            labels: {
+                cancel: { label: 'Abort', icon: Cancel },
+                confirm: { label: 'Switch Off', icon: Power }
+            },
+            onConfirm: () => {
+                closeModal();
+                postSleep();
+            }
+        });
+    };
 </script>
 
 {#if $features.sleep}
@@ -31,4 +31,4 @@
             <Power class="text-error h-9 w-9" />
         </button>
     </div>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/app/src/lib/components/statusbar/UpdateIndicator.svelte b/app/src/lib/components/statusbar/UpdateIndicator.svelte
index d971166..2da30ec 100644
--- a/app/src/lib/components/statusbar/UpdateIndicator.svelte
+++ b/app/src/lib/components/statusbar/UpdateIndicator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { openModal, closeAllModals } from 'svelte-modals';
+    import { openModal, closeAllModals } from 'svelte-modals/legacy';
     import { notifications } from '$lib/components/toasts/notifications';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 19cb9b2..87262ca 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
     import { page } from '$app/stores';
-    import { Modals, closeModal } from 'svelte-modals';
+    import { Modals, closeModal } from 'svelte-modals/legacy';
     import Toast from '$lib/components/toasts/Toast.svelte';
     import { notifications } from '$lib/components/toasts/notifications';
     import { fade } from 'svelte/transition';
diff --git a/app/src/routes/system/status/SystemStatus.svelte b/app/src/routes/system/status/SystemStatus.svelte
index 7cbb119..9c1fa67 100644
--- a/app/src/routes/system/status/SystemStatus.svelte
+++ b/app/src/routes/system/status/SystemStatus.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
-    import { openModal, closeModal } from 'svelte-modals';
+    import { openModal, closeModal } from 'svelte-modals/legacy';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import SettingsCard from '$lib/components/SettingsCard.svelte';
     import Spinner from '$lib/components/Spinner.svelte';
@@ -107,10 +107,10 @@
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-        <Health  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+        <Health class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
     {/snippet}
     {#snippet title()}
-        <span >System Status</span>
+        <span>System Status</span>
     {/snippet}
 
     <div class="w-full overflow-x-auto">
diff --git a/app/src/routes/system/update/GithubFirmwareManager.svelte b/app/src/routes/system/update/GithubFirmwareManager.svelte
index 256e3af..39a3cfa 100644
--- a/app/src/routes/system/update/GithubFirmwareManager.svelte
+++ b/app/src/routes/system/update/GithubFirmwareManager.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { openModal, closeModal, closeAllModals } from 'svelte-modals';
+    import { openModal, closeModal, closeAllModals } from 'svelte-modals/legacy';
     import { slide } from 'svelte/transition';
     import { cubicOut } from 'svelte/easing';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
@@ -82,10 +82,10 @@
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-        <Github  class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
+        <Github class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
     {/snippet}
     {#snippet title()}
-        <span >Github Firmware Manager</span>
+        <span>Github Firmware Manager</span>
     {/snippet}
     {#await getGithubAPI()}
         <Spinner />
diff --git a/app/src/routes/system/update/UploadFirmware.svelte b/app/src/routes/system/update/UploadFirmware.svelte
index f4bc99e..046e458 100644
--- a/app/src/routes/system/update/UploadFirmware.svelte
+++ b/app/src/routes/system/update/UploadFirmware.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { openModal, closeModal } from 'svelte-modals';
+    import { openModal, closeModal } from 'svelte-modals/legacy';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import SettingsCard from '$lib/components/SettingsCard.svelte';
 
@@ -33,10 +33,10 @@
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-        <OTA  class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
+        <OTA class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
     {/snippet}
     {#snippet title()}
-        <span >Upload Firmware</span>
+        <span>Upload Firmware</span>
     {/snippet}
     <div class="alert alert-warning shadow-lg">
         <Warning class="h-6 w-6 flex-shrink-0" />
diff --git a/app/src/routes/wifi/sta/Scan.svelte b/app/src/routes/wifi/sta/Scan.svelte
index 7f38f5b..fc53d5b 100644
--- a/app/src/routes/wifi/sta/Scan.svelte
+++ b/app/src/routes/wifi/sta/Scan.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
-    import { createBubbler } from 'svelte/legacy';
-
-    const bubble = createBubbler();
-    import { closeModal } from 'svelte-modals';
     import { focusTrap } from 'svelte-focus-trap';
     import { fly } from 'svelte/transition';
-
     import { onMount, onDestroy } from 'svelte';
     import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
     import type { NetworkItem, NetworkList } from '$lib/types/models';
     import { api } from '$lib/api';
     import { AP, Network, Reload, Cancel } from '$lib/components/icons';
+    import { modals, exitBeforeEnter } from 'svelte-modals';
 
     // provided by <Modals />
     interface Props {
@@ -80,8 +76,7 @@
         role="dialog"
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
-        onintrostart={bubble('introstart')}
-        onoutroend={bubble('outroend')}
+        use:exitBeforeEnter
         use:focusTrap
     >
         <div
@@ -135,14 +130,17 @@
                     class="btn btn-primary inline-flex flex-none items-center"
                     disabled={scanActive}
                     onclick={scanNetworks}
-                    ><Reload class="mr-2 h-5 w-5" /><span>Scan again</span></button
                 >
+                    <Reload class="mr-2 h-5 w-5" /><span>Scan again</span>
+                </button>
 
                 <div class="flex-grow"></div>
                 <button
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
-                    onclick={closeModal}><Cancel class="mr-2 h-5 w-5" /><span>Cancel</span></button
+                    onclick={() => modals.close()}
                 >
+                    <Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
+                </button>
             </div>
         </div>
     </div>
diff --git a/app/src/routes/wifi/sta/Wifi.svelte b/app/src/routes/wifi/sta/Wifi.svelte
index 843707e..2bc7afa 100644
--- a/app/src/routes/wifi/sta/Wifi.svelte
+++ b/app/src/routes/wifi/sta/Wifi.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
-    import { openModal, closeModal } from 'svelte-modals';
+    import { openModal, closeModal } from 'svelte-modals/legacy';
     import { slide } from 'svelte/transition';
     import { cubicOut } from 'svelte/easing';
     import { notifications } from '$lib/components/toasts/notifications';