diff --git a/frontend/src/lib/components/DeviceCard.svelte b/frontend/src/lib/components/DeviceCard.svelte
index 89f473e4..df2b100d 100644
--- a/frontend/src/lib/components/DeviceCard.svelte
+++ b/frontend/src/lib/components/DeviceCard.svelte
@@ -148,7 +148,7 @@
 	}
 </script>
 
-<div class="card bg-base-300 rounded-3xl shadow-md" transition:scale={{ delay: 0, duration: 200 }}>
+<div class="card rounded-3xl bg-base-300 shadow-md" transition:scale={{ delay: 0, duration: 200 }}>
 	<div class="card-body p-6">
 		{#if device.link.toString() !== ''}
 			<a href={device.link.toString()} target="_blank">
@@ -203,14 +203,14 @@
 				{/if}
 			</span>
 			{#if moreButtons.filter((btn) => btn.requires).length > 0}
-				<div class="dropdown dropdown-end dropdown-top bg-base-300 ms-auto">
+				<div class="dropdown dropdown-end dropdown-top ms-auto bg-base-300">
 					<label tabindex="-1" class="btn btn-sm m-1" for="more-{device.id}"
 						>{$LL.device.card_btn_more()}</label
 					>
 					<ul
 						id="more-{device.id}"
 						tabindex="-1"
-						class="menu dropdown-content rounded-box bg-base-100 z-[1] w-fit p-2 shadow"
+						class="menu dropdown-content z-[1] w-fit rounded-box bg-base-100 p-2 shadow"
 					>
 						{#each moreButtons as btn}
 							{#if btn.requires}
diff --git a/frontend/src/lib/components/DeviceCardNic.svelte b/frontend/src/lib/components/DeviceCardNic.svelte
index a44f6a16..645823e4 100644
--- a/frontend/src/lib/components/DeviceCardNic.svelte
+++ b/frontend/src/lib/components/DeviceCardNic.svelte
@@ -162,7 +162,7 @@
 			</button>
 		{/if}
 		<div class="grow">
-			<div class="text-lg leading-4 font-bold">{device.ip}</div>
+			<div class="text-lg font-bold leading-4">{device.ip}</div>
 			<div>{device.mac}</div>
 			<div class="flex flex-wrap gap-x-4">
 				{#if device?.expand?.ports}
diff --git a/frontend/src/lib/components/DeviceForm.svelte b/frontend/src/lib/components/DeviceForm.svelte
index 6770bdf8..93e772ea 100644
--- a/frontend/src/lib/components/DeviceForm.svelte
+++ b/frontend/src/lib/components/DeviceForm.svelte
@@ -178,7 +178,7 @@
 </script>
 
 <form on:submit|preventDefault={save}>
-	<div class="card bg-base-300 w-full shadow-xl">
+	<div class="card w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.general()}</h2>
 			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
@@ -261,11 +261,11 @@
 					/>
 				</div>
 
-				<span class="badge text-error self-center">* {$LL.device.general_required_field()}</span>
+				<span class="badge self-center text-error">* {$LL.device.general_required_field()}</span>
 			</div>
 		</div>
 	</div>
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.ports()}</h2>
 			<p class="my-2">{$LL.device.ports_desc()}</p>
@@ -284,7 +284,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.link()}</h2>
 			<p class="my-2">
@@ -320,7 +320,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.ping()}</h2>
 			<p class="my-2">
@@ -341,7 +341,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.wake()}</h2>
 			<p class="my-2">
@@ -409,7 +409,7 @@
 		</div>
 	</div>
 
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">Sleep-On-LAN</h2>
 			<p class="mt-2">
@@ -518,7 +518,7 @@
 		</div>
 	</div>
 
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.shutdown()}</h2>
 			<p class="my-2">
@@ -526,13 +526,13 @@
 				{@html $LL.device.shutdown_desc()}
 			</p>
 			<p class="my-2 font-bold">{$LL.device.shutdown_examples()}</p>
