diff --git a/web/.prettierrc b/web/.prettierrc
index 519b2d7..b79cac7 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -6,11 +6,11 @@
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [
 		{
-			"files": ["*.svelte", "*.svelte.ts", "*.svelte.js"],
+			"files": ["*.svelte"],
 			"options": {
 				"parser": "svelte"
 			}
 		}
 	],
-    "tailwindStylesheet": "./src/app.css"
+	"tailwindStylesheet": "./src/app.css"
 }
diff --git a/web/src/lib/components/forms/DynamicForm.svelte b/web/src/lib/components/forms/DynamicForm.svelte
index 594b81d..7f2c7f8 100644
--- a/web/src/lib/components/forms/DynamicForm.svelte
+++ b/web/src/lib/components/forms/DynamicForm.svelte
@@ -211,7 +211,7 @@
 							{/if}
 						</Label>
 						{#if field.description && showDescription(field.type)}
-							<p class="text-muted-foreground text-xs">{field.description}</p>
+							<p class="text-xs text-muted-foreground">{field.description}</p>
 						{/if}
 					</div>
 
diff --git a/web/src/lib/components/forms/HTTPServerTransportForm.svelte b/web/src/lib/components/forms/HTTPServerTransportForm.svelte
index 00c168d..b393472 100644
--- a/web/src/lib/components/forms/HTTPServerTransportForm.svelte
+++ b/web/src/lib/components/forms/HTTPServerTransportForm.svelte
@@ -53,7 +53,7 @@
 	<div class="space-y-4">
 		<div class="flex flex-col gap-1">
 			<Label for="serverName" class="text-sm font-medium">General</Label>
-			<p class="text-muted-foreground text-xs">Configure general settings</p>
+			<p class="text-xs text-muted-foreground">Configure general settings</p>
 		</div>
 
 		<div class="grid grid-cols-2 gap-2">
@@ -112,7 +112,7 @@
 	<div class="space-y-2">
 		<div class="flex flex-col gap-1 pb-2">
 			<Label class="text-sm font-medium">Certificates</Label>
-			<p class="text-muted-foreground text-xs">Configure TLS certificates</p>
+			<p class="text-xs text-muted-foreground">Configure TLS certificates</p>
 		</div>
 
 		<div class="space-y-2">
@@ -199,7 +199,7 @@
 	<div class="space-y-2">
 		<div class="flex flex-col gap-1 pb-2">
 			<Label for="forwardingTimeouts" class="text-sm font-medium">Forwarding Timeouts</Label>
-			<p class="text-muted-foreground text-xs">Configure timeouts for forwarding</p>
+			<p class="text-xs text-muted-foreground">Configure timeouts for forwarding</p>
 		</div>
 
 		<div class="flex flex-col gap-4">
@@ -303,7 +303,7 @@
 	<div class="space-y-2">
 		<div class="flex flex-col gap-1 pb-2">
 			<Label for="spiffe" class="text-sm font-medium">SPIFFE Configuration</Label>
-			<p class="text-muted-foreground text-xs">Configure SPIFFE integration</p>
+			<p class="text-xs text-muted-foreground">Configure SPIFFE integration</p>
 		</div>
 
 		<div class="space-y-2">
diff --git a/web/src/lib/components/forms/HTTPServiceForm.svelte b/web/src/lib/components/forms/HTTPServiceForm.svelte
index 8dcf0be..2b66c12 100644
--- a/web/src/lib/components/forms/HTTPServiceForm.svelte
+++ b/web/src/lib/components/forms/HTTPServiceForm.svelte
@@ -31,7 +31,7 @@
 	<div class="flex items-center justify-between rounded-lg border p-3">
 		<div class="space-y-1">
 			<Label class="flex items-center gap-1 text-sm">Pass Host Header</Label>
-			<p class="text-muted-foreground text-xs">Forward client host header to server</p>
+			<p class="text-xs text-muted-foreground">Forward client host header to server</p>
 		</div>
 		<CustomSwitch
 			checked={config.loadBalancer?.passHostHeader ?? true}
diff --git a/web/src/lib/components/forms/TCPServerTransportForm.svelte b/web/src/lib/components/forms/TCPServerTransportForm.svelte
index 2cb2624..4046698 100644
--- a/web/src/lib/components/forms/TCPServerTransportForm.svelte
+++ b/web/src/lib/components/forms/TCPServerTransportForm.svelte
@@ -60,7 +60,7 @@
 	<div class="space-y-2">
 		<div class="flex flex-col gap-1 pb-2">
 			<Label for="connectionTimeouts" class="text-sm font-medium">Connection Timeouts</Label>
-			<p class="text-muted-foreground text-xs">Configure connection timeouts</p>
+			<p class="text-xs text-muted-foreground">Configure connection timeouts</p>
 		</div>
 
 		<div class="space-y-2">
@@ -109,7 +109,7 @@
 	<div class="space-y-2">
 		<div class="flex flex-col gap-1 pb-2">
 			<Label for="tls" class="text-sm font-medium">TLS Configuration</Label>
-			<p class="text-muted-foreground text-xs">Configure TLS settings</p>
+			<p class="text-xs text-muted-foreground">Configure TLS settings</p>
 		</div>
 
 		<div class="grid grid-cols-2 gap-2">
@@ -162,7 +162,7 @@
 	<div class="space-y-2">
 		<div class="flex flex-col gap-1 pb-2">
 			<Label for="rootCAs" class="text-sm font-medium">Certificates</Label>
-			<p class="text-muted-foreground text-xs">Configure TLS certificates</p>
+			<p class="text-xs text-muted-foreground">Configure TLS certificates</p>
 		</div>
 
 		<div class="space-y-2">
@@ -249,7 +249,7 @@
 	<div class="space-y-2">
 		<div class="flex flex-col gap-1 pb-2">
 			<Label for="spiffe" class="text-sm font-medium">SPIFFE Configuration</Label>
-			<p class="text-muted-foreground text-xs">Configure SPIFFE integration</p>
+			<p class="text-xs text-muted-foreground">Configure SPIFFE integration</p>
 		</div>
 
 		<div class="space-y-2">
diff --git a/web/src/lib/components/modals/AgentModal.svelte b/web/src/lib/components/modals/AgentModal.svelte
index 3cc9dea..2c19259 100644
--- a/web/src/lib/components/modals/AgentModal.svelte
+++ b/web/src/lib/components/modals/AgentModal.svelte
@@ -122,14 +122,14 @@
 						<Label class="text-sm font-medium">Agent Information</Label>
 						<div class="flex gap-2">
 							<div class="space-y-1">
-								<p class="text-muted-foreground text-xs">Hostname</p>
+								<p class="text-xs text-muted-foreground">Hostname</p>
 								<Badge variant="secondary" class="w-full justify-center">
 									{item.hostname}
 								</Badge>
 							</div>
 							{#if item.containers?.length > 0}
 								<div class="space-y-1">
-									<p class="text-muted-foreground text-xs">Containers</p>
+									<p class="text-xs text-muted-foreground">Containers</p>
 									<Badge variant="secondary" class="w-full justify-center">
 										{item.containers.length}
 									</Badge>
@@ -137,7 +137,7 @@
 							{/if}
 							{#if item.updatedAt}
 								<div class="space-y-1">
-									<p class="text-muted-foreground text-xs">Last Seen</p>
+									<p class="text-xs text-muted-foreground">Last Seen</p>
 									<Badge variant="secondary" class="justify-center text-xs">
 										{DateFormat.format(timestampDate(item.updatedAt))}
 									</Badge>
@@ -168,7 +168,7 @@
 				<div class="space-y-4">
 					<div class="space-y-2">
 						<Label class="text-sm font-medium">Network Configuration</Label>
-						<p class="text-muted-foreground text-xs">
+						<p class="text-xs text-muted-foreground">
 							Choose which IP address to use for connecting to this agent
 						</p>
 					</div>
@@ -178,7 +178,7 @@
 							<div class="flex items-center justify-between rounded-lg border p-3">
 								<div class="space-y-1">
 									<Label class="text-sm">Public IP</Label>
-									<p class="text-muted-foreground text-xs">External network address</p>
+									<p class="text-xs text-muted-foreground">External network address</p>
 								</div>
 								<div class="flex items-center gap-2">
 									{#if item.activeIp === item.publicIp || !item.activeIp}
@@ -197,7 +197,7 @@
 							<div class="flex items-center justify-between rounded-lg border p-3">
 								<div class="space-y-1">
 									<Label class="text-sm">Private IP</Label>
-									<p class="text-muted-foreground text-xs">Internal network address</p>
+									<p class="text-xs text-muted-foreground">Internal network address</p>
 								</div>
 								<div class="flex items-center gap-2">
 									{#if item.activeIp === item.privateIp}
@@ -230,7 +230,7 @@
 									<Button onclick={() => handleSubmit(newIP)} size="sm">Use</Button>
 								{/if}
 							</div>
-							<p class="text-muted-foreground text-xs">
+							<p class="text-xs text-muted-foreground">
 								Specify a custom IP address for this agent
 							</p>
 						</div>
@@ -245,7 +245,7 @@
 				{#if item.hostname}
 					<div class="space-y-2">
 						<Label class="text-sm font-medium">Agent Token</Label>
-						<p class="text-muted-foreground text-xs">
+						<p class="text-xs text-muted-foreground">
 							{item.hostname
 								? 'Secure token for agent authentication'
 								: 'Copy this token to connect your agent'}
@@ -294,7 +294,7 @@
 							<!-- Docker Compose Item -->
 							<DropdownMenu.Item
 								closeOnSelect={false}
-								class="hover:bg-accent/50 focus:bg-accent/50 relative h-auto cursor-pointer flex-col items-start overflow-hidden p-3 transition-all duration-200"
+								class="relative h-auto cursor-pointer flex-col items-start overflow-hidden p-3 transition-all duration-200 hover:bg-accent/50 focus:bg-accent/50"
 								onclick={handleCopyCompose}
 							>
 								{#if dockerComposeClipboard.status === 'success'}
@@ -316,7 +316,7 @@
 										/>
 										<span class="font-medium">Docker Compose</span>
 									</div>
-									<div class="text-muted-foreground flex items-center gap-1 text-xs">
+									<div class="flex items-center gap-1 text-xs text-muted-foreground">
 										{#if dockerComposeClipboard.status === 'success'}
 											<Check class="h-3 w-3 text-green-500" />
 											<span class="text-green-600">Copied!</span>
@@ -329,7 +329,7 @@
 										{/if}
 									</div>
 								</div>
-								<p class="text-muted-foreground relative z-10 mt-1 text-xs leading-relaxed">
+								<p class="relative z-10 mt-1 text-xs leading-relaxed text-muted-foreground">
 									Complete docker-compose.yml configuration with volumes and environment setup
 								</p>
 							</DropdownMenu.Item>
@@ -337,7 +337,7 @@
 							<!-- Docker Run Item -->
 							<DropdownMenu.Item
 								closeOnSelect={false}
-								class="hover:bg-accent/50 focus:bg-accent/50 relative h-auto cursor-pointer flex-col items-start overflow-hidden p-3 transition-all duration-200"
+								class="relative h-auto cursor-pointer flex-col items-start overflow-hidden p-3 transition-all duration-200 hover:bg-accent/50 focus:bg-accent/50"
 								onclick={handleCopyRun}
 							>
 								{#if dockerRunClipboard.status === 'success'}
@@ -359,7 +359,7 @@
 										/>
 										<span class="font-medium">Docker Run</span>
 									</div>
-									<div class="text-muted-foreground flex items-center gap-1 text-xs">
+									<div class="flex items-center gap-1 text-xs text-muted-foreground">
 										{#if dockerRunClipboard.status === 'success'}
 											<Check class="h-3 w-3 text-green-500" />
 											<span class="text-green-600">Copied!</span>
@@ -372,7 +372,7 @@
 										{/if}
 									</div>
 								</div>
-								<p class="text-muted-foreground relative z-10 mt-1 text-xs leading-relaxed">
+								<p class="relative z-10 mt-1 text-xs leading-relaxed text-muted-foreground">
 									Single command to run the agent container with all required parameters
 								</p>
 							</DropdownMenu.Item>
diff --git a/web/src/lib/components/modals/AuditLogModal.svelte b/web/src/lib/components/modals/AuditLogModal.svelte
index 11ea7d1..02cc29f 100644
--- a/web/src/lib/components/modals/AuditLogModal.svelte
+++ b/web/src/lib/components/modals/AuditLogModal.svelte
@@ -79,7 +79,7 @@
 			<div class="space-y-2">
 				<Label for="search" class="text-sm font-medium">Search Logs</Label>
 				<div class="relative">
-					<Search class="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+					<Search class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
 					<Input
 						id="search"
 						bind:value={searchQuery}
@@ -98,21 +98,21 @@
 				{#if logs.length === 0}
 					<div class="flex items-center justify-center py-12">
 						<div class="space-y-2 text-center">
-							<TriangleAlert class="text-muted-foreground mx-auto h-8 w-8" />
-							<p class="text-muted-foreground text-sm">
+							<TriangleAlert class="mx-auto h-8 w-8 text-muted-foreground" />
+							<p class="text-sm text-muted-foreground">
 								{searchQuery ? 'No logs match your search criteria' : 'No audit logs found'}
 							</p>
 						</div>
 					</div>
 				{:else}
 					{#each logs as log (log.id)}
-						<div class="group hover:bg-muted/30 rounded-lg border p-4 transition-colors">
+						<div class="group rounded-lg border p-4 transition-colors hover:bg-muted/30">
 							<div class="flex items-start gap-3">
 								<!-- Activity Indicator -->
 								<div class="flex flex-col items-center gap-1 pt-1">
 									<div class="h-2 w-2 rounded-full {getActivityColor(log)}"></div>
 									{#if log !== logs[logs.length - 1]}
-										<div class="bg-border h-8 w-px"></div>
+										<div class="h-8 w-px bg-border"></div>
 									{/if}
 								</div>
 
@@ -121,7 +121,7 @@
 									<div class="space-y-1">
 										<p class="text-sm leading-relaxed font-medium">{log.details}</p>
 
-										<div class="text-muted-foreground flex items-center gap-2 text-xs">
+										<div class="flex items-center gap-2 text-xs text-muted-foreground">
 											{#if log.createdAt}
 												<span>{timeAgo(log.createdAt)}</span>
 											{/if}
@@ -163,9 +163,9 @@
 			{:catch error}
 				<div class="flex items-center justify-center py-12">
 					<div class="space-y-2 text-center">
-						<TriangleAlert class="text-destructive mx-auto h-8 w-8" />
-						<p class="text-destructive text-sm">Failed to load audit logs</p>
-						<p class="text-muted-foreground text-xs">{error.message}</p>
+						<TriangleAlert class="mx-auto h-8 w-8 text-destructive" />
+						<p class="text-sm text-destructive">Failed to load audit logs</p>
+						<p class="text-xs text-muted-foreground">{error.message}</p>
 					</div>
 				</div>
 			{/await}
diff --git a/web/src/lib/components/modals/BackupModal.svelte b/web/src/lib/components/modals/BackupModal.svelte
index 13fe422..2511ae1 100644
--- a/web/src/lib/components/modals/BackupModal.svelte
+++ b/web/src/lib/components/modals/BackupModal.svelte
@@ -98,7 +98,7 @@
 								<HoverCard.Content class="w-full">
 									<div class="flex items-center">
 										<CalendarDays class="mr-2 size-4 opacity-70" />
-										<span class="text-muted-foreground text-xs">
+										<span class="text-xs text-muted-foreground">
 											Created
 											{#if b.createdAt}
 												{DateFormat.format(timestampDate(b.createdAt))}
@@ -140,7 +140,7 @@
 					</div>
 				{/each}
 				{#if sqliteBackups.length === 0}
-					<p class="text-muted-foreground pt-2 text-center text-sm">No backups available</p>
+					<p class="pt-2 text-center text-sm text-muted-foreground">No backups available</p>
 				{/if}
 			</Tabs.Content>
 			<Tabs.Content value="yaml" class="space-y-2">
@@ -154,7 +154,7 @@
 								<HoverCard.Content class="w-full">
 									<div class="flex items-center">
 										<CalendarDays class="mr-2 size-4 opacity-70" />
-										<span class="text-muted-foreground text-xs">
+										<span class="text-xs text-muted-foreground">
 											Created
 											{#if b.createdAt}
 												{DateFormat.format(timestampDate(b.createdAt))}
@@ -196,7 +196,7 @@
 					</div>
 				{/each}
 				{#if yamlBackups.length === 0}
-					<p class="text-muted-foreground pt-2 text-center text-sm">No backups available</p>
+					<p class="pt-2 text-center text-sm text-muted-foreground">No backups available</p>
 				{/if}
 			</Tabs.Content>
 		</Tabs.Root>
diff --git a/web/src/lib/components/modals/DNSModal.svelte b/web/src/lib/components/modals/DNSModal.svelte
index bc7a411..e71f7d0 100644
--- a/web/src/lib/components/modals/DNSModal.svelte
+++ b/web/src/lib/components/modals/DNSModal.svelte
@@ -86,7 +86,7 @@
 					<div class="col-span-2 space-y-2">
 						<Label for="name" class="text-sm">Provider Name</Label>
 						<Input id="name" bind:value={item.name} required placeholder="e.g., Cloudflare" />
-						<p class="text-muted-foreground text-xs">Friendly name for this provider</p>
+						<p class="text-xs text-muted-foreground">Friendly name for this provider</p>
 					</div>
 
 					<div class="space-y-2">
@@ -116,7 +116,7 @@
 			<div class="space-y-4">
 				<div class="space-y-2">
 					<Label class="text-sm font-medium">Provider Settings</Label>
-					<p class="text-muted-foreground text-xs">Configure how this DNS provider should behave</p>
+					<p class="text-xs text-muted-foreground">Configure how this DNS provider should behave</p>
 				</div>
 
 				<div class="space-y-4">
@@ -139,7 +139,7 @@
 									</Tooltip.Root>
 								</Tooltip.Provider>
 							</Label>
-							<p class="text-muted-foreground text-xs">Use for new routers by default</p>
+							<p class="text-xs text-muted-foreground">Use for new routers by default</p>
 						</div>
 						<CustomSwitch bind:checked={item.isDefault} size="md" />
 					</div>
@@ -163,7 +163,7 @@
 									</Tooltip.Root>
 								</Tooltip.Provider>
 							</Label>
-							<p class="text-muted-foreground text-xs">Automatically sync with public IP</p>
+							<p class="text-xs text-muted-foreground">Automatically sync with public IP</p>
 						</div>
 						<CustomSwitch
 							checked={item.config?.autoUpdate}
@@ -180,7 +180,7 @@
 						<div class="flex items-center justify-between rounded-lg border p-3">
 							<div class="space-y-1">
 								<Label class="text-sm">Cloudflare Proxy</Label>
-								<p class="text-muted-foreground text-xs">Enable Cloudflare's proxy service</p>
+								<p class="text-xs text-muted-foreground">Enable Cloudflare's proxy service</p>
 							</div>
 							<CustomSwitch
 								checked={item.config?.proxied}
@@ -198,7 +198,7 @@
 						<div class="flex items-center justify-between rounded-lg border p-3">
 							<div class="space-y-1">
 								<Label class="text-sm">Zone Type</Label>
-								<p class="text-muted-foreground text-xs">DNS zone configuration type</p>
+								<p class="text-xs text-muted-foreground">DNS zone configuration type</p>
 							</div>
 							<CustomSwitch
 								variant="text"
@@ -232,7 +232,7 @@
 							</Tooltip.Root>
 						</Tooltip.Provider>
 					</Label>
-					<p class="text-muted-foreground text-xs">
+					<p class="text-xs text-muted-foreground">
 						Configure the IP address for DNS record creation
 					</p>
 				</div>
@@ -250,7 +250,7 @@
 										<Badge variant="secondary">{value?.ipv6}</Badge>
 									{/if}
 								</div>
-								<p class="text-muted-foreground text-xs">Automatically detected and updated</p>
+								<p class="text-xs text-muted-foreground">Automatically detected and updated</p>
 							{/await}
 						</div>
 					</div>
@@ -271,7 +271,7 @@
 							placeholder="Enter IP address for DNS records"
 							required
 						/>
-						<p class="text-muted-foreground text-xs">Static IP address for DNS record creation</p>
+						<p class="text-xs text-muted-foreground">Static IP address for DNS record creation</p>
 					</div>
 				{/if}
 			</div>
@@ -282,7 +282,7 @@
 			<div class="space-y-4">
 				<div class="space-y-2">
 					<Label class="text-sm font-medium">Authentication</Label>
-					<p class="text-muted-foreground text-xs">
+					<p class="text-xs text-muted-foreground">
 						Provide credentials to access your DNS provider's API
 					</p>
 				</div>
@@ -301,7 +301,7 @@
 							}}
 							placeholder="Enter your API key"
 						/>
-						<p class="text-muted-foreground text-xs">API key from your DNS provider</p>
+						<p class="text-xs text-muted-foreground">API key from your DNS provider</p>
 					</div>
 
 					{#if item.type === DnsProviderType.POWERDNS || item.type === DnsProviderType.TECHNITIUM}
@@ -321,7 +321,7 @@
 								placeholder="https://dns.example.com/api"
 								required
 							/>
-							<p class="text-muted-foreground text-xs">
+							<p class="text-xs text-muted-foreground">
 								{dnsProviderTypes.find((t) => t.value === item.type)?.label} server endpoint
 							</p>
 						</div>
diff --git a/web/src/lib/components/modals/EntryPointModal.svelte b/web/src/lib/components/modals/EntryPointModal.svelte
index 48567cb..66f8f41 100644
--- a/web/src/lib/components/modals/EntryPointModal.svelte
+++ b/web/src/lib/components/modals/EntryPointModal.svelte
@@ -77,7 +77,7 @@
 						placeholder="e.g., web, api, postgres"
 						class="transition-colors"
 					/>
-					<p class="text-muted-foreground text-xs">A descriptive name for this entry point</p>
+					<p class="text-xs text-muted-foreground">A descriptive name for this entry point</p>
 				</div>
 
 				<div class="space-y-2">
@@ -91,7 +91,7 @@
 						class="transition-colors"
 					/>
 					<div class="flex items-center justify-between">
-						<p class="text-muted-foreground text-xs">
+						<p class="text-xs text-muted-foreground">
 							Port number (1-65535) where your service listens
 						</p>
 					</div>
@@ -102,7 +102,7 @@
 					<div class="flex items-center justify-between">
 						<div class="space-y-1">
 							<Label class="flex items-center gap-2 text-sm font-medium">Default Entry Point</Label>
-							<p class="text-muted-foreground text-xs">
+							<p class="text-xs text-muted-foreground">
 								Use this as the primary entry point for new routers
 							</p>
 						</div>
@@ -110,8 +110,8 @@
 					</div>
 
 					{#if item.isDefault}
-						<div class="bg-muted/50 border-primary rounded-lg border-l-2 p-3">
-							<p class="text-muted-foreground text-xs">
+						<div class="rounded-lg border-l-2 border-primary bg-muted/50 p-3">
+							<p class="text-xs text-muted-foreground">
 								<strong>Note:</strong> Setting this as default will remove the default status from other
 								entry points.
 							</p>
diff --git a/web/src/lib/components/modals/ProfileModal.svelte b/web/src/lib/components/modals/ProfileModal.svelte
index c0abc70..ff4dca3 100644
--- a/web/src/lib/components/modals/ProfileModal.svelte
+++ b/web/src/lib/components/modals/ProfileModal.svelte
@@ -100,13 +100,13 @@
 					placeholder="traefik-site"
 					class="transition-colors"
 				/>
-				<p class="text-muted-foreground text-xs">A descriptive name for this profile</p>
+				<p class="text-xs text-muted-foreground">A descriptive name for this profile</p>
 			</div>
 
 			<div class="space-y-2">
 				<Label for="description" class="text-sm font-medium">Description</Label>
 				<Input id="description" bind:value={item.description} placeholder="Site description" />
-				<p class="text-muted-foreground text-xs">Optional description for this profile</p>
+				<p class="text-xs text-muted-foreground">Optional description for this profile</p>
 			</div>
 
 			{#if item.id}
@@ -120,7 +120,7 @@
 					</div>
 					{#await buildConnectionString(item) then value}
 						<!-- <CopyInput id="token" {value} readonly /> -->
-						<p class="text-muted-foreground text-xs">
+						<p class="text-xs text-muted-foreground">
 							Used in the connection URL to connect to this profile with your traefik instance
 							<span class="underline">
 								{value}
diff --git a/web/src/lib/components/modals/RouterModal.svelte b/web/src/lib/components/modals/RouterModal.svelte
index 814284b..9f67365 100644
--- a/web/src/lib/components/modals/RouterModal.svelte
+++ b/web/src/lib/components/modals/RouterModal.svelte
@@ -178,7 +178,7 @@
 			<div class="space-y-4">
 				<div>
 					<h2 class="text-l font-semibold tracking-tight">Agent-Managed Router</h2>
-					<p class="text-muted-foreground text-sm">Automatically managed via Docker labels</p>
+					<p class="text-sm text-muted-foreground">Automatically managed via Docker labels</p>
 				</div>
 
 				<Alert.Root variant="default" class="border-dashed border-blue-200 bg-blue-50">
@@ -222,7 +222,7 @@
 				<!-- Router Info (Read-only) -->
 				<Card.Root class="bg-muted/30">
 					<Card.Header>
-						<Card.Title class="text-muted-foreground flex items-center gap-2">
+						<Card.Title class="flex items-center gap-2 text-muted-foreground">
 							<Server class="h-4 w-4" />
 							Router Configuration
 						</Card.Title>
@@ -269,7 +269,7 @@
 						>
 							<div>
 								<Card.Title class="flex items-center gap-2">Router Configuration</Card.Title>
-								<Card.Description class="text-muted-foreground text-sm">
+								<Card.Description class="text-sm text-muted-foreground">
 									Define how traffic is routed to your service
 								</Card.Description>
 							</div>
diff --git a/web/src/lib/components/nav/AppFooter.svelte b/web/src/lib/components/nav/AppFooter.svelte
index c147053..5fbd023 100644
--- a/web/src/lib/components/nav/AppFooter.svelte
+++ b/web/src/lib/components/nav/AppFooter.svelte
@@ -6,9 +6,9 @@
 </script>
 
 <footer
-	class="bg-background sticky right-0 bottom-0 flex flex-row items-center justify-end rounded-b-xl px-2 py-1 shadow-[0_-1px_2px_rgba(0,0,0,0.05)]"
+	class="sticky right-0 bottom-0 flex flex-row items-center justify-end rounded-b-xl bg-background px-2 py-1 shadow-[0_-1px_2px_rgba(0,0,0,0.05)]"
 >
-	<div class="text-muted-foreground flex items-center">
+	<div class="flex items-center text-muted-foreground">
 		<Button
 			variant="ghost"
 			href="https://mizuchi.dev/mantrae/"
diff --git a/web/src/lib/components/nav/AppSidebar.svelte b/web/src/lib/components/nav/AppSidebar.svelte
index 4e647f7..b1c5cd3 100644
--- a/web/src/lib/components/nav/AppSidebar.svelte
+++ b/web/src/lib/components/nav/AppSidebar.svelte
@@ -87,7 +87,7 @@
 								class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 							>
 								<div
-									class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+									class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
 								>
 									<img src={logo} alt="Mantrae Logo" width="18" />
 								</div>
@@ -107,7 +107,7 @@
 						side={sidebar.isMobile ? 'bottom' : 'right'}
 						sideOffset={4}
 					>
-						<DropdownMenu.Label class="text-muted-foreground text-xs">Profiles</DropdownMenu.Label>
+						<DropdownMenu.Label class="text-xs text-muted-foreground">Profiles</DropdownMenu.Label>
 						{#each $profiles || [] as p (p.id)}
 							<DropdownMenu.Item
 								onSelect={() => (profile.value = p)}
@@ -139,10 +139,10 @@
 								modalProfileOpen = true;
 							}}
 						>
-							<div class="bg-background flex size-6 items-center justify-center rounded-md border">
+							<div class="flex size-6 items-center justify-center rounded-md border bg-background">
 								<Plus class="size-4" />
 							</div>
-							<div class="text-muted-foreground font-medium">Add Profile</div>
+							<div class="font-medium text-muted-foreground">Add Profile</div>
 						</DropdownMenu.Item>
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
@@ -202,7 +202,7 @@
 								class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 								{...props}
 							>
-								<Avatar.Root class="bg-muted h-10 w-10 rounded-full">
+								<Avatar.Root class="h-10 w-10 rounded-full bg-muted">
 									<!-- <Avatar.Image src={user.avatar} alt={'@' + $user?.username} /> -->
 									<Avatar.Fallback class="text-muted-foreground uppercase">
 										{user.username?.slice(0, 2)}
@@ -224,7 +224,7 @@
 					>
 						<DropdownMenu.Label class="p-0 font-normal">
 							<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-								<Avatar.Root class="bg-muted h-10 w-10 rounded-full">
+								<Avatar.Root class="h-10 w-10 rounded-full bg-muted">
 									<!-- <Avatar.Image src={user?.avatar} alt={'@' + $user?.username} /> -->
 									<Avatar.Fallback class="text-muted-foreground uppercase">
 										{user.username?.slice(0, 2)}
diff --git a/web/src/lib/components/tables/BulkActions.svelte b/web/src/lib/components/tables/BulkActions.svelte
index 9b81d0f..ec330f2 100644
--- a/web/src/lib/components/tables/BulkActions.svelte
+++ b/web/src/lib/components/tables/BulkActions.svelte
@@ -9,7 +9,7 @@
 	export let selectedItems: T[] = [];
 </script>
 
-<div class="bg-muted/50 my-2 flex items-center justify-between gap-2 rounded-lg border p-2 pr-6">
+<div class="my-2 flex items-center justify-between gap-2 rounded-lg border bg-muted/50 p-2 pr-6">
 	<div class="flex items-center gap-2">
 		{#each actions as action (action.label)}
 			{#if action.type === 'button'}
@@ -46,7 +46,7 @@
 			{/if}
 		{/each}
 	</div>
-	<span class="text-muted-foreground text-sm">
+	<span class="text-sm text-muted-foreground">
 		{selectedCount} of {totalCount} item(s) selected.
 	</span>
 </div>
diff --git a/web/src/lib/components/tables/ColumnRule.svelte b/web/src/lib/components/tables/ColumnRule.svelte
index bcbb5f4..7f19539 100644
--- a/web/src/lib/components/tables/ColumnRule.svelte
+++ b/web/src/lib/components/tables/ColumnRule.svelte
@@ -244,7 +244,7 @@
 				<!-- Multiple indicator -->
 				<Badge
 					variant="outline"
-					class="hover:bg-muted cursor-pointer text-xs transition-colors duration-200"
+					class="cursor-pointer text-xs transition-colors duration-200 hover:bg-muted"
 				>
 					<span class="hidden sm:inline">+{parsedRules.length - 1}</span>
 					<span class="sm:hidden">{parsedRules.length} rules</span>
@@ -254,20 +254,20 @@
 
 		<HoverCard.Content class="w-auto max-w-md" side="bottom" sideOffset={8}>
 			<div class="space-y-3">
-				<div class="border-border flex items-center gap-2 border-b pb-2">
-					<List class="text-muted-foreground h-4 w-4" />
+				<div class="flex items-center gap-2 border-b border-border pb-2">
+					<List class="h-4 w-4 text-muted-foreground" />
 					<span class="text-sm font-medium">Traefik Rules ({parsedRules.length})</span>
 				</div>
 
 				<div class="max-h-60 space-y-1 overflow-y-auto">
 					{#each parsedRules as rule, index (rule.value + index)}
-						<div class="bg-muted/30 flex items-center gap-2 rounded-md p-2">
+						<div class="flex items-center gap-2 rounded-md bg-muted/30 p-2">
 							{#if showIcons}
 								{@const Icon = getRuleIcon(rule.type)}
 
 								<div class="flex min-w-0 flex-1 items-center gap-1">
-									<Icon class="text-muted-foreground h-3 w-3 shrink-0" />
-									<span class="text-muted-foreground min-w-0 text-xs font-medium">
+									<Icon class="h-3 w-3 shrink-0 text-muted-foreground" />
+									<span class="min-w-0 text-xs font-medium text-muted-foreground">
 										{rule.type}:
 									</span>
 
diff --git a/web/src/lib/components/tables/ColumnTLS.svelte b/web/src/lib/components/tables/ColumnTLS.svelte
index 0faf0cc..6691237 100644
--- a/web/src/lib/components/tables/ColumnTLS.svelte
+++ b/web/src/lib/components/tables/ColumnTLS.svelte
@@ -89,7 +89,7 @@
 		<HoverCard.Content class="w-auto max-w-sm" side="bottom" sideOffset={8}>
 			<div class="space-y-3">
 				<!-- Header -->
-				<div class="border-border flex items-center gap-2 border-b pb-2">
+				<div class="flex items-center gap-2 border-b border-border pb-2">
 					<Shield class="h-4 w-4 text-green-500" />
 					<span class="text-sm font-medium">TLS Configuration</span>
 				</div>
@@ -225,7 +225,7 @@
 					class="cursor-pointer text-sm transition-colors duration-200"
 					onclick={() => column?.setFilterValue?.('disabled')}
 				>
-					<Unlock class="text-muted-foreground mr-1 h-3 w-3" />
+					<Unlock class="mr-1 h-3 w-3 text-muted-foreground" />
 					<span class="text-muted-foreground">Disabled</span>
 				</Badge>
 			</Tooltip.Trigger>
diff --git a/web/src/lib/components/tables/DataTable.svelte b/web/src/lib/components/tables/DataTable.svelte
index af3dc8f..544cfba 100644
--- a/web/src/lib/components/tables/DataTable.svelte
+++ b/web/src/lib/components/tables/DataTable.svelte
@@ -218,7 +218,7 @@
 <div>
 	<div class="flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between">
 		<div class="relative flex items-center">
-			<Search class="text-muted-foreground absolute left-3" size={16} />
+			<Search class="absolute left-3 text-muted-foreground" size={16} />
 			<Input
 				placeholder="Search..."
 				bind:value={globalFilter}
@@ -226,7 +226,7 @@
 				class="w-full pl-9 sm:w-[180px] lg:w-[350px]"
 			/>
 			<Delete
-				class="text-muted-foreground absolute right-4"
+				class="absolute right-4 text-muted-foreground"
 				size={16}
 				onclick={() => table.setGlobalFilter('')}
 			/>
@@ -237,7 +237,7 @@
 			{#each table.getState().columnFilters as filter (filter.id)}
 				<Badge
 					variant="secondary"
-					class="hover:bg-muted-foreground/20 flex items-center gap-1 hover:cursor-pointer"
+					class="flex items-center gap-1 hover:cursor-pointer hover:bg-muted-foreground/20"
 					onclick={() => clearFilter(filter.id)}
 				>
 					<X size={12} />
@@ -389,7 +389,7 @@
 			>
 				<ChevronLeft />
 			</Button>
-			<span class="text-muted-foreground text-sm">
+			<span class="text-sm text-muted-foreground">
 				Page {pagination.pageIndex + 1} / {table.getPageCount()}
 			</span>
 			<Button
diff --git a/web/src/lib/components/tables/TableActions.svelte b/web/src/lib/components/tables/TableActions.svelte
index c766d84..e343222 100644
--- a/web/src/lib/components/tables/TableActions.svelte
+++ b/web/src/lib/components/tables/TableActions.svelte
@@ -60,15 +60,15 @@
 					<div class="space-y-4">
 						<div class="flex items-start gap-3">
 							<div
-								class="bg-destructive/10 mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
+								class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-destructive/10"
 							>
-								<AlertTriangle class="text-destructive h-4 w-4" />
+								<AlertTriangle class="h-4 w-4 text-destructive" />
 							</div>
 							<div class="flex-1 space-y-2">
 								<h4 class="text-sm leading-none font-semibold">
 									{action.popover.title}
 								</h4>
-								<p class="text-muted-foreground text-sm leading-relaxed">
+								<p class="text-sm leading-relaxed text-muted-foreground">
 									{action.popover.description}
 								</p>
 							</div>
diff --git a/web/src/lib/components/ui/alert/alert-description.svelte b/web/src/lib/components/ui/alert/alert-description.svelte
index 5920ca6..ceccee5 100644
--- a/web/src/lib/components/ui/alert/alert-description.svelte
+++ b/web/src/lib/components/ui/alert/alert-description.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+		'col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/avatar/avatar-fallback.svelte b/web/src/lib/components/ui/avatar/avatar-fallback.svelte
index b911baf..4a452e9 100644
--- a/web/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/web/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -12,6 +12,6 @@
 <AvatarPrimitive.Fallback
 	bind:ref
 	data-slot="avatar-fallback"
-	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+	class={cn('flex size-full items-center justify-center rounded-full bg-muted', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
index 33abc27..7bd6d30 100644
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="breadcrumb-list"
 	class={cn(
-		'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+		'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
index 4938bdd..3c6be01 100644
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -16,7 +16,7 @@
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
-	class={cn('text-foreground font-normal', className)}
+	class={cn('font-normal text-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/card/card-description.svelte b/web/src/lib/components/ui/card/card-description.svelte
index bfb0725..b46a1ad 100644
--- a/web/src/lib/components/ui/card/card-description.svelte
+++ b/web/src/lib/components/ui/card/card-description.svelte
@@ -13,7 +13,7 @@
 <p
 	bind:this={ref}
 	data-slot="card-description"
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/card/card.svelte b/web/src/lib/components/ui/card/card.svelte
index 4112332..1030435 100644
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card"
 	class={cn(
-		'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+		'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/checkbox/checkbox.svelte b/web/src/lib/components/ui/checkbox/checkbox.svelte
index fc8614a..3a7817d 100644
--- a/web/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/web/src/lib/components/ui/checkbox/checkbox.svelte
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
 		className
 	)}
 	bind:checked
diff --git a/web/src/lib/components/ui/command/command-group.svelte b/web/src/lib/components/ui/command/command-group.svelte
index 4097222..9330892 100644
--- a/web/src/lib/components/ui/command/command-group.svelte
+++ b/web/src/lib/components/ui/command/command-group.svelte
@@ -17,12 +17,12 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn('text-foreground overflow-hidden p-1', className)}
+	class={cn('overflow-hidden p-1 text-foreground', className)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}
-		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
 			{heading}
 		</CommandPrimitive.GroupHeading>
 	{/if}
diff --git a/web/src/lib/components/ui/command/command-input.svelte b/web/src/lib/components/ui/command/command-input.svelte
index 3acb041..366a61b 100644
--- a/web/src/lib/components/ui/command/command-input.svelte
+++ b/web/src/lib/components/ui/command/command-input.svelte
@@ -16,7 +16,7 @@
 	<CommandPrimitive.Input
 		data-slot="command-input"
 		class={cn(
-			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+			'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		bind:ref
diff --git a/web/src/lib/components/ui/command/command-item.svelte b/web/src/lib/components/ui/command/command-item.svelte
index ea54f39..26e034d 100644
--- a/web/src/lib/components/ui/command/command-item.svelte
+++ b/web/src/lib/components/ui/command/command-item.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/command/command-link-item.svelte b/web/src/lib/components/ui/command/command-link-item.svelte
index 4edde50..d3f63c8 100644
--- a/web/src/lib/components/ui/command/command-link-item.svelte
+++ b/web/src/lib/components/ui/command/command-link-item.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/command/command-separator.svelte b/web/src/lib/components/ui/command/command-separator.svelte
index d75e794..c21856b 100644
--- a/web/src/lib/components/ui/command/command-separator.svelte
+++ b/web/src/lib/components/ui/command/command-separator.svelte
@@ -12,6 +12,6 @@
 <CommandPrimitive.Separator
 	bind:ref
 	data-slot="command-separator"
-	class={cn('bg-border -mx-1 h-px', className)}
+	class={cn('-mx-1 h-px bg-border', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/command/command-shortcut.svelte b/web/src/lib/components/ui/command/command-shortcut.svelte
index 0c47933..4866bda 100644
--- a/web/src/lib/components/ui/command/command-shortcut.svelte
+++ b/web/src/lib/components/ui/command/command-shortcut.svelte
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="command-shortcut"
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/command/command.svelte b/web/src/lib/components/ui/command/command.svelte
index adff6e0..f26c070 100644
--- a/web/src/lib/components/ui/command/command.svelte
+++ b/web/src/lib/components/ui/command/command.svelte
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="command"
 	class={cn(
-		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+		'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/copy-input/copy-input.svelte b/web/src/lib/components/ui/copy-input/copy-input.svelte
index 669cb69..516f543 100644
--- a/web/src/lib/components/ui/copy-input/copy-input.svelte
+++ b/web/src/lib/components/ui/copy-input/copy-input.svelte
@@ -31,7 +31,7 @@
 	<Button
 		variant="ghost"
 		size="icon"
-		class="text-muted-foreground absolute inset-y-0 right-1 flex items-center justify-center p-2 hover:bg-transparent hover:text-red-400"
+		class="absolute inset-y-0 right-1 flex items-center justify-center p-2 text-muted-foreground hover:bg-transparent hover:text-red-400"
 		onclick={async () => await clipboard.copy(value)}
 	>
 		{#if clipboard.status === 'success'}
diff --git a/web/src/lib/components/ui/custom-switch/custom-switch.svelte b/web/src/lib/components/ui/custom-switch/custom-switch.svelte
index 168d2ca..341bd7d 100644
--- a/web/src/lib/components/ui/custom-switch/custom-switch.svelte
+++ b/web/src/lib/components/ui/custom-switch/custom-switch.svelte
@@ -78,7 +78,7 @@
 	aria-checked={checked}
 	{disabled}
 	onclick={handletoggle}
-	class="focus:ring-primary relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none
+	class="relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out focus:ring-primary focus:outline-none
 		{sizeClasses[size]}
 		{checked ? 'bg-primary' : 'bg-input'}
 		{disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
@@ -89,10 +89,10 @@
 	{#if variant === 'text' && textLabels}
 		<!-- Background text labels -->
 		<div class="absolute inset-0 flex items-center justify-between px-2">
-			<span class="text-muted-foreground text-xs font-medium transition-colors duration-200">
+			<span class="text-xs font-medium text-muted-foreground transition-colors duration-200">
 				{textLabels.unchecked}
 			</span>
-			<span class="text-muted-foreground text-xs font-medium transition-colors duration-200">
+			<span class="text-xs font-medium text-muted-foreground transition-colors duration-200">
 				{textLabels.checked}
 			</span>
 		</div>
@@ -101,7 +101,7 @@
 	<span
 		class="pointer-events-none flex items-center justify-center rounded-full shadow-lg ring-0 transition-all duration-200 ease-in-out
 			{thumbSizeClasses[size]}
-			{checked ? 'bg-primary-foreground' : 'bg-background border-border/20 border'}
+			{checked ? 'bg-primary-foreground' : 'border border-border/20 bg-background'}
 			{getTranslation()}
 		"
 	>
@@ -117,7 +117,7 @@
 				{/if}
 			</div>
 		{:else if variant === 'text' && textLabels}
-			<span class="text-primary text-xs font-bold whitespace-nowrap">
+			<span class="text-xs font-bold whitespace-nowrap text-primary">
 				{checked ? textLabels.checked : textLabels.unchecked}
 			</span>
 		{/if}
diff --git a/web/src/lib/components/ui/dialog/dialog-content.svelte b/web/src/lib/components/ui/dialog/dialog-content.svelte
index c0e54b8..7c9eceb 100644
--- a/web/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/web/src/lib/components/ui/dialog/dialog-content.svelte
@@ -25,7 +25,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+			'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
 			className
 		)}
 		{...restProps}
@@ -33,7 +33,7 @@
 		{@render children?.()}
 		{#if showCloseButton}
 			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+				class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 			>
 				<XIcon />
 				<span class="sr-only">Close</span>
diff --git a/web/src/lib/components/ui/dialog/dialog-description.svelte b/web/src/lib/components/ui/dialog/dialog-description.svelte
index c658420..7539190 100644
--- a/web/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/web/src/lib/components/ui/dialog/dialog-description.svelte
@@ -12,6 +12,6 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/dialog/dialog-overlay.svelte b/web/src/lib/components/ui/dialog/dialog-overlay.svelte
index 938ab1e..34166e1 100644
--- a/web/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/web/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+		'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index e94c637..ed52f67 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -23,7 +23,7 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 25223ef..0b63d7e 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -19,7 +19,7 @@
 		data-slot="dropdown-menu-content"
 		{sideOffset}
 		class={cn(
-			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+			'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 38bc45b..b0d4ed3 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 3c6330a..ca8ccaf 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 38dabc1..a076e43 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn('bg-border -mx-1 my-1 h-px', className)}
+	class={cn('-mx-1 my-1 h-px bg-border', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index dbe6e20..eb86e67 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index d3d71d3..b552cf2 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
 	class={cn(
-		'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+		'z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index e37ac1a..96bb810 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -19,7 +19,7 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/form/form-description.svelte b/web/src/lib/components/ui/form/form-description.svelte
index fa6f8f8..034270a 100644
--- a/web/src/lib/components/ui/form/form-description.svelte
+++ b/web/src/lib/components/ui/form/form-description.svelte
@@ -12,6 +12,6 @@
 <FormPrimitive.Description
 	bind:ref
 	data-slot="form-description"
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/form/form-field-errors.svelte b/web/src/lib/components/ui/form/form-field-errors.svelte
index 9150acf..1baddf9 100644
--- a/web/src/lib/components/ui/form/form-field-errors.svelte
+++ b/web/src/lib/components/ui/form/form-field-errors.svelte
@@ -15,7 +15,7 @@
 
 <FormPrimitive.FieldErrors
 	bind:ref
-	class={cn('text-destructive text-sm font-medium', className)}
+	class={cn('text-sm font-medium text-destructive', className)}
 	{...restProps}
 >
 	{#snippet children({ errors, errorProps })}
diff --git a/web/src/lib/components/ui/form/form-legend.svelte b/web/src/lib/components/ui/form/form-legend.svelte
index bc91222..2778f9c 100644
--- a/web/src/lib/components/ui/form/form-legend.svelte
+++ b/web/src/lib/components/ui/form/form-legend.svelte
@@ -11,6 +11,6 @@
 
 <FormPrimitive.Legend
 	bind:ref
-	class={cn('data-[fs-error]:text-destructive text-sm leading-none font-medium', className)}
+	class={cn('text-sm leading-none font-medium data-[fs-error]:text-destructive', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/hover-card/hover-card-content.svelte b/web/src/lib/components/ui/hover-card/hover-card-content.svelte
index 065467c..98f91fb 100644
--- a/web/src/lib/components/ui/hover-card/hover-card-content.svelte
+++ b/web/src/lib/components/ui/hover-card/hover-card-content.svelte
@@ -21,7 +21,7 @@
 		{align}
 		{sideOffset}
 		class={cn(
-			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden outline-none',
+			'z-50 mt-3 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}
diff --git a/web/src/lib/components/ui/input-otp/input-otp-slot.svelte b/web/src/lib/components/ui/input-otp/input-otp-slot.svelte
index c9c1105..03554ac 100644
--- a/web/src/lib/components/ui/input-otp/input-otp-slot.svelte
+++ b/web/src/lib/components/ui/input-otp/input-otp-slot.svelte
@@ -15,9 +15,9 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		'border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-10 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md',
+		'relative flex size-10 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive dark:bg-input/30',
 		cell.isActive &&
-			'border-ring ring-ring/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]',
+			'z-10 border-ring ring-[3px] ring-ring/50 ring-offset-background aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 		className
 	)}
 	{...restProps}
@@ -25,7 +25,7 @@
 	{cell.char}
 	{#if cell.hasFakeCaret}
 		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+			<div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
 		</div>
 	{/if}
 </InputOTPPrimitive.Cell>
diff --git a/web/src/lib/components/ui/input/input.svelte b/web/src/lib/components/ui/input/input.svelte
index 7598a86..0fc980b 100644
--- a/web/src/lib/components/ui/input/input.svelte
+++ b/web/src/lib/components/ui/input/input.svelte
@@ -24,9 +24,9 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
 		type="file"
@@ -39,9 +39,9 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
 		{type}
diff --git a/web/src/lib/components/ui/password-input/password-input.svelte b/web/src/lib/components/ui/password-input/password-input.svelte
index 87b8fda..aa60c35 100644
--- a/web/src/lib/components/ui/password-input/password-input.svelte
+++ b/web/src/lib/components/ui/password-input/password-input.svelte
@@ -30,7 +30,7 @@
 	<Button
 		variant="ghost"
 		size="icon"
-		class="text-muted-foreground absolute inset-y-0 right-1 flex items-center justify-center p-2 hover:bg-transparent hover:text-red-400"
+		class="absolute inset-y-0 right-1 flex items-center justify-center p-2 text-muted-foreground hover:bg-transparent hover:text-red-400"
 		onclick={() => (showPassword = !showPassword)}
 	>
 		{#if showPassword}
diff --git a/web/src/lib/components/ui/popover/popover-content.svelte b/web/src/lib/components/ui/popover/popover-content.svelte
index 620f392..8ddbcac 100644
--- a/web/src/lib/components/ui/popover/popover-content.svelte
+++ b/web/src/lib/components/ui/popover/popover-content.svelte
@@ -21,7 +21,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+			'z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}
diff --git a/web/src/lib/components/ui/progress/progress.svelte b/web/src/lib/components/ui/progress/progress.svelte
index 12d4a43..2e4afd0 100644
--- a/web/src/lib/components/ui/progress/progress.svelte
+++ b/web/src/lib/components/ui/progress/progress.svelte
@@ -14,14 +14,14 @@
 <ProgressPrimitive.Root
 	bind:ref
 	data-slot="progress"
-	class={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
+	class={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
 	{value}
 	{max}
 	{...restProps}
 >
 	<div
 		data-slot="progress-indicator"
-		class="bg-primary h-full w-full flex-1 transition-all"
+		class="h-full w-full flex-1 bg-primary transition-all"
 		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>
diff --git a/web/src/lib/components/ui/select/select-content.svelte b/web/src/lib/components/ui/select/select-content.svelte
index ca9d1b5..f00fc75 100644
--- a/web/src/lib/components/ui/select/select-content.svelte
+++ b/web/src/lib/components/ui/select/select-content.svelte
@@ -22,7 +22,7 @@
 		{sideOffset}
 		data-slot="select-content"
 		class={cn(
-			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+			'relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}
diff --git a/web/src/lib/components/ui/select/select-group-heading.svelte b/web/src/lib/components/ui/select/select-group-heading.svelte
index 3ff7003..3dc0282 100644
--- a/web/src/lib/components/ui/select/select-group-heading.svelte
+++ b/web/src/lib/components/ui/select/select-group-heading.svelte
@@ -14,7 +14,7 @@
 <SelectPrimitive.GroupHeading
 	bind:ref
 	data-slot="select-group-heading"
-	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/select/select-item.svelte b/web/src/lib/components/ui/select/select-item.svelte
index 06e48be..d527d4c 100644
--- a/web/src/lib/components/ui/select/select-item.svelte
+++ b/web/src/lib/components/ui/select/select-item.svelte
@@ -18,7 +18,7 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/select/select-label.svelte b/web/src/lib/components/ui/select/select-label.svelte
index 6c76ced..8849c2a 100644
--- a/web/src/lib/components/ui/select/select-label.svelte
+++ b/web/src/lib/components/ui/select/select-label.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/select/select-separator.svelte b/web/src/lib/components/ui/select/select-separator.svelte
index 3624d4c..bfd1eb7 100644
--- a/web/src/lib/components/ui/select/select-separator.svelte
+++ b/web/src/lib/components/ui/select/select-separator.svelte
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+	class={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/select/select-trigger.svelte b/web/src/lib/components/ui/select/select-trigger.svelte
index f14abe0..f7ac421 100644
--- a/web/src/lib/components/ui/select/select-trigger.svelte
+++ b/web/src/lib/components/ui/select/select-trigger.svelte
@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/separator/separator.svelte b/web/src/lib/components/ui/separator/separator.svelte
index 6ceb6a5..d3338da 100644
--- a/web/src/lib/components/ui/separator/separator.svelte
+++ b/web/src/lib/components/ui/separator/separator.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="separator"
 	class={cn(
-		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/sheet/sheet-content.svelte b/web/src/lib/components/ui/sheet/sheet-content.svelte
index ba4228d..2ff0fea 100644
--- a/web/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-content.svelte
@@ -51,7 +51,7 @@
 	>
 		{@render children?.()}
 		<SheetPrimitive.Close
-			class="ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+			class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
 		>
 			<XIcon class="size-4" />
 			<span class="sr-only">Close</span>
diff --git a/web/src/lib/components/ui/sheet/sheet-description.svelte b/web/src/lib/components/ui/sheet/sheet-description.svelte
index 996c102..b6aae8e 100644
--- a/web/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-description.svelte
@@ -12,6 +12,6 @@
 <SheetPrimitive.Description
 	bind:ref
 	data-slot="sheet-description"
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/sheet/sheet-overlay.svelte b/web/src/lib/components/ui/sheet/sheet-overlay.svelte
index 2246de0..cd637be 100644
--- a/web/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="sheet-overlay"
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+		'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/sheet/sheet-title.svelte b/web/src/lib/components/ui/sheet/sheet-title.svelte
index 34081c9..7539897 100644
--- a/web/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/web/src/lib/components/ui/sheet/sheet-title.svelte
@@ -12,6 +12,6 @@
 <SheetPrimitive.Title
 	bind:ref
 	data-slot="sheet-title"
-	class={cn('text-foreground font-semibold', className)}
+	class={cn('font-semibold text-foreground', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/sidebar/sidebar-input.svelte b/web/src/lib/components/ui/sidebar/sidebar-input.svelte
index 9ed0aa8..1a3610b 100644
--- a/web/src/lib/components/ui/sidebar/sidebar-input.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -16,6 +16,6 @@
 	bind:value
 	data-slot="sidebar-input"
 	data-sidebar="input"
-	class={cn('bg-background h-8 w-full shadow-none', className)}
+	class={cn('h-8 w-full bg-background shadow-none', className)}
 	{...restProps}
 />
diff --git a/web/src/lib/components/ui/sidebar/sidebar-inset.svelte b/web/src/lib/components/ui/sidebar/sidebar-inset.svelte
index 05842bc..e2a30a2 100644
--- a/web/src/lib/components/ui/sidebar/sidebar-inset.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-inset"
 	class={cn(
-		'bg-background relative flex w-full flex-1 flex-col',
+		'relative flex w-full flex-1 flex-col bg-background',
 		'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
 		className
 	)}
diff --git a/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
index a9ebc18..aef8db8 100644
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -15,7 +15,7 @@
 	data-slot="sidebar-menu-badge"
 	data-sidebar="menu-badge"
 	class={cn(
-		'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+		'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none',
 		'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
 		'peer-data-[size=sm]/menu-button:top-1',
 		'peer-data-[size=default]/menu-button:top-1.5',
diff --git a/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
index 620ea99..609ca64 100644
--- a/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -15,7 +15,7 @@
 	data-slot="sidebar-menu-sub"
 	data-sidebar="menu-sub"
 	class={cn(
-		'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+		'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
 		'group-data-[collapsible=icon]:hidden',
 		className
 	)}
diff --git a/web/src/lib/components/ui/sidebar/sidebar-provider.svelte b/web/src/lib/components/ui/sidebar/sidebar-provider.svelte
index 02f1307..2e615f4 100644
--- a/web/src/lib/components/ui/sidebar/sidebar-provider.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -42,7 +42,7 @@
 		data-slot="sidebar-wrapper"
 		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
 		class={cn(
-			'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+			'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
 			className
 		)}
 		bind:this={ref}
diff --git a/web/src/lib/components/ui/sidebar/sidebar-rail.svelte b/web/src/lib/components/ui/sidebar/sidebar-rail.svelte
index 220f62e..280affc 100644
--- a/web/src/lib/components/ui/sidebar/sidebar-rail.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -22,10 +22,10 @@
 	onclick={sidebar.toggle}
 	title="Toggle Sidebar"
 	class={cn(
-		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+		'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex',
 		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
 		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+		'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
 		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
 		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
 		className
diff --git a/web/src/lib/components/ui/sidebar/sidebar.svelte b/web/src/lib/components/ui/sidebar/sidebar.svelte
index f7e6525..bdbaab3 100644
--- a/web/src/lib/components/ui/sidebar/sidebar.svelte
+++ b/web/src/lib/components/ui/sidebar/sidebar.svelte
@@ -25,7 +25,7 @@
 {#if collapsible === 'none'}
 	<div
 		class={cn(
-			'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+			'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
 			className
 		)}
 		bind:this={ref}
@@ -39,7 +39,7 @@
 			data-sidebar="sidebar"
 			data-slot="sidebar"
 			data-mobile="true"
-			class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			class="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
 			{side}
 		>
@@ -55,7 +55,7 @@
 {:else}
 	<div
 		bind:this={ref}
-		class="text-sidebar-foreground group peer hidden md:block"
+		class="group peer hidden text-sidebar-foreground md:block"
 		data-state={sidebar.state}
 		data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
 		data-variant={variant}
@@ -92,7 +92,7 @@
 			<div
 				data-sidebar="sidebar"
 				data-slot="sidebar-inner"
-				class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+				class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
 			>
 				{@render children?.()}
 			</div>
diff --git a/web/src/lib/components/ui/skeleton/skeleton.svelte b/web/src/lib/components/ui/skeleton/skeleton.svelte
index 35b8577..cdd10e0 100644
--- a/web/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/web/src/lib/components/ui/skeleton/skeleton.svelte
@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn('bg-accent animate-pulse rounded-md', className)}
+	class={cn('animate-pulse rounded-md bg-accent', className)}
 	{...restProps}
 ></div>
diff --git a/web/src/lib/components/ui/switch/switch.svelte b/web/src/lib/components/ui/switch/switch.svelte
index ce291f3..9762142 100644
--- a/web/src/lib/components/ui/switch/switch.svelte
+++ b/web/src/lib/components/ui/switch/switch.svelte
@@ -15,7 +15,7 @@
 	bind:checked
 	data-slot="switch"
 	class={cn(
-		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		'peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
 		className
 	)}
 	{...restProps}
@@ -23,7 +23,7 @@
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
 		class={cn(
-			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+			'pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
 		)}
 	/>
 </SwitchPrimitive.Root>
diff --git a/web/src/lib/components/ui/table/table-caption.svelte b/web/src/lib/components/ui/table/table-caption.svelte
index 61ac415..7ad3aee 100644
--- a/web/src/lib/components/ui/table/table-caption.svelte
+++ b/web/src/lib/components/ui/table/table-caption.svelte
@@ -13,7 +13,7 @@
 <caption
 	bind:this={ref}
 	data-slot="table-caption"
-	class={cn('text-muted-foreground mt-4 text-sm', className)}
+	class={cn('mt-4 text-sm text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/table/table-footer.svelte b/web/src/lib/components/ui/table/table-footer.svelte
index 53a9eb4..565b244 100644
--- a/web/src/lib/components/ui/table/table-footer.svelte
+++ b/web/src/lib/components/ui/table/table-footer.svelte
@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+	class={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/table/table-head.svelte b/web/src/lib/components/ui/table/table-head.svelte
index 1ef7f1d..4d41f0b 100644
--- a/web/src/lib/components/ui/table/table-head.svelte
+++ b/web/src/lib/components/ui/table/table-head.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-head"
 	class={cn(
-		'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+		'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/table/table-row.svelte b/web/src/lib/components/ui/table/table-row.svelte
index d0d5fed..9270b1d 100644
--- a/web/src/lib/components/ui/table/table-row.svelte
+++ b/web/src/lib/components/ui/table/table-row.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-row"
 	class={cn(
-		'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+		'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/tabs/tabs-list.svelte b/web/src/lib/components/ui/tabs/tabs-list.svelte
index e875fe4..4929200 100644
--- a/web/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-list.svelte
@@ -9,7 +9,7 @@
 	bind:ref
 	data-slot="tabs-list"
 	class={cn(
-		'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+		'inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground',
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/tabs/tabs-trigger.svelte b/web/src/lib/components/ui/tabs/tabs-trigger.svelte
index 9892258..c2feee1 100644
--- a/web/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-background text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-background dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/lib/components/ui/textarea/textarea.svelte b/web/src/lib/components/ui/textarea/textarea.svelte
index 7504574..e759ddb 100644
--- a/web/src/lib/components/ui/textarea/textarea.svelte
+++ b/web/src/lib/components/ui/textarea/textarea.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="textarea"
 	class={cn(
-		'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+		'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
 		className
 	)}
 	bind:value
diff --git a/web/src/lib/components/ui/tooltip/tooltip-content.svelte b/web/src/lib/components/ui/tooltip/tooltip-content.svelte
index e6f2670..83595e2 100644
--- a/web/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/web/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -22,7 +22,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+			'z-50 w-fit origin-(--bits-tooltip-content-transform-origin) animate-in rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
 			className
 		)}
 		{...restProps}
@@ -32,7 +32,7 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+						'z-50 size-2.5 rotate-45 rounded-[2px] bg-primary',
 						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
 						'data-[side=bottom]:translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
 						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
diff --git a/web/src/lib/components/utils/TraefikConnection.svelte b/web/src/lib/components/utils/TraefikConnection.svelte
index df19d6f..bfcd46e 100644
--- a/web/src/lib/components/utils/TraefikConnection.svelte
+++ b/web/src/lib/components/utils/TraefikConnection.svelte
@@ -39,7 +39,7 @@
 				<div class="space-y-4">
 					<div class="space-y-2">
 						<h4 class="leading-none font-medium">Traefik HTTP Provider</h4>
-						<p class="text-muted-foreground text-sm">
+						<p class="text-sm text-muted-foreground">
 							Copy the configuration for your Traefik setup
 						</p>
 					</div>
@@ -54,7 +54,7 @@
 								</Badge>
 								<CopyButton text={getYamlConfig(connectionString)} />
 							</div>
-							<pre class="bg-muted block overflow-x-auto rounded p-2 text-xs"><code
+							<pre class="block overflow-x-auto rounded bg-muted p-2 text-xs"><code
 									>{getYamlConfig(connectionString)}</code
 								></pre>
 						</div>
@@ -68,7 +68,7 @@
 								</Badge>
 								<CopyButton text={getCliConfig(connectionString)} />
 							</div>
-							<code class="bg-muted block rounded p-2 text-xs break-all">
+							<code class="block rounded bg-muted p-2 text-xs break-all">
 								{getCliConfig(connectionString)}
 							</code>
 						</div>
@@ -96,7 +96,7 @@
 						</Badge>
 						<CopyButton text={getYamlConfig(connectionString)} />
 					</div>
-					<pre class="bg-muted block overflow-x-auto rounded p-3 text-sm"><code
+					<pre class="block overflow-x-auto rounded bg-muted p-3 text-sm"><code
 							>{getYamlConfig(connectionString)}</code
 						></pre>
 				</div>
@@ -110,7 +110,7 @@
 						</Badge>
 						<CopyButton text={getCliConfig(connectionString)} />
 					</div>
-					<code class="bg-muted block rounded p-3 text-sm break-all">
+					<code class="block rounded bg-muted p-3 text-sm break-all">
 						{getCliConfig(connectionString)}
 					</code>
 				</div>
diff --git a/web/src/lib/components/utils/ruleEditor.svelte b/web/src/lib/components/utils/ruleEditor.svelte
index 6bf6004..c1e3434 100644
--- a/web/src/lib/components/utils/ruleEditor.svelte
+++ b/web/src/lib/components/utils/ruleEditor.svelte
@@ -272,12 +272,12 @@
 			/>
 
 			{#if showDropdown}
-				<ul class="bg-card absolute mt-1 max-h-48 w-80 overflow-y-auto rounded-lg border p-2">
+				<ul class="absolute mt-1 max-h-48 w-80 overflow-y-auto rounded-lg border bg-card p-2">
 					{#each filteredRules as template, i (template)}
 						<button
 							role="option"
 							aria-selected={i === selectedRuleIndex}
-							class="hover:bg-muted w-full cursor-pointer rounded p-1 text-left font-mono text-sm"
+							class="w-full cursor-pointer rounded p-1 text-left font-mono text-sm hover:bg-muted"
 							class:bg-muted={i === selectedRuleIndex}
 							onclick={() => insertRule(template)}
 						>
@@ -289,7 +289,7 @@
 
 			{#if !disabled}
 				<div
-					class="text-muted-foreground flex items-center justify-end gap-1 border-t px-3 py-2 text-sm"
+					class="flex items-center justify-end gap-1 border-t px-3 py-2 text-sm text-muted-foreground"
 				>
 					{#if valid}
 						<span>Valid</span>
@@ -303,7 +303,7 @@
 		</div>
 
 		{#if !disabled}
-			<div class="text-muted-foreground text-xs">
+			<div class="text-xs text-muted-foreground">
 				<span class="font-bold">Examples:</span>
 				<ul class="list-inside list-disc">
 					{#each ruleTemplates[type] as template (template)}
diff --git a/web/src/lib/stores/realtime.ts b/web/src/lib/stores/realtime.ts
index f5c381d..8d14373 100644
--- a/web/src/lib/stores/realtime.ts
+++ b/web/src/lib/stores/realtime.ts
@@ -1,15 +1,15 @@
 import {
-    agentClient,
-    dnsClient,
-    entryPointClient,
-    middlewareClient,
-    profileClient,
-    routerClient,
-    serversTransportClient,
-    serviceClient,
-    traefikClient,
-    userClient,
-    utilClient
+	agentClient,
+	dnsClient,
+	entryPointClient,
+	middlewareClient,
+	profileClient,
+	routerClient,
+	serversTransportClient,
+	serviceClient,
+	traefikClient,
+	userClient,
+	utilClient
 } from '$lib/api';
 import type { Agent } from '$lib/gen/mantrae/v1/agent_pb';
 import type { DnsProvider } from '$lib/gen/mantrae/v1/dns_provider_pb';
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index cf042d3..da67dc6 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -85,7 +85,10 @@
 
 <svelte:head>
 	<title>Dashboard - Mantrae</title>
-	<meta name="description" content="Monitor and manage your reverse proxy configurations, agents, DNS providers, and system users" />
+	<meta
+		name="description"
+		content="Monitor and manage your reverse proxy configurations, agents, DNS providers, and system users"
+	/>
 </svelte:head>
 
 <ProfileModal bind:item={modalProfile} bind:open={modalProfileOpen} />
diff --git a/web/src/routes/agents/+page.svelte b/web/src/routes/agents/+page.svelte
index 923ef2f..e4fcab1 100644
--- a/web/src/routes/agents/+page.svelte
+++ b/web/src/routes/agents/+page.svelte
@@ -166,19 +166,22 @@
 
 <svelte:head>
 	<title>Agents - Mantrae</title>
-	<meta name="description" content="Monitor and manage your connected Mantrae agents for distributed reverse proxy management" />
+	<meta
+		name="description"
+		content="Monitor and manage your connected Mantrae agents for distributed reverse proxy management"
+	/>
 </svelte:head>
 
 <div class="flex flex-col gap-2">
 	<div class="flex items-center justify-between">
 		<div>
 			<h1 class="flex items-center gap-3 text-3xl font-bold tracking-tight">
-				<div class="bg-primary/10 rounded-lg p-2">
-					<Bot class="text-primary h-6 w-6" />
+				<div class="rounded-lg bg-primary/10 p-2">
+					<Bot class="h-6 w-6 text-primary" />
 				</div>
 				Agents
 			</h1>
-			<p class="text-muted-foreground mt-1">Connect your agents</p>
+			<p class="mt-1 text-muted-foreground">Connect your agents</p>
 		</div>
 	</div>
 
diff --git a/web/src/routes/dns/+page.svelte b/web/src/routes/dns/+page.svelte
index 882a486..242ac3d 100644
--- a/web/src/routes/dns/+page.svelte
+++ b/web/src/routes/dns/+page.svelte
@@ -203,19 +203,22 @@
 
 <svelte:head>
 	<title>DNS Providers - Mantrae</title>
-	<meta name="description" content="Manage your DNS providers for automatic DNS challenge resolution with Let's Encrypt" />
+	<meta
+		name="description"
+		content="Manage your DNS providers for automatic DNS challenge resolution with Let's Encrypt"
+	/>
 </svelte:head>
 
 <div class="flex flex-col gap-2">
 	<div class="flex items-center justify-between">
 		<div>
 			<h1 class="flex items-center gap-3 text-3xl font-bold tracking-tight">
-				<div class="bg-primary/10 rounded-lg p-2">
-					<Globe class="text-primary h-6 w-6" />
+				<div class="rounded-lg bg-primary/10 p-2">
+					<Globe class="h-6 w-6 text-primary" />
 				</div>
 				DNS Management
 			</h1>
-			<p class="text-muted-foreground mt-1">Manage your DNS providers</p>
+			<p class="mt-1 text-muted-foreground">Manage your DNS providers</p>
 		</div>
 	</div>
 
diff --git a/web/src/routes/entrypoints/+page.svelte b/web/src/routes/entrypoints/+page.svelte
index 4a02ef0..991a0da 100644
--- a/web/src/routes/entrypoints/+page.svelte
+++ b/web/src/routes/entrypoints/+page.svelte
@@ -156,19 +156,22 @@
 
 <svelte:head>
 	<title>EntryPoints - Mantrae</title>
-	<meta name="description" content="Configure entrypoints for your reverse proxy to listen for incoming connections" />
+	<meta
+		name="description"
+		content="Configure entrypoints for your reverse proxy to listen for incoming connections"
+	/>
 </svelte:head>
 
 <div class="flex flex-col gap-2">
 	<div class="flex items-center justify-between">
 		<div>
 			<h1 class="flex items-center gap-3 text-3xl font-bold tracking-tight">
-				<div class="bg-primary/10 rounded-lg p-2">
-					<EthernetPort class="text-primary h-6 w-6" />
+				<div class="rounded-lg bg-primary/10 p-2">
+					<EthernetPort class="h-6 w-6 text-primary" />
 				</div>
 				Entry Points
 			</h1>
-			<p class="text-muted-foreground mt-1">Manage your entry points</p>
+			<p class="mt-1 text-muted-foreground">Manage your entry points</p>
 		</div>
 	</div>
 
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 8ad3aaf..5aa7722 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,8 +1,3 @@
-<svelte:head>
-	<title>Login - Mantrae</title>
-	<meta name="description" content="Sign in to your Mantrae account to manage your reverse proxy configurations" />
-</svelte:head>
-
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { handleOIDCLogin, profileClient, userClient } from '$lib/api';
@@ -74,12 +69,20 @@
 	};
 </script>
 
+<svelte:head>
+	<title>Login - Mantrae</title>
+	<meta
+		name="description"
+		content="Sign in to your Mantrae account to manage your reverse proxy configurations"
+	/>
+</svelte:head>
+
 {#if !user.isLoggedIn()}
 	{#await userClient.getOIDCStatus({}) then value}
 		<form
-			class="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
+			class="m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border bg-muted shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
 		>
-			<div class="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
+			<div class="-m-px rounded-[calc(var(--radius)+.125rem)] border bg-card p-8 pb-6">
 				<div class="text-center">
 					<img src={logo} alt="logo" class="mx-auto h-8 w-fit" />
 					<h1 class="mt-4 mb-1 text-xl font-semibold">Sign In to Mantrae</h1>
@@ -99,7 +102,7 @@
 								<Button
 									variant="link"
 									size="sm"
-									class="link intent-info variant-ghost text-muted-foreground text-xs"
+									class="link intent-info variant-ghost text-xs text-muted-foreground"
 									onclick={handleReset}
 								>
 									Forgot your Password?
@@ -116,7 +119,7 @@
 					{#if value.loginEnabled}
 						<div class="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
 							<hr class="border-dashed" />
-							<span class="text-muted-foreground text-xs">Or continue With</span>
+							<span class="text-xs text-muted-foreground">Or continue With</span>
 							<hr class="border-dashed" />
 						</div>
 					{:else}
diff --git a/web/src/routes/login/reset/+page.svelte b/web/src/routes/login/reset/+page.svelte
index 94ba2be..1eb038c 100644
--- a/web/src/routes/login/reset/+page.svelte
+++ b/web/src/routes/login/reset/+page.svelte
@@ -1,8 +1,3 @@
-<svelte:head>
-	<title>Reset Password - Mantrae</title>
-	<meta name="description" content="Reset your Mantrae account password using the one-time password sent to your email" />
-</svelte:head>
-
 <script lang="ts">
 	import * as InputOTP from '$lib/components/ui/input-otp/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
@@ -58,6 +53,14 @@
 	};
 </script>
 
+<svelte:head>
+	<title>Reset Password - Mantrae</title>
+	<meta
+		name="description"
+		content="Reset your Mantrae account password using the one-time password sent to your email"
+	/>
+</svelte:head>
+
 <Card.Root class="w-[400px]">
 	<Card.Header>
 		<Card.Title>Reset Token</Card.Title>
diff --git a/web/src/routes/middlewares/+page.svelte b/web/src/routes/middlewares/+page.svelte
index 01194b4..2fc62f0 100644
--- a/web/src/routes/middlewares/+page.svelte
+++ b/web/src/routes/middlewares/+page.svelte
@@ -247,19 +247,22 @@
 
 <svelte:head>
 	<title>Middlewares - Mantrae</title>
-	<meta name="description" content="Manage HTTP and TCP middlewares to customize your reverse proxy behavior" />
+	<meta
+		name="description"
+		content="Manage HTTP and TCP middlewares to customize your reverse proxy behavior"
+	/>
 </svelte:head>
 
 <div class="flex flex-col gap-2">
 	<div class="flex items-center justify-between">
 		<div>
 			<h1 class="flex items-center gap-3 text-3xl font-bold tracking-tight">
-				<div class="bg-primary/10 rounded-lg p-2">
-					<Layers class="text-primary h-6 w-6" />
+				<div class="rounded-lg bg-primary/10 p-2">
+					<Layers class="h-6 w-6 text-primary" />
 				</div>
 				Middlewares
 			</h1>
-			<p class="text-muted-foreground mt-1">Configure your middlewares</p>
+			<p class="mt-1 text-muted-foreground">Configure your middlewares</p>
 		</div>
 	</div>
 
diff --git a/web/src/routes/middlewares/plugins/+page.svelte b/web/src/routes/middlewares/plugins/+page.svelte
index ce0523b..1e38471 100644
--- a/web/src/routes/middlewares/plugins/+page.svelte
+++ b/web/src/routes/middlewares/plugins/+page.svelte
@@ -102,7 +102,10 @@
 
 <svelte:head>
 	<title>Plugins - Mantrae</title>
-	<meta name="description" content="Browse and manage Traefik plugins for extended reverse proxy functionality" />
+	<meta
+		name="description"
+		content="Browse and manage Traefik plugins for extended reverse proxy functionality"
+	/>
 </svelte:head>
 
 <div class="mt-4 flex flex-col gap-4 p-4">
@@ -208,7 +211,7 @@
 					rows={cliSnippet?.split('\n').length || 2}
 					readonly
 				/>
-				<CopyButton text={cliSnippet} class="bg-background absolute top-1 right-1" />
+				<CopyButton text={cliSnippet} class="absolute top-1 right-1 bg-background" />
 			</Tabs.Content>
 		</Tabs.Root>
 	</Dialog.Content>
diff --git a/web/src/routes/router/+page.svelte b/web/src/routes/router/+page.svelte
index d204126..b337f57 100644
--- a/web/src/routes/router/+page.svelte
+++ b/web/src/routes/router/+page.svelte
@@ -325,19 +325,22 @@
 
 <svelte:head>
 	<title>Routers - Mantrae</title>
-	<meta name="description" content="Manage your HTTP, TCP, and UDP routers for your reverse proxy configurations" />
+	<meta
+		name="description"
+		content="Manage your HTTP, TCP, and UDP routers for your reverse proxy configurations"
+	/>
 </svelte:head>
 
 <div class="flex flex-col gap-4 sm:gap-6">
 	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
 		<div class="space-y-2">
 			<h1 class="flex items-center gap-3 text-2xl font-bold tracking-tight sm:text-3xl">
-				<div class="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
-					<Route class="text-primary h-5 w-5 sm:h-6 sm:w-6" />
+				<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+					<Route class="h-5 w-5 text-primary sm:h-6 sm:w-6" />
 				</div>
 				<span class="truncate">Routers</span>
 			</h1>
-			<p class="text-muted-foreground text-sm sm:text-base">Manage your routers and services</p>
+			<p class="text-sm text-muted-foreground sm:text-base">Manage your routers and services</p>
 		</div>
 	</div>
 
diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index 78bb813..a50bbef 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/web/src/routes/settings/+page.svelte
@@ -157,7 +157,10 @@
 
 <svelte:head>
 	<title>Settings - Mantrae</title>
-	<meta name="description" content="Configure your Mantrae system settings, backup management, and authentication options" />
+	<meta
+		name="description"
+		content="Configure your Mantrae system settings, backup management, and authentication options"
+	/>
 </svelte:head>
 
 <BackupModal bind:open={showBackupList} />
@@ -235,7 +238,7 @@
 					{#if shouldShowGroup(groupKey)}
 						<div class="mt-4 first:mt-0">
 							<h2 class="mb-0.5 text-xl font-semibold" id={groupKey}>{group.title}</h2>
-							<p class="text-muted-foreground mb-2 text-sm">{group.description}</p>
+							<p class="mb-2 text-sm text-muted-foreground">{group.description}</p>
 							<Separator class="mb-4" />
 
 							<!-- Loop through settings in this group -->
@@ -244,10 +247,10 @@
 									<div
 										class="mb-4 flex flex-col justify-start gap-4 sm:flex-row sm:justify-between"
 									>
-										<div class="border-muted-foreground border-l-2 pl-4">
+										<div class="border-l-2 border-muted-foreground pl-4">
 											<Label class="flex flex-col items-start gap-1">
 												<span class="text-sm font-medium">{setting.label}</span>
-												<p class="text-muted-foreground text-xs">{setting.description}</p>
+												<p class="text-xs text-muted-foreground">{setting.description}</p>
 											</Label>
 										</div>
 
diff --git a/web/src/routes/transport/+page.svelte b/web/src/routes/transport/+page.svelte
index 651c0fa..06e6fc8 100644
--- a/web/src/routes/transport/+page.svelte
+++ b/web/src/routes/transport/+page.svelte
@@ -187,7 +187,10 @@
 
 <svelte:head>
 	<title>Server Transports - Mantrae</title>
-	<meta name="description" content="Configure HTTP and TCP server transports for your reverse proxy services" />
+	<meta
+		name="description"
+		content="Configure HTTP and TCP server transports for your reverse proxy services"
+	/>
 </svelte:head>
 
 <div class="flex flex-col gap-2">
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index e6b071a..291e548 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -123,7 +123,10 @@
 
 <svelte:head>
 	<title>User Management - Mantrae</title>
-	<meta name="description" content="Manage your Mantrae users and access permissions for your reverse proxy system" />
+	<meta
+		name="description"
+		content="Manage your Mantrae users and access permissions for your reverse proxy system"
+	/>
 </svelte:head>
 
 <div class="flex flex-col gap-2">
diff --git a/web/src/routes/welcome/+page.svelte b/web/src/routes/welcome/+page.svelte
index b6bb5e8..a99e3b4 100644
--- a/web/src/routes/welcome/+page.svelte
+++ b/web/src/routes/welcome/+page.svelte
@@ -1,8 +1,3 @@
-<svelte:head>
-	<title>Welcome - Mantrae</title>
-	<meta name="description" content="Configure your Mantrae server connection to get started with reverse proxy management" />
-</svelte:head>
-
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
@@ -103,6 +98,14 @@
 	});
 </script>
 
+<svelte:head>
+	<title>Welcome - Mantrae</title>
+	<meta
+		name="description"
+		content="Configure your Mantrae server connection to get started with reverse proxy management"
+	/>
+</svelte:head>
+
 <Card.Root class="max-w-md sm:min-w-[350px]">
 	<Card.Header class="flex flex-col items-center gap-3 text-center">
 		<div class="flex items-center gap-2">
@@ -138,7 +141,7 @@
 				/>
 			</div>
 			{#if !isHealthy && reconnectTimer}
-				<small class="text-muted-foreground animate-pulse">Attempting to reconnect...</small>
+				<small class="animate-pulse text-muted-foreground">Attempting to reconnect...</small>
 			{/if}
 		</div>