diff --git a/apps/web/src/lib/components/RightEditorSidebar.svelte b/apps/web/src/lib/components/RightEditorSidebar.svelte
index e79ca80f..57fedf82 100644
--- a/apps/web/src/lib/components/RightEditorSidebar.svelte
+++ b/apps/web/src/lib/components/RightEditorSidebar.svelte
@@ -14,7 +14,7 @@
 
 <!-- Static sidebar for desktop -->
 <div
-	class="bg-primary-900/50 hidden h-full overflow-y-clip rounded-2xl border p-6 lg:z-50 lg:grid lg:w-72"
+	class="hidden h-full overflow-y-clip rounded-2xl border bg-primary-900/50 p-6 lg:z-50 lg:grid lg:w-72"
 >
 	<div class="mb-4 grid">
 		<h1 contenteditable on:input={(e) => (title = e.target.innerText)}>
diff --git a/apps/web/src/lib/components/ui/select/index.ts b/apps/web/src/lib/components/ui/select/index.ts
index 327541c5..6b2ec200 100644
--- a/apps/web/src/lib/components/ui/select/index.ts
+++ b/apps/web/src/lib/components/ui/select/index.ts
@@ -1,10 +1,10 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import { Select as SelectPrimitive } from 'bits-ui';
 
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
 
 const Root = SelectPrimitive.Root;
 const Group = SelectPrimitive.Group;
@@ -30,5 +30,5 @@ export {
 	Value as SelectValue,
 	Content as SelectContent,
 	Trigger as SelectTrigger,
-	Separator as SelectSeparator,
+	Separator as SelectSeparator
 };