-			<div class="mockup-code max-w-fit min-w-0 text-sm">
+			<div class="mockup-code min-w-0 max-w-fit text-sm">
 				<pre data-prefix="#"><code>{$LL.device.shutdown_examples_windows()}</code></pre>
 				<pre data-prefix="$" class="text-warning"><code
 						>net rpc shutdown -I 192.168.1.13 -U "user%password"</code
 					></pre>
 			</div>
-			<div class="mockup-code max-w-fit min-w-0 text-sm">
+			<div class="mockup-code min-w-0 max-w-fit text-sm">
 				<pre data-prefix="#"><code>{$LL.device.shutdown_examples_linux()}</code></pre>
 				<pre data-prefix="$" class="text-warning"><code
 						>sshpass -p password ssh -o "StrictHostKeyChecking=no" user@192.168.1.13 "sudo poweroff"</code
@@ -600,7 +600,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.password()}</h2>
 			<p class="my-2">
@@ -618,7 +618,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.groups()}</h2>
 			<p class="my-2">
diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index aa3a9e5a..6b1b9100 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -100,7 +100,7 @@
 			<ul
 				id="mobile-menu"
 				tabindex="-1"
-				class="menu dropdown-content rounded-box bg-base-300 z-[1] mt-3 w-max gap-1 p-2 shadow"
+				class="menu dropdown-content z-[1] mt-3 w-max gap-1 rounded-box bg-base-300 p-2 shadow"
 			>
 				{#if $settingsPub?.website_title}
 					<div class="menu-title">
@@ -141,14 +141,14 @@
 								{#each availableThemes as theme}
 									<li>
 										<button
-											class="outline-base-content overflow-hidden rounded-lg text-left"
+											class="overflow-hidden rounded-lg text-left outline-base-content"
 											data-set-theme={theme}
 											on:click={() => (activeTheme = theme)}
 											on:keydown={() => (activeTheme = theme)}
 										>
 											<div
 												data-theme={theme}
-												class="bg-base-100 text-base-content w-full cursor-pointer rounded font-sans"
+												class="w-full cursor-pointer rounded bg-base-100 font-sans text-base-content"
 											>
 												<div class="grid grid-cols-5 grid-rows-3">
 													<div
@@ -160,10 +160,10 @@
 														/>
 														<div class="flex-grow text-sm">{theme}</div>
 														<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
-															<div class="bg-primary w-2 rounded" />
-															<div class="bg-secondary w-2 rounded" />
-															<div class="bg-accent w-2 rounded" />
-															<div class="bg-neutral w-2 rounded" />
+															<div class="w-2 rounded bg-primary" />
+															<div class="w-2 rounded bg-secondary" />
+															<div class="w-2 rounded bg-accent" />
+															<div class="w-2 rounded bg-neutral" />
 														</div>
 													</div>
 												</div>
@@ -218,29 +218,29 @@
 				<Fa icon={faChevronDown} />
 			</div>
 			<div
-				class="dropdown-content rounded-box bg-base-200 text-base-content z-[1] mt-3 h-fit max-h-96 w-56 overflow-y-auto shadow"
+				class="dropdown-content z-[1] mt-3 h-fit max-h-96 w-56 overflow-y-auto rounded-box bg-base-200 text-base-content shadow"
 			>
 				<div class="grid grid-cols-1 gap-3 p-3" tabindex="-1">
 					{#each availableThemes as theme}
 						<button
-							class="outline-base-content overflow-hidden rounded-lg text-left"
+							class="overflow-hidden rounded-lg text-left outline-base-content"
 							data-set-theme={theme}
 							on:click={() => (activeTheme = theme)}
 							on:keydown={() => (activeTheme = theme)}
 						>
 							<div
 								data-theme={theme}
-								class="bg-base-100 text-base-content w-full cursor-pointer font-sans"
+								class="w-full cursor-pointer bg-base-100 font-sans text-base-content"
 							>
 								<div class="grid grid-cols-5 grid-rows-3">
 									<div class="col-span-5 row-span-3 row-start-1 flex items-center gap-2 px-4 py-3">
 										<Fa icon={faCheck} class={activeTheme === theme ? 'visible' : 'invisible'} />
 										<div class="flex-grow text-sm">{theme}</div>
 										<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
-											<div class="bg-primary w-2 rounded" />
-											<div class="bg-secondary w-2 rounded" />
-											<div class="bg-accent w-2 rounded" />
-											<div class="bg-neutral w-2 rounded" />
+											<div class="w-2 rounded bg-primary" />
+											<div class="w-2 rounded bg-secondary" />
+											<div class="w-2 rounded bg-accent" />
+											<div class="w-2 rounded bg-neutral" />
 										</div>
 									</div>
 								</div>
@@ -267,7 +267,7 @@
 				</label>
 				<ul
 					tabindex="-1"
-					class="menu dropdown-content rounded-box bg-base-300 z-[1] mt-3 p-2 shadow"
+					class="menu dropdown-content z-[1] mt-3 rounded-box bg-base-300 p-2 shadow"
 				>
 					<li class="menu-title">
 						{$pocketbase.authStore.isSuperuser
diff --git a/frontend/src/lib/components/NetworkScan.svelte b/frontend/src/lib/components/NetworkScan.svelte
index 847563d8..f2b976bd 100644
--- a/frontend/src/lib/components/NetworkScan.svelte
+++ b/frontend/src/lib/components/NetworkScan.svelte
@@ -117,7 +117,7 @@
 </script>
 
 {#if $settingsPriv}
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.device.tabs[1]()}</h2>
 			<p class="my-2">
@@ -167,7 +167,7 @@
 			</div>
 			{#if scanResponse.devices?.length > 0}
 				{#each scanResponse.devices.sort( (a, b) => a.ip.localeCompare( b.ip, undefined, { numeric: true } ) ) as device, index}
-					<div class="collapse-arrow bg-base-200 collapse">
+					<div class="collapse collapse-arrow bg-base-200">
 						<input type="radio" name="scanned-devices" checked={index === 0} />
 						<div class="collapse-title font-bold">
 							{device.name} <span class="badge">{device.ip}</span>
diff --git a/frontend/src/lib/i18n/i18n-svelte.ts b/frontend/src/lib/i18n/i18n-svelte.ts
index f2c13c4a..ca6733e4 100644
--- a/frontend/src/lib/i18n/i18n-svelte.ts
+++ b/frontend/src/lib/i18n/i18n-svelte.ts
@@ -1,4 +1,5 @@
 // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten.
+ 
 
 import { initI18nSvelte } from 'typesafe-i18n/svelte';
 import type { Formatters, Locales, TranslationFunctions, Translations } from './i18n-types';
diff --git a/frontend/src/lib/i18n/i18n-util.async.ts b/frontend/src/lib/i18n/i18n-util.async.ts
index c60c1db0..5b1d227b 100644
--- a/frontend/src/lib/i18n/i18n-util.async.ts
+++ b/frontend/src/lib/i18n/i18n-util.async.ts
@@ -1,4 +1,5 @@
 // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten.
+ 
 
 import { initFormatters } from './formatters';
 import type { Locales, Translations } from './i18n-types';
diff --git a/frontend/src/lib/i18n/i18n-util.sync.ts b/frontend/src/lib/i18n/i18n-util.sync.ts
index e28de4c6..e91d7000 100644
--- a/frontend/src/lib/i18n/i18n-util.sync.ts
+++ b/frontend/src/lib/i18n/i18n-util.sync.ts
@@ -1,4 +1,5 @@
 // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten.
+ 
 
 import { initFormatters } from './formatters';
 import type { Locales, Translations } from './i18n-types';
diff --git a/frontend/src/lib/i18n/i18n-util.ts b/frontend/src/lib/i18n/i18n-util.ts
index 6f2397ed..a6652a68 100644
--- a/frontend/src/lib/i18n/i18n-util.ts
+++ b/frontend/src/lib/i18n/i18n-util.ts
@@ -1,4 +1,5 @@
 // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten.
+ 
 
 import {
 	i18n as initI18n,
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 01626c2b..2034047e 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -139,7 +139,7 @@
 </script>
 
 <h1 class="mb-8 text-3xl font-bold">{$LL.account.page_title()}</h1>
-<div class="card bg-base-300 w-full shadow-xl">
+<div class="card w-full bg-base-300 shadow-xl">
 	<div class="card-body">
 		<div class="flex flex-row items-center gap-4">
 			<div class="avatar">
@@ -166,7 +166,7 @@
 			</div>
 		</div>
 		<form on:submit|preventDefault={saveUser}>
-			<h2 class="card-title mt-4 mb-2">{$LL.account.avatar_title()}</h2>
+			<h2 class="card-title mb-2 mt-4">{$LL.account.avatar_title()}</h2>
 			<div class="flex flex-row flex-wrap gap-4">
 				{#each [...Array(10).keys()] as i}
 					<div class="avatar btn btn-circle btn-ghost">
@@ -194,7 +194,7 @@
 					</div>
 				{/each}
 			</div>
-			<h2 class="card-title mt-4 mb-2">{$LL.account.language_title()}</h2>
+			<h2 class="card-title mb-2 mt-4">{$LL.account.language_title()}</h2>
 			<select class="select select-bordered w-full max-w-xs" bind:value={selectedLanguage}>
 				<option value="auto" selected={localStorageLang === null}
 					>🌐 {$LL.account.language_option_auto()}</option
@@ -214,7 +214,7 @@
 		</form>
 	</div>
 </div>
-<div class="card bg-base-300 mt-6 w-full shadow-xl">
+<div class="card mt-6 w-full bg-base-300 shadow-xl">
 	<div class="card-body">
 		<h2 class="card-title">{$LL.account.change_password_title()}</h2>
 		<p>{$LL.account.change_password_body()}</p>
diff --git a/frontend/src/routes/device/new/+page.svelte b/frontend/src/routes/device/new/+page.svelte
index c6cf5c26..803624b2 100644
--- a/frontend/src/routes/device/new/+page.svelte
+++ b/frontend/src/routes/device/new/+page.svelte
@@ -45,7 +45,7 @@
 
 <h1 class="mb-8 text-3xl font-bold">{$LL.device.page_title()}</h1>
 <div class="mb-6 flex justify-center">
-	<ul class="menu menu-horizontal rounded-box bg-base-300 gap-1">
+	<ul class="menu menu-horizontal gap-1 rounded-box bg-base-300">
 		{#each tabs as tab}
 			{#if tab.show}
 				<li>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 47bf13f5..51d6a31f 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -57,7 +57,7 @@
 </script>
 
 <div class="mt-10 flex items-center justify-center">
-	<div class="card bg-base-300 w-full max-w-lg shadow-xl">
+	<div class="card w-full max-w-lg bg-base-300 shadow-xl">
 		<div class="card-body">
 			{#if $settingsPub?.website_title}
 				<h1 class="text-center text-xl font-bold">{$settingsPub?.website_title}</h1>
@@ -89,7 +89,7 @@
 				</label>
 				<label class="relative block">
 					<div
-						class="absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer"
+						class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
 						role="none"
 						on:click={() => toggleVisibility(inputPassword)}
 						on:keydown={() => toggleVisibility(inputPassword)}
@@ -114,7 +114,7 @@
 						<ul
 							id="other-providers"
 							tabindex="-1"
-							class="menu dropdown-content rounded-box bg-base-200 z-[1] w-56 p-2 shadow"
+							class="menu dropdown-content z-[1] w-56 rounded-box bg-base-200 p-2 shadow"
 						>
 							<li class="menu-title flex flex-row items-center gap-2">
 								{$LL.login.menu_title_auth_providers()}
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 6e1c717d..f916100d 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -92,7 +92,7 @@
 {:else}
 	<h1 class="mb-8 text-3xl font-bold">{$LL.settings.page_title()}</h1>
 	<form on:submit|preventDefault={save}>
-		<div class="card bg-base-300 mt-6 w-full shadow-xl">
+		<div class="card mt-6 w-full bg-base-300 shadow-xl">
 			<div class="card-body">
 				<h2 class="card-title">{$LL.settings.ping_interval_title()}</h2>
 				<p class="mt-2">
@@ -130,7 +130,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="card bg-base-300 mt-6 w-full shadow-xl">
+		<div class="card mt-6 w-full bg-base-300 shadow-xl">
 			<div class="card-body">
 				<h2 class="card-title">{$LL.settings.website_title_title()}</h2>
 				<p class="my-2">{$LL.settings.website_title_desc()}</p>
@@ -144,7 +144,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="card bg-base-300 mt-6 w-full shadow-xl">
+		<div class="card mt-6 w-full bg-base-300 shadow-xl">
 			<div class="card-body">
 				<h2 class="card-title">{$LL.settings.icon_title()}</h2>
 				<p class="my-2">
diff --git a/frontend/src/routes/users/+page.svelte b/frontend/src/routes/users/+page.svelte
index aa9f945c..eb63c403 100644
--- a/frontend/src/routes/users/+page.svelte
+++ b/frontend/src/routes/users/+page.svelte
@@ -184,7 +184,7 @@
 	<h1 class="mb-8 text-3xl font-bold">{$LL.users.page_title()}</h1>
 	{#each users as user, index}
 		<form on:submit|preventDefault={() => save(user)}>
-			<div class="card bg-base-300 mt-6 w-full shadow-xl">
+			<div class="card mt-6 w-full bg-base-300 shadow-xl">
 				<div class="card-body gap-4">
 					<h2 class="card-title">
 						<label tabindex="-1" class="avatar" for="avatar{index}">
@@ -206,7 +206,7 @@
 							</label>
 						</div>
 					{/each}
-					<div class="collapse-arrow bg-base-200 collapse">
+					<div class="collapse collapse-arrow bg-base-200">
 						<input type="checkbox" />
 						<div class="collapse-title text-xl font-medium">{$LL.users.device_permissions()}</div>
 						<div class="collapse-content">
@@ -222,7 +222,7 @@
 									<div class="font-bold">{$LL.users.delete()}</div>
 									<div class="font-bold">{$LL.users.power()}</div>
 									{#each devices as device}
-										<hr class="border-neutral col-span-full w-full border-b-1 opacity-30" />
+										<hr class="border-b-1 col-span-full w-full border-neutral opacity-30" />
 										{#each permissions.filter((perm) => perm.user === user.id) as permission}
 											<div
 												class="col-span-full flex flex-row flex-wrap gap-2 place-self-start break-all md:col-span-1"
@@ -332,7 +332,7 @@
 			</form>
 		</dialog>
 	{/each}
-	<div class="card bg-base-300 mt-6 w-full shadow-xl">
+	<div class="card mt-6 w-full bg-base-300 shadow-xl">
 		<div class="card-body">
 			<h2 class="card-title">{$LL.users.create_new_user()}</h2>
 			<form on:submit|preventDefault={createUser}>
@@ -390,7 +390,7 @@
 						/>
 					</div>
 				</div>
-				<span class="badge text-error mt-4 self-center">* {$LL.users.required_field()}</span>
+				<span class="badge mt-4 self-center text-error">* {$LL.users.required_field()}</span>
 				<div class="card-actions justify-end">
 					<button type="submit" class="btn btn-success mt-2"
 						><Fa icon={faPlus} />{$LL.buttons.add()}</button
diff --git a/frontend/src/routes/welcome/+page.svelte b/frontend/src/routes/welcome/+page.svelte
index de64f288..e2fb3428 100644
--- a/frontend/src/routes/welcome/+page.svelte
+++ b/frontend/src/routes/welcome/+page.svelte
@@ -115,7 +115,7 @@
 						</label>
 						<label class="relative block">
 							<div
-								class="absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer"
+								class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
 								role="none"
 								on:click={() => toggleVisibility(inputPassword)}
 								on:keydown={() => toggleVisibility(inputPassword)}
@@ -138,7 +138,7 @@
 						</label>
 						<label class="relative block">
 							<div
-								class="absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer"
+								class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
 								role="none"
 								on:click={() => toggleVisibility(inputConfirm)}
 								on:keydown={() => toggleVisibility(inputConfirm)}