diff --git a/interface/package-lock.json b/interface/package-lock.json
index 863fcf5f5..0dcacdd78 100644
--- a/interface/package-lock.json
+++ b/interface/package-lock.json
@@ -14,7 +14,7 @@
 				"jwt-decode": "^4.0.0",
 				"luxon": "^3.7.1",
 				"msgpack-lite": "^0.1.26",
-				"svelte-dnd-list": "^0.1.8",
+				"svelte-dnd-action": "^0.9.65",
 				"svelte-modals": "^2.0.1"
 			},
 			"devDependencies": {
@@ -4132,11 +4132,14 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
-		"node_modules/svelte-dnd-list": {
-			"version": "0.1.8",
-			"resolved": "https://registry.npmjs.org/svelte-dnd-list/-/svelte-dnd-list-0.1.8.tgz",
-			"integrity": "sha512-81Nt/niux7kf59lql0lxTAH0z8xwAxHdHC9dZT7MbfE32T6hgeLsLZ7RIBNAihQ040Io1KghqqPXD+k2viiKeA==",
-			"license": "MIT"
+		"node_modules/svelte-dnd-action": {
+			"version": "0.9.65",
+			"resolved": "https://registry.npmjs.org/svelte-dnd-action/-/svelte-dnd-action-0.9.65.tgz",
+			"integrity": "sha512-GKFtrAtYAjcm27aMELoXOhkLtKA1AEoj2njjCReCer6jh1hnRtTHdEO4Kjfpayz+ZAvE0MMwIvLISW3tsiO9Qg==",
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": ">=3.23.0 || ^5.0.0-next.0"
+			}
 		},
 		"node_modules/svelte-eslint-parser": {
 			"version": "1.2.0",
diff --git a/interface/package.json b/interface/package.json
index badff56de..b83bd8a9b 100644
--- a/interface/package.json
+++ b/interface/package.json
@@ -3,7 +3,7 @@
 	"version": "0.2.0",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -44,7 +44,7 @@
 		"jwt-decode": "^4.0.0",
 		"luxon": "^3.7.1",
 		"msgpack-lite": "^0.1.26",
-		"svelte-dnd-list": "^0.1.8",
+		"svelte-dnd-action": "^0.9.65",
 		"svelte-modals": "^2.0.1"
 	}
 }
\ No newline at end of file
diff --git a/interface/src/lib/components/Collapsible.svelte b/interface/src/lib/components/Collapsible.svelte
index 419083cba..af93c0a60 100644
--- a/interface/src/lib/components/Collapsible.svelte
+++ b/interface/src/lib/components/Collapsible.svelte
@@ -2,24 +2,54 @@
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import Down from '~icons/tabler/chevron-down';
+	import Alert from '~icons/tabler/alert-hexagon';
 
-	let { icon, title, children, opened, closed, open = false, class: className = '' } = $props();
+	interface Props {
+		open?: boolean;
+		opened?: any;
+		closed?: any;
+		collapsible?: boolean;
+		icon?: import('svelte').Snippet;
+		title?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		class?: string;
+		isDirty?: boolean;
+	}
+
+	let {
+		open = $bindable(false),
+		opened,
+		closed,
+		icon,
+		title,
+		children,
+		class: className = '',
+		isDirty = false
+	}: Props = $props();
 
 	function openCollapsible() {
 		open = !open;
 		if (open) {
-			opened();
+			if (opened) opened();
 		} else {
-			closed();
+			if (closed) closed();
 		}
 	}
 </script>
 
 <div class="{className} relative grid w-full max-w-2xl self-center overflow-hidden">
+	{#if isDirty}
+		<div class="absolute left-0 top-0 w-1.5 h-full bg-red-300"></div>
+	{/if}
 	<div class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
-		<span class="inline-flex items-baseline">
+		<span class="inline-flex items-center">
 			{@render icon?.()}
 			{@render title?.()}
+			{#if isDirty}
+				<div data-tip="There are unsaved changes." class="tooltip tooltip-right tooltip-error">
+					<Alert class="text-error lex-shrink-0 ml-2 h-6 w-6 self-end cursor-help" />
+				</div>
+			{/if}
 		</span>
 		<button class="btn btn-circle btn-ghost btn-sm" onclick={() => openCollapsible()}>
 			<Down
diff --git a/interface/src/lib/components/ConfirmDialog.svelte b/interface/src/lib/components/ConfirmDialog.svelte
index a58d4106a..216100044 100644
--- a/interface/src/lib/components/ConfirmDialog.svelte
+++ b/interface/src/lib/components/ConfirmDialog.svelte
@@ -8,7 +8,7 @@
 	// provided by <Modals />
 
 	interface Props {
-		isOpen: boolean;
+		isOpen?: boolean;
 		title: string;
 		message: string;
 		onConfirm: any;
@@ -40,19 +40,19 @@
 		>
 			<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>
+			<p class="text-base-content mb-1 text-start">{@html 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
+					}}><labels.cancel.icon class="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
+					><SvelteComponent class="h-5 w-5" /><span>{labels?.confirm.label}</span></button
 				>
 			</div>
 		</div>
diff --git a/interface/src/lib/components/DraggableList.svelte b/interface/src/lib/components/DraggableList.svelte
new file mode 100644
index 000000000..7b14e0cab
--- /dev/null
+++ b/interface/src/lib/components/DraggableList.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { dndzone } from 'svelte-dnd-action';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		items: any[];
+		onReorder?: (reorderedItems: any[]) => void;
+		flipDurationMs?: number;
+		dragDisabled?: boolean;
+		class?: string;
+		children: Snippet<[{ item: any; index: number; originalItem: any }]>;
+	}
+
+	let {
+		items,
+		onReorder = () => {},
+		flipDurationMs = 200,
+		dragDisabled = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Create a state array with IDs for drag-and-drop functionality
+	let itemsWithIds: any[] = $state([]);
+
+	// Update the drag-and-drop array whenever items change
+	$effect(() => {
+		itemsWithIds = items.map((item, index) => ({
+			...item,
+			id: item.id || `dnd-item-${index}-${Date.now()}` // Generate unique ID with timestamp
+		}));
+	});
+
+	function handleSort(e: any) {
+		// Update the visual drag-and-drop array immediately
+		itemsWithIds = e.detail.items;
+	}
+
+	function handleFinalizeSort(e: any) {
+		// Remove only temporary IDs, preserve original device IDs
+		const reorderedItems = e.detail.items.map((item: any) => {
+			// If this is a temporary ID we added (string starting with 'dnd-item-'), remove it
+			if (typeof item.id === 'string' && item.id.startsWith('dnd-item-')) {
+				const { id, ...itemWithoutTempId } = item;
+				return itemWithoutTempId;
+			}
+			// Otherwise, keep the item as-is (preserving original numeric IDs)
+			return item;
+		});
+
+		// Call the parent's reorder handler
+		onReorder(reorderedItems);
+	}
+
+</script>
+
+<section
+	use:dndzone={{
+		items: itemsWithIds,
+		flipDurationMs,
+		dropTargetStyle: {}, // This is to actively clear default styles
+		dropTargetClasses: ['dragzone-outline'], // This applies custom styling
+		dragDisabled
+	}}
+	onconsider={handleSort}
+	onfinalize={handleFinalizeSort}
+	class={className}
+>
+	{#each itemsWithIds as item, index (item.id)}
+		{@render children({ item, index, originalItem: items[index] })}
+	{/each}
+</section>
+
+<style>
+	@reference "$src/app.css";
+	:global(.dragzone-outline) {
+		@apply outline-solid outline-2 outline-(--color-primary);
+	}
+	:global(#dnd-action-dragged-el) {
+		@apply outline-solid outline-2 outline-current;
+
+	}
+</style>
diff --git a/interface/src/lib/components/InfoDialog.svelte b/interface/src/lib/components/InfoDialog.svelte
index d2dbf4181..d78eaa34b 100644
--- a/interface/src/lib/components/InfoDialog.svelte
+++ b/interface/src/lib/components/InfoDialog.svelte
@@ -35,7 +35,7 @@
 		>
 			<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>
+			<p class="text-base-content mb-1 text-start">{@html message}</p>
 			<div class="divider my-2"></div>
 			<div class="flex justify-end gap-2">
 				<button
diff --git a/interface/src/lib/components/InputPassword.svelte b/interface/src/lib/components/InputPassword.svelte
index aff1c5136..4918ac71d 100644
--- a/interface/src/lib/components/InputPassword.svelte
+++ b/interface/src/lib/components/InputPassword.svelte
@@ -7,20 +7,24 @@
 		id?: string;
 	}
 
-	let { value = $bindable(''), id = '' }: Props = $props();
+	let { value = $bindable('') as string, id = '' as string }: Props = $props();
+
 	function handleInput(e: any) {
 		value = e.target.value;
 	}
 </script>
 
 <div class="relative">
-	<input {type} class="input w-full" {value} oninput={handleInput} {id} />
+	<input {type} class="input input-bordered w-full" {value} oninput={handleInput} {id} />
 	<div class="absolute inset-y-0 right-0 flex items-center pr-1">
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}"
 			onclick={() => (show = false)}
+			role="button"
+			aria-label="Hide password"
+			tabindex="0"
 			width="40"
 			height="40"
 			viewBox="0 0 24 24"
@@ -43,6 +47,9 @@
 			xmlns="http://www.w3.org/2000/svg"
 			class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}"
 			onclick={() => (show = true)}