diff --git a/apps/web/src/lib/components/ui/select/select-content.svelte b/apps/web/src/lib/components/ui/select/select-content.svelte
index 93d758e1..ff135c33 100644
--- a/apps/web/src/lib/components/ui/select/select-content.svelte
+++ b/apps/web/src/lib/components/ui/select/select-content.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { scale } from "svelte/transition";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { scale } from 'svelte/transition';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = SelectPrimitive.ContentProps;
 	type $$Events = SelectPrimitive.ContentEvents;
 
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let inTransition: $$Props["inTransition"] = flyAndScale;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = scale;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let inTransition: $$Props['inTransition'] = flyAndScale;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
+	export let outTransition: $$Props['outTransition'] = scale;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] = {
 		start: 0.95,
 		opacity: 0,
-		duration: 50,
+		duration: 50
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -27,7 +27,7 @@
 	{outTransitionConfig}
 	{sideOffset}
 	class={cn(
-		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/select/select-item.svelte b/apps/web/src/lib/components/ui/select/select-item.svelte
index 2cd00a78..42c9f8e8 100644
--- a/apps/web/src/lib/components/ui/select/select-item.svelte
+++ b/apps/web/src/lib/components/ui/select/select-item.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import Check from "lucide-svelte/icons/check";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import Check from 'lucide-svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = SelectPrimitive.ItemProps;
 	type $$Events = SelectPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export let label: $$Props["label"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export let label: $$Props['label'] = undefined;
+	export let disabled: $$Props['disabled'] = undefined;
 	export { className as class };
 </script>
 
@@ -18,7 +18,7 @@
 	{disabled}
 	{label}
 	class={cn(
-		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/select/select-label.svelte b/apps/web/src/lib/components/ui/select/select-label.svelte
index d9664502..424bc646 100644
--- a/apps/web/src/lib/components/ui/select/select-label.svelte
+++ b/apps/web/src/lib/components/ui/select/select-label.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = SelectPrimitive.LabelProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <SelectPrimitive.Label
-	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/select/select-separator.svelte b/apps/web/src/lib/components/ui/select/select-separator.svelte
index bc518e6e..64d1886f 100644
--- a/apps/web/src/lib/components/ui/select/select-separator.svelte
+++ b/apps/web/src/lib/components/ui/select/select-separator.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = SelectPrimitive.SeparatorProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
+<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
diff --git a/apps/web/src/lib/components/ui/select/select-trigger.svelte b/apps/web/src/lib/components/ui/select/select-trigger.svelte
index ed0bc7e7..a5ead7d5 100644
--- a/apps/web/src/lib/components/ui/select/select-trigger.svelte
+++ b/apps/web/src/lib/components/ui/select/select-trigger.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
-	import { cn } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = SelectPrimitive.TriggerProps;
 	type $$Events = SelectPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <SelectPrimitive.Trigger
 	class={cn(
-		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/side-nav/side-nav.svelte b/apps/web/src/lib/components/ui/side-nav/side-nav.svelte
index fdcaa928..c1f370f8 100644
--- a/apps/web/src/lib/components/ui/side-nav/side-nav.svelte
+++ b/apps/web/src/lib/components/ui/side-nav/side-nav.svelte
@@ -41,7 +41,7 @@
 <div class="flex h-full py-4 pl-4 lg:z-50 lg:w-72 lg:flex-col{$$props.class}">
 	<!-- Sidebar component, swap this element with another sidebar if you like -->
 	<div
-		class="bg-primary-950/30 flex grow flex-col gap-y-5 overflow-hidden rounded-2xl border px-6 pb-6 text-white"
+		class="flex grow flex-col gap-y-5 overflow-hidden rounded-2xl border bg-primary-950/30 px-6 pb-6 text-white"
 	>
 		<div class="flex h-16 shrink-0 items-center px-2 pt-6">
 			<a href="/app/auto-build" class="mr-4 flex place-items-center space-x-2">
@@ -67,13 +67,13 @@
 											href
 										)
 											? 'bg-accent/90 text-accent-foreground hover:bg-accent '
-											: 'text-foreground hover:bg-primary/5 hover:text-accent opacity-100'}"
+											: 'text-foreground opacity-100 hover:bg-primary/5 hover:text-accent'}"
 									>
 										<svelte:component this={icon} />
 										{name}
 										{#if pendingCount}
 											<span
-												class="bg-accent text-accent-foreground ml-auto rounded-full px-2 py-1 text-xs font-semibold"
+												class="ml-auto rounded-full bg-accent px-2 py-1 text-xs font-semibold text-accent-foreground"
 											>
 												{pendingCount}
 											</span>
@@ -109,7 +109,7 @@
 										href
 									)
 										? 'bg-accent/90 text-foreground hover:bg-accent '
-										: 'text-foreground hover:bg-primary/5 hover:text-accent opacity-100'}"
+										: 'text-foreground opacity-100 hover:bg-primary/5 hover:text-accent'}"
 								>
 									<svelte:component this={icon} />
 									{name}
diff --git a/apps/web/src/routes/app/account/+page.svelte b/apps/web/src/routes/app/account/+page.svelte
index 069b0149..0c33a93b 100644
--- a/apps/web/src/routes/app/account/+page.svelte
+++ b/apps/web/src/routes/app/account/+page.svelte
@@ -94,7 +94,7 @@
 			<Button
 				variant="outline"
 				aria-label="add input"
-				class="border-border rounded-full border"
+				class="rounded-full border border-border"
 				on:click={addInput}
 			>
 				<Plus />
diff --git a/apps/web/src/routes/app/account/subscription/+page.svelte b/apps/web/src/routes/app/account/subscription/+page.svelte
index 62aaf3d4..38fb20b5 100644
--- a/apps/web/src/routes/app/account/subscription/+page.svelte
+++ b/apps/web/src/routes/app/account/subscription/+page.svelte
@@ -19,7 +19,7 @@
 		<Card.Content class="p-6">
 			{#if $subscriptionStore.sub}
 				<div class="space-y-8">
-					<div class="from-background-950 bg-background to-primary-800 rounded-lg">
+					<div class="from-background-950 rounded-lg bg-background to-primary-800">
 						<div class="rounded-lg p-6 pt-2">
 							<div class="mb-4 flex items-center justify-between">
 								<div>
diff --git a/apps/web/src/routes/app/agents/editor/+page.svelte b/apps/web/src/routes/app/agents/editor/+page.svelte
index a44f265f..3917a8b2 100644
--- a/apps/web/src/routes/app/agents/editor/+page.svelte
+++ b/apps/web/src/routes/app/agents/editor/+page.svelte
@@ -22,7 +22,7 @@
 	};
 </script>
 
-<div class="bg-background min-h-screen p-8">
+<div class="min-h-screen bg-background p-8">
 	<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 		<CreateAgent
 			on:close={() => (open = false)}
@@ -34,7 +34,7 @@
 		/>
 		{#each myAgents as agent}
 			<div
-				class="bg-surface group relative flex flex-col overflow-hidden rounded-lg shadow-md transition-all duration-300 hover:scale-105 hover:shadow-xl"
+				class="group relative flex flex-col overflow-hidden rounded-lg bg-surface shadow-md transition-all duration-300 hover:scale-105 hover:shadow-xl"
 			>
 				<div class="flex-shrink-0">
 					<img
@@ -50,7 +50,7 @@
 					<p class="text-on-surface/80 mt-2 flex-grow text-sm">{agent.role}</p>
 				</div>
 				<Button
-					class="text-md bg-primary text-background hover:bg-primary/90 mt-4 w-full rounded-none p-2 font-semibold transition-colors duration-300"
+					class="text-md mt-4 w-full rounded-none bg-primary p-2 font-semibold text-background transition-colors duration-300 hover:bg-primary/90"
 					on:click={() => {
 						editAgent(agent);
 					}}>Edit Agent</Button
diff --git a/apps/web/src/routes/app/crews/+page.svelte b/apps/web/src/routes/app/crews/+page.svelte
index 3856bfc2..65739122 100644
--- a/apps/web/src/routes/app/crews/+page.svelte
+++ b/apps/web/src/routes/app/crews/+page.svelte
@@ -29,7 +29,7 @@
 
 <div class="grid grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))] gap-4 p-8">
 	{#each data.crews as crew (crew.id)}
-		<div class="bg-card rounded-lg">
+		<div class="rounded-lg bg-card">
 			<img src={crew.avatar} alt={`Avatar of ${crew.title}`} class="h-32 w-full object-cover" />
 			<div class="p-4">
 				<h3 title={crew.title} class="mb-2 line-clamp-1 text-ellipsis text-lg font-semibold">