+			role="button"
+			aria-label="Show password"
+			tabindex="0"
 			width="40"
 			height="40"
 			viewBox="0 0 24 24"
diff --git a/interface/src/lib/components/SettingsCard.svelte b/interface/src/lib/components/SettingsCard.svelte
index 930e2c9a2..5541922a8 100644
--- a/interface/src/lib/components/SettingsCard.svelte
+++ b/interface/src/lib/components/SettingsCard.svelte
@@ -2,12 +2,16 @@
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import Down from '~icons/tabler/chevron-down';
+	import Alert from '~icons/tabler/alert-hexagon';
+
 	interface Props {
 		open?: boolean;
 		collapsible?: boolean;
 		icon?: import('svelte').Snippet;
 		title?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
+		maxwidth?: string;
+		isDirty?: boolean;
 	}
 
 	let {
@@ -15,20 +19,30 @@
 		collapsible = true,
 		icon,
 		title,
-		children
+		children,
+		maxwidth = 'max-w-2xl',
+		isDirty = false
 	}: Props = $props();
 </script>
 
 {#if collapsible}
 	<div
-		class="bg-base-200 rounded-box shadow-primary/50 relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+		class="bg-base-200 rounded-box shadow-primary/50 relative grid w-full {maxwidth} self-center overflow-hidden shadow-lg m-10"
 	>
+		{#if isDirty}
+			<div class="absolute left-0 top-0 w-1.5 h-full bg-red-300"></div>
+		{/if}
 		<div
 			class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
 		>
-			<span class="inline-flex items-baseline">
+			<span class="inline-flex items-center">
 				{@render icon?.()}
 				{@render title?.()}
+				{#if isDirty}
+					<div data-tip="There are unsaved changes." class="tooltip tooltip-right tooltip-error">
+						<Alert class="text-error lex-shrink-0 ml-2 h-6 w-6 self-end cursor-help" />
+					</div>
+				{/if}
 			</span>
 			<button
 				class="btn btn-circle btn-ghost btn-sm"
@@ -54,12 +68,20 @@
 	</div>
 {:else}
 	<div
-		class="bg-base-200 rounded-box shadow-primary/50 relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+		class="bg-base-200 rounded-box shadow-primary/50 relative grid w-full {maxwidth} self-center overflow-hidden shadow-lg m-10"
 	>
+		{#if isDirty}
+			<div class="absolute left-0 top-0 w-1.5 h-full bg-red-300"></div>
+		{/if}
 		<div class="min-h-16 w-full p-4 text-xl font-medium">
-			<span class="inline-flex items-baseline">
+			<span class="inline-flex items-center">
 				{@render icon?.()}
 				{@render title?.()}
+				{#if isDirty}
+					<div data-tip="There are unsaved changes." class="tooltip tooltip-right tooltip-error">
+						<Alert class="text-error lex-shrink-0 ml-2 h-6 w-6 self-end cursor-help" />
+					</div>
+				{/if}
 			</span>
 		</div>
 		<div class="flex flex-col gap-2 p-4 pt-0">
diff --git a/interface/src/lib/components/Spinner.svelte b/interface/src/lib/components/Spinner.svelte
index 604f1e6fa..aab4445ec 100644
--- a/interface/src/lib/components/Spinner.svelte
+++ b/interface/src/lib/components/Spinner.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
 	import Loader from '~icons/tabler/loader-2';
+
+	let { text = "Loading..."} = $props();
+
 </script>
 
-<div class="flex h-full w-full flex-col items-center justify-center p-6">
+<div class="flex w-full flex-col items-center justify-center p-6">
 	<Loader class="text-primary h-14 w-auto animate-spin stroke-2" />
-	<p class="text-xl">Loading...</p>
+	<p class="text-xl">{text}</p>
 </div>
diff --git a/interface/src/lib/components/UpdateIndicator.svelte b/interface/src/lib/components/UpdateIndicator.svelte
index 6af667ea4..d2733c9e3 100644
--- a/interface/src/lib/components/UpdateIndicator.svelte
+++ b/interface/src/lib/components/UpdateIndicator.svelte
@@ -17,7 +17,7 @@
 
 	let { update = $bindable(false) }: Props = $props();
 
-	let firmwareVersion: string;
+	let firmwareVersion: string = $state('');
 	let firmwareDownloadLink: string;
 
 	async function getGithubAPI() {
@@ -31,6 +31,7 @@
 				}
 			});
 			if (response.status !== 200) {
+				notifications.error('Failed to fetch latest release from GitHub.', 5000);
 				throw new Error(`Failed to fetch latest release from ${githubUrl}`);
 			}
 			const results = await response.json();
@@ -54,7 +55,7 @@
 				}
 			}
 		} catch (error) {
-			console.error('Error:', error);
+			console.warn(error);
 		}
 	}
 
@@ -112,6 +113,6 @@
 			class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
 			>{firmwareVersion}</span
 		>
-		<Firmware class="inline-block h-7 w-7" />
+		<Firmware class="h-7 w-7" />
 	</button>
 {/if}
diff --git a/interface/src/lib/components/toasts/Toast.svelte b/interface/src/lib/components/toasts/Toast.svelte
index 162e97215..f3f470f14 100644
--- a/interface/src/lib/components/toasts/Toast.svelte
+++ b/interface/src/lib/components/toasts/Toast.svelte
@@ -32,7 +32,7 @@
 			out:fly={{ x: 100, duration: 400 }}
 		>
 			<SvelteComponent class="h-6 w-6 shrink-0" />
-			<span>{notification.message}</span>
+			<span>{@html notification.message}</span>
 		</div>
 	{/each}
 </div>
diff --git a/interface/src/lib/stores/socket.ts b/interface/src/lib/stores/socket.ts
index 4c21368f2..e47e1c7e4 100644
--- a/interface/src/lib/stores/socket.ts
+++ b/interface/src/lib/stores/socket.ts
@@ -19,7 +19,7 @@ function createWebSocket() {
 	}
 
 	function disconnect(reason: SocketEvent, event?: Event) {
-		console.log('disconnect', reason, event);
+		//console.log('disconnect', reason, event);
 		ws.close();
 		set(false);
 		clearTimeout(unresponsiveTimeoutId);
@@ -29,7 +29,7 @@ function createWebSocket() {
 	}
 
 	function connect() {
-		console.log('connect');
+		//console.log('connect');
 		ws = new WebSocket(socketUrl);
 		ws.binaryType = 'arraybuffer';
 		ws.onopen = (ev) => {
@@ -101,11 +101,14 @@ function createWebSocket() {
 		on: <T>(event: string, listener: (data: T) => void): (() => void) => {
 			let eventListeners = listeners.get(event);
 			if (!eventListeners) {
-				if (!socketEvents.includes(event as SocketEvent)) {
-					sendEvent('subscribe', event);
-				}
 				eventListeners = new Set();
 				listeners.set(event, eventListeners);
+				
+				// Only send subscription if WebSocket is open and it's not a socket event
+				if (!socketEvents.includes(event as SocketEvent) && 
+					ws && ws.readyState === WebSocket.OPEN) {
+					sendEvent('subscribe', event);
+				}
 			}
 			eventListeners.add(listener as (data: any) => void);
 
diff --git a/interface/src/routes/+layout.svelte b/interface/src/routes/+layout.svelte
index 7200910c2..2c321448b 100644
--- a/interface/src/routes/+layout.svelte
+++ b/interface/src/routes/+layout.svelte
@@ -39,8 +39,9 @@
 
 	const initSocket = () => {
 		const ws_token = page.data.features.security ? '?access_token=' + $user.bearer_token : '';
+		const ws_protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
 		socket.init(
-			`ws://${window.location.host}/ws/events${ws_token}`,
+			`${ws_protocol}://${window.location.host}/ws/events${ws_token}`,
 			page.data.features.event_use_json
 		);
 		addEventListeners();
@@ -167,6 +168,9 @@
 			class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
 			transition:fade|global
 			onclick={() => close()}
+			role="button"
+			tabindex="0"
+			aria-label="Close modal"
 		></div>
 	{/snippet}
 </Modals>
diff --git a/interface/src/routes/login.svelte b/interface/src/routes/login.svelte
index 0ec0d300a..4a68615ee 100644
--- a/interface/src/routes/login.svelte
+++ b/interface/src/routes/login.svelte
@@ -58,7 +58,11 @@
 		in:fly={{ delay: 200, y: 100, duration: 500 }}
 		out:fade={{ duration: 200 }}
 	>
-		<figure class="bg-base-200"><img src={logo} alt="Logo" class="h-auto w-48 lg:w-64" /></figure>
+		<figure class="bg-base-200 p-4">
+			<div class="image-container">
+				<img src={logo} alt="Logo" class="responsive-image" />
+			</div>
+		</figure>
 		<div class="card-body w-80">
 			<h2 class="card-title text-2xl">Login</h2>
 			<form class="fieldset w-full max-w-xs">
@@ -82,6 +86,22 @@
 </div>
 
 <style>
+	.image-container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.responsive-image {
+		max-width: 100%;
+		max-height: 100%;
+		width: auto;
+		height: auto;
+		object-fit: contain;
+	}
+	
 	.failure {
 		animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 		transform: translate3d(0, 0, 0);
diff --git a/interface/src/routes/menu.svelte b/interface/src/routes/menu.svelte
index d2f416d40..0ff8b650c 100644
--- a/interface/src/routes/menu.svelte
+++ b/interface/src/routes/menu.svelte
@@ -154,7 +154,7 @@
 		class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
 		onclick={() => setActiveMenuItem('')}
 	>
-		<img src={logo} alt="Logo" class="h-12 w-12" />
+		<img src={logo} alt="Logo" class="max-h-12 max-w-12 h-auto w-auto object-contain" />
 		<h1 class="px-4 text-2xl font-bold">{page.data.appName}</h1>
 	</a>
 	<ul class="menu w-full rounded-box menu-vertical flex-nowrap overflow-y-auto">
diff --git a/interface/src/routes/system/update/GithubFirmwareManager.svelte b/interface/src/routes/system/update/GithubFirmwareManager.svelte
index e6deb0020..57aaac45f 100644
--- a/interface/src/routes/system/update/GithubFirmwareManager.svelte
+++ b/interface/src/routes/system/update/GithubFirmwareManager.svelte
@@ -33,7 +33,7 @@
 			const results = await githubResponse.json();
 			return results;
 		} catch (error) {
-			console.error('Error:', error);
+			console.warn(error);
 		}
 		return;
 	}
diff --git a/interface/src/routes/user/EditUser.svelte b/interface/src/routes/user/EditUser.svelte
index e4d376772..a833288be 100644
--- a/interface/src/routes/user/EditUser.svelte
+++ b/interface/src/routes/user/EditUser.svelte
@@ -19,13 +19,17 @@
 		isOpen,
 		title,
 		onSaveUser,
-		user = $bindable({
+		user: _user = {
 			username: '',
 			password: '',
 			admin: false
-		})
+		}
 	}: Props = $props();
 
+	// Make passed object reactive to prevent Svelte warning 'binding_property_non_reactive'
+	// https://github.com/sveltejs/svelte/issues/12320
+	let user = $state(_user);
+
 	let errorUsername = $state(false);
 
 	let usernameEditable = $state(false);
diff --git a/interface/src/routes/wifi/sta/EditNetwork.svelte b/interface/src/routes/wifi/sta/EditNetwork.svelte
new file mode 100644
index 000000000..ed07447d2
--- /dev/null
+++ b/interface/src/routes/wifi/sta/EditNetwork.svelte
@@ -0,0 +1,343 @@
+<script lang="ts">
+	import { modals } from 'svelte-modals';
+	import { fly } from 'svelte/transition';
+	import { slide } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import type { KnownNetworkItem } from '$lib/types/models';
+	import InputPassword from '$lib/components/InputPassword.svelte';
+	import Cancel from '~icons/tabler/x';
+	import Set from '~icons/tabler/check';
+
+	interface Props {
+		isOpen: boolean;
+		title: string;
+		networkEditable?: KnownNetworkItem;
+		onSaveNetwork: any;
+	}
+
+	let {
+		isOpen,
+		title,
+		networkEditable: _networkEditable = {
+			ssid: '',
+			password: '',
+			static_ip_config: false,
+			local_ip: undefined,
+			subnet_mask: undefined,
+			gateway_ip: undefined,
+			dns_ip_1: undefined,
+			dns_ip_2: undefined
+		} as KnownNetworkItem,
+		onSaveNetwork
+	}: Props = $props();
+
+	// Make passed object reactive to prevent Svelte warning 'binding_property_non_reactive'
+	// https://github.com/sveltejs/svelte/issues/12320
+	let networkEditable = $state(_networkEditable);
+
+	// Create helper variable to achieve reactivity
+	let staticIPConfig = $state(networkEditable.static_ip_config);
+
+	// Use this to directly access the form's DOM element
+	let formField: any = $state();
+
+	let formErrors = $state({
+		ssid: false,
+		local_ip: false,
+		gateway_ip: false,
+		subnet_mask: false,
+		dns_1: false,
+		dns_2: false
+	});
+
+	function validateNetworkSettings() {
+		let valid = true;
+
+		// Validate SSID
+		if (networkEditable.ssid.length < 3 || networkEditable.ssid.length > 32) {
+			valid = false;
+			formErrors.ssid = true;
+		} else {
+			formErrors.ssid = false;
+		}
+
+		if (staticIPConfig) {
+			// RegEx for IPv4
+			const regexExp =
+				/\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/;
+
+			// Validate gateway IP
+			if (!regexExp.test(networkEditable.gateway_ip!)) {
+				valid = false;
+				formErrors.gateway_ip = true;
+			} else {
+				formErrors.gateway_ip = false;
+			}
+
+			// Validate Subnet Mask
+			if (!regexExp.test(networkEditable.subnet_mask!)) {
+				valid = false;
+				formErrors.subnet_mask = true;
+			} else {
+				formErrors.subnet_mask = false;
+			}
+
+			// Validate local IP
+			if (!regexExp.test(networkEditable.local_ip!)) {
+				valid = false;
+				formErrors.local_ip = true;
+			} else {
+				formErrors.local_ip = false;
+			}
+
+			// Validate DNS 1
+			if (!regexExp.test(networkEditable.dns_ip_1!)) {
+				valid = false;
+				formErrors.dns_1 = true;
+			} else {
+				formErrors.dns_1 = false;
+			}
+
+			// Validate DNS 2
+			if (!regexExp.test(networkEditable.dns_ip_2!)) {
+				valid = false;
+				formErrors.dns_2 = true;
+			} else {
+				formErrors.dns_2 = false;
+			}
+		} else {
+			formErrors.local_ip = false;
+			formErrors.subnet_mask = false;
+			formErrors.gateway_ip = false;
+			formErrors.dns_1 = false;
+			formErrors.dns_2 = false;
+		}
+
+		if (valid) {
+			networkEditable.static_ip_config = staticIPConfig;
+			onSaveNetwork(networkEditable);
+		}
+	}
+
+	function preventDefault(fn: (event: Event) => void) {
+		return function (event: Event) {
+			event.preventDefault();
+			fn(event);
+		};
+	}
+</script>
+
+{#if isOpen}
+	<div
+		role="dialog"
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
+		transition:fly={{ y: 50 }}
+	>
+		<div
+			class="rounded-box bg-base-100 shadow-secondary/30 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg md:w-[28rem]"
+		>
+			<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
+			<div class="divider my-2"></div>
+			<form
+				class="fieldset"
+				onsubmit={preventDefault(validateNetworkSettings)}
+				novalidate
+				bind:this={formField}
+			>
+				<div
+					class="grid w-full grid-cols-1 content-center gap-4 px-4 sm:grid-cols-2"
+					transition:slide|local={{ duration: 300, easing: cubicOut }}
+				>
+					<div>
+						<label class="label" for="ssid">SSID</label>
+						<input
+							type="text"
+							class="input input-bordered invalid:border-error w-full invalid:border-2 {formErrors.ssid
+								? 'border-error border-2'
+								: ''}"
+							bind:value={networkEditable.ssid}
+							id="ssid"
+							min="3"
+							max="32"
+							required
+						/>
+						{#if formErrors.ssid}
+							<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+								<label for="ssid" class="label">
+									<span class="text-error">
+										SSID must be between 3 and 32 characters long.
+									</span>
+								</label>
+							</div>
+						{/if}
+					</div>
+					<div>
+						<label class="label" for="pwd">Password</label>
+						<InputPassword bind:value={networkEditable.password} id="pwd" />
+					</div>
+					<label
+						class="label inline-flex cursor-pointer content-end justify-start gap-4 sm:col-span-2"
+					>
+						<input
+							type="checkbox"
+							bind:checked={staticIPConfig}
+							class="checkbox checkbox-primary"
+						/>
+						<span>Use static IP config</span>
+					</label>
+				</div>
+
+				{#if staticIPConfig}
+					<div
+						class="grid w-full grid-cols-1 content-center mt-4 gap-4 px-4 sm:grid-cols-2"
+						transition:slide|local={{ duration: 300, easing: cubicOut }}
+					>
+						<div>
+							<label class="label" for="localIP">Local IP</label>
+							<input
+								type="text"
+								class="input input-bordered w-full {formErrors.local_ip
+									? 'border-error border-2'
+									: ''}"
+								minlength="7"
+								maxlength="15"
+								size="15"
+								bind:value={networkEditable.local_ip}
+								id="localIP"
+								required
+							/>
+							{#if formErrors.local_ip}
+								<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+									<label for="localIP" class="label">
+										<span class="text-error">
+											Local IP must be a valid IPv4 address.
+										</span>
+									</label>
+								</div>
+							{/if}
+						</div>
+
+						<div>
+							<label class="label" for="gateway">Gateway IP</label>
+							<input
+								type="text"
+								class="input input-bordered w-full {formErrors.gateway_ip
+									? 'border-error border-2'
+									: ''}"
+								minlength="7"
+								maxlength="15"
+								size="15"
+								bind:value={networkEditable.gateway_ip}
+								id="gateway"
+								required
+							/>
+							{#if formErrors.gateway_ip}
+								<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+									<label for="gateway" class="label">
+										<span class="text-error">
+											Gateway IP must be a valid IPv4 address.
+										</span>
+									</label>
+								</div>
+							{/if}
+						</div>
+						<div>
+							<label class="label" for="subnet">Subnet Mask</label>
+							<input
+								type="text"
+								class="input input-bordered w-full {formErrors.subnet_mask
+									? 'border-error border-2'
+									: ''}"
+								minlength="7"
+								maxlength="15"
+								size="15"
+								bind:value={networkEditable.subnet_mask}
+								id="subnet"
+								required
+							/>
+							{#if formErrors.subnet_mask}
+								<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+									<label for="subnet" class="label">
+										<span class="text-error">
+											Subnet Mask must be a valid IPv4 subnet mask.
+										</span>
+									</label>
+								</div>
+							{/if}
+						</div>
+						<div>
+							<label class="label" for="dns_1">DNS 1</label>
+							<input
+								type="text"
+								class="input input-bordered w-full {formErrors.dns_1
+									? 'border-error border-2'
+									: ''}"
+								minlength="7"
+								maxlength="15"
+								size="15"
+								bind:value={networkEditable.dns_ip_1}
+								id="dns_1"
+								required
+							/>
+							{#if formErrors.dns_1}
+								<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+									<label for="dns_1" class="label">
+										<span class="text-error">
+											DNS 1 must be a valid IPv4 address.
+										</span>
+									</label>
+								</div>
+							{/if}
+						</div>
+						<div>
+							<label class="label" for="dns_2">DNS 2</label>
+							<input
+								type="text"
+								class="input input-bordered w-full {formErrors.dns_2
+									? 'border-error border-2'
+									: ''}"
+								minlength="7"
+								maxlength="15"
+								size="15"
+								bind:value={networkEditable.dns_ip_2}
+								id="dns_2"
+								required
+							/>
+							{#if formErrors.dns_2}
+								<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+									<label for="dns_2" class="label">
+										<span class="text-error">
+											DNS 2 must be a valid IPv4 address.
+										</span>
+									</label>
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/if}
+
+				<div class="divider my-2"></div>
+
+				<div class="flex justify-end gap-2">
+					<button
+						class="btn btn-neutral text-neutral-content inline-flex items-center"
+						onclick={() => {
+							modals.close(1);
+						}}
+						type="button"
+					>
+						<Cancel class="mr-2 h-5 w-5" />
+						<span>Cancel</span>
+					</button>
+					<button
+						class="btn btn-primary text-primary-content inline-flex items-center"
+						type="submit"
+					>
+						<Set class="mr-2 h-5 w-5" />
+						<span>Set</span>
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+{/if}
diff --git a/interface/src/routes/wifi/sta/Scan.svelte b/interface/src/routes/wifi/sta/Scan.svelte
index 733f46b24..c79770def 100644
--- a/interface/src/routes/wifi/sta/Scan.svelte
+++ b/interface/src/routes/wifi/sta/Scan.svelte
@@ -113,6 +113,8 @@
 							<li>
 								<!-- svelte-ignore a11y_click_events_have_key_events -->
 								<div
+									role="button"
+									tabindex={i}
 									class="bg-base-200 rounded-btn my-1 flex items-center space-x-3 hover:scale-[1.02] active:scale-[0.98]"
 									onclick={() => {
 										storeNetwork(network.ssid);
diff --git a/interface/src/routes/wifi/sta/Wifi.svelte b/interface/src/routes/wifi/sta/Wifi.svelte
index f903373f2..1612d0497 100644
--- a/interface/src/routes/wifi/sta/Wifi.svelte
+++ b/interface/src/routes/wifi/sta/Wifi.svelte
@@ -1,19 +1,24 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { socket } from '$lib/stores/socket';
 	import { modals } from 'svelte-modals';
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { user } from '$lib/stores/user';
 	import { page } from '$app/state';
 	import { notifications } from '$lib/components/toasts/notifications';
-	import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
+	import DraggableList from '$lib/components/DraggableList.svelte';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import InputPassword from '$lib/components/InputPassword.svelte';
+	import Collapsible from '$lib/components/Collapsible.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import InfoDialog from '$lib/components/InfoDialog.svelte';
+	import type { KnownNetworkItem, WifiSettings, WifiStatus } from '$lib/types/models';
 	import ScanNetworks from './Scan.svelte';
+	import EditNetwork from './EditNetwork.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
 	import AP from '~icons/tabler/access-point';
 	import Router from '~icons/tabler/router';
+	import Settings from '~icons/tabler/settings';
 	import MAC from '~icons/tabler/dna-2';
 	import Home from '~icons/tabler/home';
 	import WiFi from '~icons/tabler/wifi';
@@ -27,43 +32,46 @@
 	import Add from '~icons/tabler/circle-plus';
 	import Edit from '~icons/tabler/pencil';
 	import Delete from '~icons/tabler/trash';
+	import Grip from '~icons/tabler/grip-horizontal';
 	import Cancel from '~icons/tabler/x';
 	import Check from '~icons/tabler/check';
-	import InfoDialog from '$lib/components/InfoDialog.svelte';
-	import type { KnownNetworkItem, WifiSettings, WifiStatus } from '$lib/types/models';
+	import Save from '~icons/tabler/device-floppy';
+	import Info from '~icons/tabler/info-circle';
 
-	let static_ip_config = $state(false);
+	type WifiReconnectEvent = {
+		delay_ms: number;
+	};
 
-	let networkEditable: KnownNetworkItem = $state({
+	let wifiStatus: WifiStatus = $state({
+		status: 0,
 		ssid: '',
-		password: '',
-		static_ip_config: false,
-		local_ip: undefined,
-		subnet_mask: undefined,
-		gateway_ip: undefined,
-		dns_ip_1: undefined,
-		dns_ip_2: undefined
+		local_ip: '',
+		ip_address: '',
+		mac_address: '',
+		rssi: 0,
+		bssid: '',
+		channel: 0,
+		gateway_ip: '',
+		subnet_mask: '',
+		dns_ip_1: '',
+		dns_ip_2: '',
+		connected: false
 	});
 
-	let newNetwork: boolean = $state(true);
-	let showNetworkEditor: boolean = $state(false);
+	let wifiSettings: WifiSettings = $state({
+		hostname: '',
+		connection_mode: 1,
+		wifi_networks: [] as KnownNetworkItem[]
+	});
 
-	let wifiStatus: WifiStatus = $state();
-	let wifiSettings: WifiSettings = $state();
+	// Stringify to recognize changes
+	// svelte-ignore state_referenced_locally
+	let strWifiSettings: string = $state(JSON.stringify(wifiSettings));
+	// Recognize changes in settings
+	let isSettingsDirty: boolean = $derived(JSON.stringify(wifiSettings) !== strWifiSettings);
 
 	let showWifiDetails = $state(false);
 
-	let formField: any = $state();
-
-	let formErrors = $state({
-		ssid: false,
-		local_ip: false,
-		gateway_ip: false,
-		subnet_mask: false,
-		dns_1: false,
-		dns_2: false
-	});
-
 	let formErrorhostname = $state(false);
 
 	let connectionMode = [
@@ -77,7 +85,7 @@
 		},
 		{
 			id: 2,
-			text: `Priority`
+			text: `Priority (Sequence)`
 		}
 	];
 
@@ -94,7 +102,6 @@
 		} catch (error) {
 			console.error('Error:', error);
 		}
-		return wifiStatus;
 	}
 
 	async function getWifiSettings() {
@@ -107,19 +114,13 @@
 				}
 			});
 			wifiSettings = await response.json();
+			strWifiSettings = JSON.stringify(wifiSettings); // Store the recently loaded settings in a string variable
 		} catch (error) {
 			console.error('Error:', error);
 		}
-		return wifiSettings;
 	}
 
-	const interval = setInterval(async () => {
-		getWifiStatus();
-	}, 5000);
-
-	onDestroy(() => clearInterval(interval));
-
-	async function postWiFiSettings(data: WifiSettings) {
+	async function postWiFiSettings() {
 		try {
 			const response = await fetch('/rest/wifiSettings', {
 				method: 'POST',
@@ -127,164 +128,111 @@
 					Authorization: page.data.features.security ? 'Bearer ' + $user.bearer_token : 'Basic',
 					'Content-Type': 'application/json'
 				},
-				body: JSON.stringify(data)
+				body: JSON.stringify(wifiSettings)
 			});
 			if (response.status == 200) {
 				notifications.success('Wi-Fi settings updated.', 3000);
 				wifiSettings = await response.json();
+				strWifiSettings = JSON.stringify(wifiSettings); // Store the recently loaded settings in a string variable
 			} else {
-				notifications.error('User not authorized.', 3000);
+				notifications.error('Failed to update Wi-Fi settings.', 5000);
 			}
 		} catch (error) {
 			console.error('Error:', error);
 		}
 	}
 
-	function validateHostName() {
+	const interval = setInterval(async () => {
+		getWifiStatus();
+	}, 5000);
+
+	onMount(() => {
+		socket.on<WifiReconnectEvent>('reconnect', (data) => {
+			notifications.warning(
+				`Reconnecting shortly as new WiFi settings will be applied in ${Math.round(data.delay_ms / 1000)} seconds.`,
+				5000
+			);
+		});
+	});
+
+	onDestroy(() => {
+		clearInterval(interval);
+		socket.off('reconnect');
+	});
+
+	function checkHostname() {
 		if (wifiSettings.hostname.length < 3 || wifiSettings.hostname.length > 32) {
 			formErrorhostname = true;
 		} else {
 			formErrorhostname = false;
-			// Post to REST API
-			postWiFiSettings(wifiSettings);
 		}
-	}
-
-	function validateWiFiForm() {
-		let valid = true;
-
-		// Validate SSID
-		if (networkEditable.ssid.length < 3 || networkEditable.ssid.length > 32) {
-			valid = false;
-			formErrors.ssid = true;
-		} else {
-			formErrors.ssid = false;
-		}
-
-		networkEditable.static_ip_config = static_ip_config;
-
-		if (static_ip_config) {
-			// RegEx for IPv4
-			const regexExp =
-				/\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/;
-
-			// Validate gateway IP
-			if (!regexExp.test(networkEditable.gateway_ip!)) {
-				valid = false;
-				formErrors.gateway_ip = true;
-			} else {
-				formErrors.gateway_ip = false;
-			}
-
-			// Validate Subnet Mask
-			if (!regexExp.test(networkEditable.subnet_mask!)) {
-				valid = false;
-				formErrors.subnet_mask = true;
-			} else {
-				formErrors.subnet_mask = false;
-			}
-
-			// Validate local IP
-			if (!regexExp.test(networkEditable.local_ip!)) {
-				valid = false;
-				formErrors.local_ip = true;
-			} else {
-				formErrors.local_ip = false;
-			}
 
-			// Validate DNS 1
-			if (!regexExp.test(networkEditable.dns_ip_1!)) {
-				valid = false;
-				formErrors.dns_1 = true;
-			} else {
-				formErrors.dns_1 = false;
-			}
+		return !formErrorhostname;
+	}
 
-			// Validate DNS 2
-			if (!regexExp.test(networkEditable.dns_ip_2!)) {
-				valid = false;
-				formErrors.dns_2 = true;
-			} else {
-				formErrors.dns_2 = false;
-			}
-		} else {
-			formErrors.local_ip = false;
-			formErrors.subnet_mask = false;
-			formErrors.gateway_ip = false;
-			formErrors.dns_1 = false;
-			formErrors.dns_2 = false;
-		}
-		// Submit JSON to REST API
-		if (valid) {
-			if (newNetwork) {
-				wifiSettings.wifi_networks.push(networkEditable);
-			} else {
-				wifiSettings.wifi_networks.splice(
-					wifiSettings.wifi_networks.indexOf(networkEditable),
-					1,
-					networkEditable
-				);
-			}
-			addNetwork();
-			wifiSettings.wifi_networks = [...wifiSettings.wifi_networks]; //Trigger reactivity
-			showNetworkEditor = false;
+	function applyWifiSettings() {
+		if (checkHostname()) {
+			postWiFiSettings();
 		}
 	}
 
 	function scanForNetworks() {
 		modals.open(ScanNetworks, {
-			storeNetwork: (network: string) => {
-				addNetwork();
-				networkEditable.ssid = network;
-				showNetworkEditor = true;
+			storeNetwork: (ssid: string) => {
+				console.log('Storing network:', ssid);
 				modals.close();
+				handleNewNetwork(ssid);
 			}
 		});
 	}
 
-	function addNetwork() {
-		newNetwork = true;
-		networkEditable = {
-			ssid: '',
-			password: '',
-			static_ip_config: false,
-			local_ip: undefined,
-			subnet_mask: undefined,
-			gateway_ip: undefined,
-			dns_ip_1: undefined,
-			dns_ip_2: undefined
-		};
+	function handleNewNetwork(ssid?: string) {
+		modals.open(EditNetwork, {
+			title: 'Add network',
+			networkEditable: {
+				ssid: ssid || '',
+				password: '',
+				static_ip_config: false,
+				local_ip: undefined,
+				subnet_mask: undefined,
+				gateway_ip: undefined,
+				dns_ip_1: undefined,
+				dns_ip_2: undefined
+			},
+			onSaveNetwork: async (newNetwork: KnownNetworkItem) => {
+				wifiSettings.wifi_networks = [...wifiSettings.wifi_networks, newNetwork];
+				modals.close();
+			}
+		});
 	}
 
 	function handleEdit(index: number) {
-		newNetwork = false;
-		showNetworkEditor = true;
-		networkEditable = wifiSettings.wifi_networks[index];
+		modals.open(EditNetwork, {
+			title: 'Edit network',
+			networkEditable: $state.snapshot(wifiSettings.wifi_networks[index]), // Deep copy
+			onSaveNetwork: async (editedNetwork: KnownNetworkItem) => {
+				wifiSettings.wifi_networks[index] = editedNetwork;
+				modals.close();
+			}
+		});
 	}
 
 	function confirmDelete(index: number) {
 		modals.open(ConfirmDialog, {
-			title: 'Delete Network',
-			message: 'Are you sure you want to delete this network?',
+			title: 'Delete Network?',
+			message: `Are you sure you want to delete network \'${wifiSettings.wifi_networks[index].ssid}\'?`,
 			labels: {
 				cancel: { label: 'Cancel', icon: Cancel },
 				confirm: { label: 'Delete', icon: Delete }
 			},
 			onConfirm: () => {
-				// Check if network is currently been edited and delete as well
-				if (wifiSettings.wifi_networks[index].ssid === networkEditable.ssid) {
-					addNetwork();
-				}
-				// Remove network from array
 				wifiSettings.wifi_networks.splice(index, 1);
-				wifiSettings.wifi_networks = [...wifiSettings.wifi_networks]; //Trigger reactivity
-				showNetworkEditor = false;
 				modals.close();
 			}
 		});
 	}
 
-	function checkNetworkList() {
+	function isNetworkListTooLong() {
 		if (wifiSettings.wifi_networks.length >= 5) {
 			modals.open(InfoDialog, {
 				title: 'Reached Maximum Networks',
@@ -295,26 +243,19 @@
 					modals.close();
 				}
 			});
-			return false;
-		} else {
 			return true;
+		} else {
+			return false;
 		}
 	}
 
-	function onDrop({ detail: { from, to } }: CustomEvent<DropEvent>) {
-		if (!to || from === to) {
-			return;
-		}
-
-		wifiSettings.wifi_networks = reorder(wifiSettings.wifi_networks, from.index, to.index);
-		console.log(wifiSettings.wifi_networks);
+	function handleNetworkReorder(reorderedNetworks: KnownNetworkItem[]) {
+		wifiSettings.wifi_networks = reorderedNetworks;
 	}
 
-	function preventDefault(fn) {
-		return function (event) {
-			event.preventDefault();
-			fn.call(this, event);
-		};
+	async function getWifiData() {
+		await getWifiStatus();
+		await getWifiSettings();
 	}
 </script>
 
@@ -325,10 +266,10 @@
 	{#snippet title()}
 		<span>WiFi Connection</span>
 	{/snippet}
-	<div class="w-full">
-		{#await getWifiStatus()}
-			<Spinner />
-		{:then nothing}
+	{#await getWifiData()}
+		<Spinner />
+	{:then nothing}
+		<div class="w-full overflow-x-auto">
 			<div
 				class="flex w-full flex-col space-y-1"
 				transition:slide|local={{ duration: 300, easing: cubicOut }}
@@ -471,284 +412,158 @@
 					</div>
 				</div>
 			{/if}
-		{/await}
-	</div>
+		</div>
 
-	{#if !page.data.features.security || $user.admin}
-		<div class="bg-base-200 shadow-lg relative grid w-full max-w-2xl self-center overflow-hidden">
-			<div class="h-16 flex w-full items-center justify-between space-x-3 p-0 text-xl font-medium">
-				Saved Networks
-			</div>
-			{#await getWifiSettings()}
-				<Spinner />
-			{:then nothing}
-				<div class="relative w-full overflow-visible">
+		{#if !page.data.features.security || $user.admin}
+			<Collapsible open={true} class="shadow-lg" isDirty={isSettingsDirty}>
+				{#snippet icon()}
+					<Settings class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+				{/snippet}
+				{#snippet title()}
+					<span>Settings & Networks</span>
+				{/snippet}
+				<div class="fieldset">
+					<div class="grid w-full grid-cols-1 content-center gap-4 sm:grid-cols-2">
+						<div>
+							<label class="label" for="hostname">Host Name (mDNS)</label>
+							<input
+								type="text"
+								min="3"
+								max="32"
+								class="input input-bordered invalid:border-error w-full invalid:border-2 {formErrorhostname
+									? 'border-error border-2'
+									: ''}"
+								bind:value={wifiSettings.hostname}
+								id="hostname"
+								required
+							/>
+							{#if formErrorhostname}
+								<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+									<label for="hostname" class="label">
+										<span class="text-error">
+											Host name must be between 3 and 32 characters long.
+										</span>
+									</label>
+								</div>
+							{/if}
+						</div>
+
+						<div>
+							<label class="label" for="apmode">WiFi Connection Mode</label>
+							<select class="select w-full" id="apmode" bind:value={wifiSettings.connection_mode}>
+								{#each connectionMode as mode}
+									<option value={mode.id}>
+										{mode.text}
+									</option>
+								{/each}
+							</select>
+						</div>
+					</div>
+				</div>
+
+				<div class="divider mt-2 mb-0"></div>
+
+				<div class="flex justify-end w-full gap-x-2">
 					<button
-						class="btn btn-primary text-primary-content btn-md absolute -top-14 right-16"
+						class="btn btn-primary text-primary-content btn-md"
 						onclick={() => {
-							if (checkNetworkList()) {
-								addNetwork();
-								showNetworkEditor = true;
-							}
+							handleNewNetwork();
 						}}
 					>
-						<Add class="h-6 w-6" /></button
-					>
+						<Add class="h-6 w-6" />
+					</button>
 					<button
-						class="btn btn-primary text-primary-content btn-md absolute -top-14 right-0"
+						class="btn btn-primary text-primary-content btn-md"
 						onclick={() => {
-							if (checkNetworkList()) {
+							if (!isNetworkListTooLong()) {
 								scanForNetworks();
-								showNetworkEditor = true;
 							}
 						}}
 					>
-						<Scan class="h-6 w-6" /></button
-					>
+						<Scan class="h-6 w-6" />
+					</button>
+				</div>
 
-					<div
-						class="overflow-x-auto space-y-1"
-						transition:slide|local={{ duration: 300, easing: cubicOut }}
-					>
-						<DragDropList
-							id="networks"
-							type={VerticalDropZone}
-							itemSize={60}
-							itemCount={wifiSettings.wifi_networks.length}
-							on:drop={onDrop}
+				<div transition:slide|local={{ duration: 300, easing: cubicOut }}>
+					{#if wifiSettings.wifi_networks.length === 0}
+						<div class="text-center text-base-content/50 mt-2">
+							No WiFi networks configured yet.<br />
+							Scan for available networks or add one manually.
+						</div>
+					{:else}
+						<DraggableList
+							items={wifiSettings.wifi_networks}
+							onReorder={handleNetworkReorder}
+							class="space-y-2"
 						>
-							{#snippet children({ index })}
+							{#snippet children({ item: network, index }: { item: any; index: number })}
 								<!-- svelte-ignore a11y_click_events_have_key_events -->
 								<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
+									<Grip class="h-6 w-6 text-base-content/30 cursor-grab" />
 									<div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0">
 										<Router class="text-primary-content h-auto w-full scale-75" />
 									</div>
 									<div>
-										<div class="font-bold">{wifiSettings.wifi_networks[index].ssid}</div>
+										<div class="font-bold">{network.ssid}</div>
 									</div>
-									{#if !page.data.features.security || $user.admin}
-										<div class="grow"></div>
-										<div class="space-x-0 px-0 mx-0">
-											<button
-												class="btn btn-ghost btn-sm"
-												onclick={() => {
-													handleEdit(index);
-												}}
-											>
-												<Edit class="h-6 w-6" /></button
-											>
-											<button
-												class="btn btn-ghost btn-sm"
-												onclick={() => {
-													confirmDelete(index);
-												}}
-											>
-												<Delete class="text-error h-6 w-6" />
-											</button>
-										</div>
+									{#if network.static_ip_config}
+										<div class="badge badge-sm badge-secondary opacity-75">Static</div>
+									{:else}
+										<div class="badge badge-sm badge-outline badge-secondary opacity-75">DHCP</div>
 									{/if}
+									<div class="grow"></div>
+									<div class="space-x-0 px-0 mx-0">
+										<button
+											class="btn btn-ghost btn-sm"
+											onclick={() => {
+												const actualIndex = wifiSettings.wifi_networks.findIndex(
+													(n) => n.ssid === network.ssid
+												);
+												handleEdit(actualIndex);
+											}}
+										>
+											<Edit class="h-6 w-6" /></button
+										>
+										<button
+											class="btn btn-ghost btn-sm"
+											onclick={() => {
+												const actualIndex = wifiSettings.wifi_networks.findIndex(
+													(n) => n.ssid === network.ssid
+												);
+												confirmDelete(actualIndex);
+											}}
+										>
+											<Delete class="text-error h-6 w-6" />
+										</button>
+									</div>
 								</div>
 							{/snippet}
-						</DragDropList>
-					</div>
+						</DraggableList>
+					{/if}
 				</div>
-
-				<div class="divider mb-0"></div>
-				<div
-					class="flex flex-col gap-2 p-0"
-					transition:slide|local={{ duration: 300, easing: cubicOut }}
-				>
-					<form
-						class="fieldset"
-						onsubmit={preventDefault(validateWiFiForm)}
-						novalidate
-						bind:this={formField}
-					>
-						<div class="grid w-full grid-cols-1 content-center gap-x-4 px-4 sm:grid-cols-2">
-							<div>
-								<label class="label" for="channel">Host Name</label>
-								<input
-									type="text"
-									min="1"
-									max="32"
-									class="input w-full invalid:border-error invalid:border-2 {formErrorhostname
-										? 'border-error border-2'
-										: ''}"
-									bind:value={wifiSettings.hostname}
-									id="channel"
-									required
-								/>
-								<label class="label" for="channel">
-									<span class=" text-error {formErrorhostname ? '' : 'hidden'}"
-										>Host name must be between 2 and 32 characters long</span
-									>
-								</label>
-							</div>
-
-							<div>
-								<label class="label" for="apmode">WiFi Connection Mode </label>
-								<select class="select w-full" id="apmode" bind:value={wifiSettings.connection_mode}>
-									{#each connectionMode as mode}
-										<option value={mode.id}>
-											{mode.text}
-										</option>
-									{/each}
-								</select>
-							</div>
+				{#if wifiSettings.connection_mode === 2 && wifiSettings.wifi_networks.length > 1}
+					<div class="w-full" transition:slide|local={{ duration: 300, easing: cubicOut }}>
+						<div role="alert" class="alert bg-base-300 mt-2">
+							<Info class="h-6 w-6" />
+							<div>Arrange the networks according to their priority (most important first).</div>
 						</div>
+					</div>
+				{/if}
 
-						{#if showNetworkEditor}
-							<div class="divider my-0"></div>
-							<div
-								class="grid w-full grid-cols-1 content-center gap-x-4 px-4 gap-y-2 sm:grid-cols-2"
-								transition:slide|local={{ duration: 300, easing: cubicOut }}
-							>
-								<div>
-									<label class="label" for="ssid">SSID </label>
-									<input
-										type="text"
-										class="input w-full invalid:border-error invalid:border-2 {formErrors.ssid
-											? 'border-error border-2'
-											: ''}"
-										bind:value={networkEditable.ssid}
-										id="ssid"
-										min="2"
-										max="32"
-										required
-									/>
-									<label class="label" for="ssid">
-										<span class=" text-error {formErrors.ssid ? '' : 'hidden'}"
-											>SSID must be between 3 and 32 characters long</span
-										>
-									</label>
-								</div>
-								<div>
-									<label class="label" for="pwd">Password </label>
-									<InputPassword bind:value={networkEditable.password} id="pwd" />
-								</div>
-								<label
-									class="label inline-flex cursor-pointer content-end justify-start gap-4 mt-2 sm:mb-4"
-								>
-									<input
-										type="checkbox"
-										bind:checked={static_ip_config}
-										class="checkbox checkbox-primary sm:-mb-5"
-									/>
-									<span class="sm:-mb-5">Static IP Config?</span>
-								</label>
-							</div>
-							{#if static_ip_config}
-								<div
-									class="grid w-full grid-cols-1 content-center gap-x-4 px-4 gap-y-2 sm:grid-cols-2"
-									transition:slide|local={{ duration: 300, easing: cubicOut }}
-								>
-									<div>
-										<label class="label" for="localIP">Local IP </label>
-										<input
-											type="text"
-											class="input w-full {formErrors.local_ip ? 'border-error border-2' : ''}"
-											minlength="7"
-											maxlength="15"
-											size="15"
-											bind:value={networkEditable.local_ip}
-											id="localIP"
-											required
-										/>
-										<label class="label" for="localIP">
-											<span class=" text-error {formErrors.local_ip ? '' : 'hidden'}"
-												>Must be a valid IPv4 address</span
-											>
-										</label>
-									</div>
+				<div class="divider mt-2 mb-0"></div>
 
-									<div>
-										<label class="label" for="gateway">Gateway IP </label>
-										<input
-											type="text"
-											class="input w-full {formErrors.gateway_ip ? 'border-error border-2' : ''}"
-											minlength="7"
-											maxlength="15"
-											size="15"
-											bind:value={networkEditable.gateway_ip}
-											id="gateway"
-											required
-										/>
-										<label class="label" for="gateway">
-											<span class=" text-error {formErrors.gateway_ip ? '' : 'hidden'}"
-												>Must be a valid IPv4 address</span
-											>
-										</label>
-									</div>
-									<div>
-										<label class="label" for="subnet">Subnet Mask </label>
-										<input
-											type="text"
-											class="input w-full {formErrors.subnet_mask ? 'border-error border-2' : ''}"
-											minlength="7"
-											maxlength="15"
-											size="15"
-											bind:value={networkEditable.subnet_mask}
-											id="subnet"
-											required
-										/>
-										<label class="label" for="subnet">
-											<span class=" text-error {formErrors.subnet_mask ? '' : 'hidden'}"
-												>Must be a valid IPv4 address</span
-											>
-										</label>
-									</div>
-									<div>
-										<label class="label" for="gateway">DNS 1 </label>
-										<input
-											type="text"
-											class="input w-full {formErrors.dns_1 ? 'border-error border-2' : ''}"
-											minlength="7"
-											maxlength="15"
-											size="15"
-											bind:value={networkEditable.dns_ip_1}
-											id="gateway"
-											required
-										/>
-										<label class="label" for="gateway">
-											<span class=" text-error {formErrors.dns_1 ? '' : 'hidden'}"
-												>Must be a valid IPv4 address</span
-											>
-										</label>
-									</div>
-									<div>
-										<label class="label" for="subnet">DNS 2 </label>
-										<input
-											type="text"
-											class="input w-full {formErrors.dns_2 ? 'border-error border-2' : ''}"
-											minlength="7"
-											maxlength="15"
-											size="15"
-											bind:value={networkEditable.dns_ip_2}
-											id="subnet"
-											required
-										/>
-										<label class="label" for="subnet">
-											<span class=" text-error {formErrors.dns_2 ? '' : 'hidden'}"
-												>Must be a valid IPv4 address</span
-											>
-										</label>
-									</div>
-								</div>
-							{/if}
-						{/if}
-
-						<div class="divider mb-2 mt-0"></div>
-						<div class="mx-4 mb-4 flex flex-wrap justify-end gap-2">
-							<button class="btn btn-primary" type="submit" disabled={!showNetworkEditor}
-								>{newNetwork ? 'Add Network' : 'Update Network'}</button
-							>
-							<button class="btn btn-primary" type="button" onclick={validateHostName}
-								>Apply Settings</button
-							>
-						</div>
-					</form>
+				<div class="flex flex-wrap justify-end mb-4">
+					<button
+						class="btn btn-primary"
+						type="button"
+						disabled={!isSettingsDirty}
+						onclick={applyWifiSettings}
+					>
+						<Save class="mr-2 h-5 w-5" />
+						<span>Apply Settings</span>
+					</button>
 				</div>
-			{/await}
-		</div>
-	{/if}
+			</Collapsible>
+		{/if}
+	{/await}
 </SettingsCard>
diff --git a/interface/svelte.config.js b/interface/svelte.config.js
index 04d8f6529..6bbd8124b 100644
--- a/interface/svelte.config.js
+++ b/interface/svelte.config.js
@@ -14,7 +14,10 @@ const config = {
 			fallback: 'index.html',
 			precompress: false,
 			strict: true
-		})
+		}),
+		alias: {
+			$src: './src'
+		}
 		//prerender: { default: true },
 	}
 };
diff --git a/lib/framework/SleepService.cpp b/lib/framework/SleepService.cpp
index 89b4c4bad..ad101a487 100644
--- a/lib/framework/SleepService.cpp
+++ b/lib/framework/SleepService.cpp
@@ -80,7 +80,7 @@ void SleepService::sleepNow()
     ESP_LOGD(SVK_TAG, "Current level on GPIO%d: %d\n", _wakeUpPin, digitalRead(_wakeUpPin));
 
 // special treatment for ESP32-C3 / C6 because of the RISC-V architecture
-#ifdef CONFIG_IDF_TARGET_ESP32C3 || CONFIG_IDF_TARGET_ESP32C6
+#if defined(CONFIG_IDF_TARGET_ESP32C3) || defined(CONFIG_IDF_TARGET_ESP32C6)
     esp_deep_sleep_enable_gpio_wakeup(BIT(_wakeUpPin), (esp_deepsleep_gpio_wake_up_mode_t)_wakeUpSignal);
 #else
     esp_sleep_enable_ext1_wakeup(BIT(_wakeUpPin), (esp_sleep_ext1_wakeup_mode_t)_wakeUpSignal);
diff --git a/lib/framework/SystemStatus.cpp b/lib/framework/SystemStatus.cpp
index b514856fe..ea0f60f6a 100644
--- a/lib/framework/SystemStatus.cpp
+++ b/lib/framework/SystemStatus.cpp
@@ -17,19 +17,19 @@
 
 #if CONFIG_IDF_TARGET_ESP32 // ESP32/PICO-D4
 #include "esp32/rom/rtc.h"
-#define ESP_PLATFORM "ESP32";
+#define ESP_TARGET "ESP32";
 #elif CONFIG_IDF_TARGET_ESP32S2
 #include "esp32/rom/rtc.h"
-#define ESP_PLATFORM "ESP32-S2";
+#define ESP_TARGET "ESP32-S2";
 #elif CONFIG_IDF_TARGET_ESP32C3
 #include "esp32c3/rom/rtc.h"
-#define ESP_PLATFORM "ESP32-C3";
+#define ESP_TARGET "ESP32-C3";
 #elif CONFIG_IDF_TARGET_ESP32S3
 #include "esp32s3/rom/rtc.h"
-#define ESP_PLATFORM "ESP32-S3";
+#define ESP_TARGET "ESP32-S3";
 #elif CONFIG_IDF_TARGET_ESP32C6
 #include "esp32c6/rom/rtc.h"
-#define ESP_PLATFORM "ESP32-C6";
+#define ESP_TARGET "ESP32-C6";
 #else
 #error Target CONFIG_IDF_TARGET is not supported
 #endif
@@ -133,7 +133,7 @@ esp_err_t SystemStatus::systemStatus(PsychicRequest *request)
     PsychicJsonResponse response = PsychicJsonResponse(request, false);
     JsonObject root = response.getRoot();
 
-    root["esp_platform"] = ESP_PLATFORM;
+    root["esp_platform"] = ESP_TARGET;
     root["firmware_version"] = APP_VERSION;
     root["max_alloc_heap"] = ESP.getMaxAllocHeap();
     if (psramFound())
diff --git a/lib/framework/WiFiSettingsService.cpp b/lib/framework/WiFiSettingsService.cpp
index 6b332e17a..3d3f28011 100644
--- a/lib/framework/WiFiSettingsService.cpp
+++ b/lib/framework/WiFiSettingsService.cpp
@@ -22,10 +22,12 @@ WiFiSettingsService::WiFiSettingsService(PsychicHttpServer *server,
                                                                 _httpEndpoint(WiFiSettings::read, WiFiSettings::update, this, server, WIFI_SETTINGS_SERVICE_PATH, securityManager,
                                                                               AuthenticationPredicates::IS_ADMIN),
                                                                 _fsPersistence(WiFiSettings::read, WiFiSettings::update, this, fs, WIFI_SETTINGS_FILE), _lastConnectionAttempt(0),
+                                                                _delayedReconnectTime(0),
+                                                                _delayedReconnectPending(false),
                                                                 _socket(socket)
 {
     addUpdateHandler([&](const String &originId)
-                     { reconfigureWiFiConnection(); },
+                     { delayedReconnect(); },
                      false);
 }
 
@@ -50,10 +52,24 @@ void WiFiSettingsService::initWiFi()
 void WiFiSettingsService::begin()
 {
     _socket->registerEvent(EVENT_RSSI);
+    _socket->registerEvent(EVENT_RECONNECT);
 
     _httpEndpoint.begin();
 }
 
+void WiFiSettingsService::delayedReconnect()
+{
+    _delayedReconnectTime = millis() + DELAYED_RECONNECT_MS;
+    _delayedReconnectPending = true;
+    ESP_LOGI(SVK_TAG, "Delayed WiFi reconnection scheduled in %d ms", DELAYED_RECONNECT_MS);
+
+    // Emit event to notify clients of impending reconnection
+    JsonDocument doc;
+    doc["delay_ms"] = DELAYED_RECONNECT_MS;
+    JsonObject jsonObject = doc.as<JsonObject>();
+    _socket->emitEvent(EVENT_RECONNECT, jsonObject);
+}
+
 void WiFiSettingsService::reconfigureWiFiConnection()
 {
     // reset last connection attempt to force loop to reconnect immediately
@@ -89,6 +105,15 @@ void WiFiSettingsService::reconfigureWiFiConnection()
 void WiFiSettingsService::loop()
 {
     unsigned long currentMillis = millis();
+
+    // Handle delayed reconnection
+    if (_delayedReconnectPending && currentMillis >= _delayedReconnectTime)
+    {
+        _delayedReconnectPending = false;
+        ESP_LOGI(SVK_TAG, "Executing delayed WiFi reconnection");
+        reconfigureWiFiConnection();
+    }
+
     if (!_lastConnectionAttempt || (unsigned long)(currentMillis - _lastConnectionAttempt) >= WIFI_RECONNECTION_DELAY)
     {
         _lastConnectionAttempt = currentMillis;
@@ -195,8 +220,7 @@ void WiFiSettingsService::connectToWiFi()
             }
         }
 
-        // if configured to prioritize signal strength, use the best network else use the first available network
-        // if (_state.priorityBySignalStrength == false)
+        // Connection mode PRIORITY: connect to the first available network
         if (_state.staConnectionMode == (u_int8_t)STAConnectionMode::PRIORITY)
         {
             for (auto &network : _state.wifiSettings)
@@ -209,14 +233,28 @@ void WiFiSettingsService::connectToWiFi()
                 }
             }
         }
-        else if (_state.staConnectionMode == (u_int8_t)STAConnectionMode::STRENGTH && bestNetwork)
+        // Connection mode STRENGTH: connect to the strongest network
+        else if (_state.staConnectionMode == (u_int8_t)STAConnectionMode::STRENGTH)
+        {
+            if (bestNetwork)
+            {
+                ESP_LOGI(SVK_TAG, "Connecting to strongest network: %s, BSSID: " MACSTR " ", bestNetwork->ssid.c_str(), MAC2STR(bestNetwork->bssid));
+                configureNetwork(*bestNetwork);
+            }
+            else
+            {
+                ESP_LOGI(SVK_TAG, "No suitable network found.");
+            }
+        }
+        // Connection mode OFFLINE: do not connect to any network
+        else if (_state.staConnectionMode == (u_int8_t)STAConnectionMode::OFFLINE)
         {
-            ESP_LOGI(SVK_TAG, "Connecting to strongest network: %s, BSSID: " MACSTR " ", bestNetwork->ssid.c_str(), MAC2STR(bestNetwork->bssid));
-            configureNetwork(*bestNetwork);
+            ESP_LOGI(SVK_TAG, "WiFi connection mode is OFFLINE, not connecting to any network.");
         }
-        else // no suitable network to connect
+        // Connection mode is unknown: do not connect to any network
+        else
         {
-            ESP_LOGI(SVK_TAG, "No known networks found.");
+            ESP_LOGE(SVK_TAG, "Unknown connection mode, not connecting to any network.");
         }
 
         // delete scan results
diff --git a/lib/framework/WiFiSettingsService.h b/lib/framework/WiFiSettingsService.h
index 46a01c149..0744e377d 100644
--- a/lib/framework/WiFiSettingsService.h
+++ b/lib/framework/WiFiSettingsService.h
@@ -48,8 +48,10 @@
 
 #define WIFI_RECONNECTION_DELAY 1000 * 30
 #define RSSI_EVENT_DELAY 500
+#define DELAYED_RECONNECT_MS 5000
 
 #define EVENT_RSSI "rssi"
+#define EVENT_RECONNECT "reconnect"
 
 // Struct defining the wifi settings
 typedef struct
@@ -215,6 +217,7 @@ class WiFiSettingsService : public StatefulService<WiFiSettings>
     void initWiFi();
     void begin();
     void loop();
+    void delayedReconnect();
     String getHostname();
     String getIP();
 
@@ -226,6 +229,8 @@ class WiFiSettingsService : public StatefulService<WiFiSettings>
     EventSocket *_socket;
     unsigned long _lastConnectionAttempt;
     unsigned long _lastRssiUpdate;
+    unsigned long _delayedReconnectTime;
+    bool _delayedReconnectPending;
 
     bool _stopping;
     void onStationModeDisconnected(WiFiEvent_t event, WiFiEventInfo_t info);
diff --git a/platformio.ini b/platformio.ini
index 835c2091d..5c23a63c4 100644
--- a/platformio.ini
+++ b/platformio.ini
@@ -46,7 +46,7 @@ build_flags =
     -D CONFIG_ARDUHAL_LOG_COLORS
 
 	; Uncomment to show log messages from the ESP Arduino Core and ESP32-SvelteKit
-	-D CORE_DEBUG_LEVEL=4
+	-D CORE_DEBUG_LEVEL=5
 
     ; Serve config files from flash and access at /config/filename.json
     ;-D SERVE_CONFIG_FILES
@@ -65,7 +65,8 @@ board_build.embed_files = src/certs/x509_crt_bundle.bin
 ; Source for SSL Cert Store can bei either downloaded from Mozilla with 'mozilla' ('https://curl.se/ca/cacert.pem')
 ; or from a curated Adafruit repository with 'adafruit' (https://raw.githubusercontent.com/adafruit/certificates/main/data/roots.pem)
 ; or complied from a 'folder' full of *.pem / *.dem files stored in the ./ssl_certs folder
-board_ssl_cert_source = adafruit
+board_ssl_cert_source = mozilla
+; board_ssl_cert_source = adafruit
 
 monitor_speed = 115200
 monitor_filters = 
diff --git a/scripts/build_interface.py b/scripts/build_interface.py
index 6f128a0c6..86c969786 100644
--- a/scripts/build_interface.py
+++ b/scripts/build_interface.py
@@ -8,6 +8,7 @@
 #   Copyright (C) 2023 - 2024 theelims
 #   Copyright (C) 2023 Maxtrium B.V. [ code available under dual license ]
 #   Copyright (C) 2024 runeharlyk
+#   Copyright (C) 2025 hmbacher
 #
 #   All Rights Reserved. This software may be modified and distributed under
 #   the terms of the LGPL v3 license. See the LICENSE file for details.
@@ -16,11 +17,21 @@
 from shutil import copytree, rmtree, copyfileobj
 from os.path import exists, getmtime
 import os
+import sys
 import gzip
 import mimetypes
 import glob
 from datetime import datetime
 
+# Import shared prebuild utilities
+from prebuild_utils import is_build_task
+
+# Check if this script should run
+if not is_build_task(['build', 'upload', 'buildfs', 'erase_upload']):
+    # Skip script execution for all other tasks
+    print("Skipping interface build for non-build task.")
+    sys.exit(0)
+
 Import("env")
 
 project_dir = env["PROJECT_DIR"]
diff --git a/scripts/generate_cert_bundle.py b/scripts/generate_cert_bundle.py
index 878ddf490..1dabb2676 100644
--- a/scripts/generate_cert_bundle.py
+++ b/scripts/generate_cert_bundle.py
@@ -20,6 +20,15 @@
 import requests
 from io import open
 
+# Import shared prebuild utilities
+from prebuild_utils import is_build_task
+
+# Check if this script should run
+if not is_build_task(['build', 'upload', 'buildfs', 'erase_upload']):
+    # Skip script execution for all other tasks
+    print("Skipping certificate bundle generation for non-build task.")
+    sys.exit(0)
+
 Import("env")
 
 try:
diff --git a/scripts/merge_bin.py b/scripts/merge_bin.py
index 58a8de246..6bcf1b61c 100644
--- a/scripts/merge_bin.py
+++ b/scripts/merge_bin.py
@@ -53,14 +53,14 @@ def merge_bin(source, target, env):
                 "$OBJCOPY",
                 "--chip",
                 BOARD_CONFIG.get("build.mcu", "esp32"),
-                "merge_bin",
+                "merge-bin",
                 "-o",
                 MERGED_BIN,
-                "--flash_mode",
+                "--flash-mode",
                 flash_mode,
-                "--flash_freq",
+                "--flash-freq",
                 flash_freq,
-                "--flash_size",
+                "--flash-size",
                 flash_size    
             ]
             + flash_images
diff --git a/scripts/prebuild_utils.py b/scripts/prebuild_utils.py
new file mode 100644
index 000000000..9abdbb7d8
--- /dev/null
+++ b/scripts/prebuild_utils.py
@@ -0,0 +1,57 @@
+#!/usr/bin/env python3
+"""
+Shared utilities for PlatformIO pre-build scripts.
+"""
+
+import os
+import sys
+
+
+def is_build_task(required_tasks):
+    """
+    Check if the current PlatformIO task requires pre-build script execution.
+    
+    Args:
+        required_tasks: List of PlatformIO tasks that need the calling script
+    
+    Returns:
+        bool: True if script should run, False if it should be skipped
+    """
+    # Get caller's filename for logging
+    try:
+        caller_frame = sys._getframe(1)
+        script_name = os.path.basename(caller_frame.f_code.co_filename)
+    except (AttributeError, ValueError):
+        script_name = os.path.basename(sys.argv[0]) if sys.argv else 'unknown_script'
+    
+    # Check command line arguments for build tasks
+    cmd_args = ' '.join(sys.argv).lower()
+    
+    # Map PlatformIO direct flags to our task names - only skip for truly non-build tasks
+    skip_flags = {
+        '--clean': 'clean',
+        '--erase': 'erase', 
+        '--monitor': 'monitor'
+    }
+    
+    # Check for direct PlatformIO flags that should skip pre-build scripts
+    for flag, task_name in skip_flags.items():
+        if flag in cmd_args:
+            if task_name not in required_tasks:
+                print(f"Skipping {script_name} for {task_name} task")
+                return False
+    
+    # Check for --target format for non-build targets only
+    skip_targets = ['clean', 'erase', 'monitor', 'metrics-only']
+    has_skip_target = any(
+        f'--target {task}' in cmd_args or f'-t {task}' in cmd_args 
+        for task in skip_targets
+        if task not in required_tasks
+    )
+    
+    if has_skip_target:
+        print(f"Skipping {script_name} for non-build task")
+        return False
+    
+    # Continue execution for all other tasks (including size, metrics, etc. that may need building)
+    return True
\ No newline at end of file