diff --git a/eslint.config.js b/eslint.config.js
index f4ede0fd..77a9be82 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -9,7 +9,7 @@ export default [
 	{ ignores: ['.vercel/', '.svelte-kit/', 'postcss.config.cjs', 'src/lib/components/ui/'] },
 	js.configs.recommended,
 	...ts.configs.recommended,
-	...svelte.configs['flat/recommended'],
+	...svelte.configs['flat/all'],
 	prettier,
 	...svelte.configs['flat/prettier'],
 	{ languageOptions: { globals: { ...globals.browser, ...globals.node } } },
@@ -31,7 +31,15 @@ export default [
 					ignoreRestSiblings: true
 				}
 			],
-			'@svelte/no-at-html-tags': 'off'
+			'svelte/no-at-html-tags': 'off',
+			'svelte/block-lang': ['error', { script: ['ts'], style: ['postcss'] }],
+			'svelte/experimental-require-strict-events': 'off',
+			'svelte/no-unused-class-name': 'off',
+			'svelte/no-goto-without-base': 'off',
+			'svelte/require-each-key': 'off',
+			'svelte/no-inline-styles': ['error', { allowTransitions: true }],
+			'svelte/prefer-destructured-store-props': 'off',
+			'svelte/experimental-require-slot-types': 'off'
 		}
 	}
 ];
diff --git a/src/lib/components/InfoPopover.svelte b/src/lib/components/InfoPopover.svelte
index c228df2e..6c3a3a30 100644
--- a/src/lib/components/InfoPopover.svelte
+++ b/src/lib/components/InfoPopover.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <Popover.Root>
-	<Popover.Trigger aria-label={ariaLabel} class={triggerClasses}>
+	<Popover.Trigger class={triggerClasses} aria-label={ariaLabel}>
 		<InfoIcon class="h-4 w-4 text-muted-foreground" />
 	</Popover.Trigger>
 	<Popover.Content class="w-56 text-sm text-muted-foreground" {align}>
diff --git a/src/lib/components/ModeToggle.svelte b/src/lib/components/ModeToggle.svelte
index fdf5f0b0..88476281 100644
--- a/src/lib/components/ModeToggle.svelte
+++ b/src/lib/components/ModeToggle.svelte
@@ -27,7 +27,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger asChild let:builder>
-		<Button builders={[builder]} {variant} {size}>
+		<Button builders={[builder]} {size} {variant}>
 			<Sun
 				class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 			/>
diff --git a/src/lib/components/ResponsiveDialog.svelte b/src/lib/components/ResponsiveDialog.svelte
index 8ca31271..60dcdc04 100644
--- a/src/lib/components/ResponsiveDialog.svelte
+++ b/src/lib/components/ResponsiveDialog.svelte
@@ -38,7 +38,7 @@
 	<Dialog.Root bind:open>
 		{#if needTrigger}
 			<Dialog.Trigger asChild let:builder>
-				<Button {variant} {size} aria-label={ariaLabel} builders={[builder]}>
+				<Button aria-label={ariaLabel} builders={[builder]} {size} {variant}>
 					<slot name="buttonContent" />
 				</Button>
 			</Dialog.Trigger>
@@ -56,10 +56,10 @@
 		</Dialog.Content>
 	</Dialog.Root>
 {:else}
-	<Drawer.Root bind:open {dismissible}>
+	<Drawer.Root {dismissible} bind:open>
 		{#if needTrigger}
 			<Drawer.Trigger asChild let:builder>
-				<Button {variant} {size} aria-label={ariaLabel} builders={[builder]}>
+				<Button aria-label={ariaLabel} builders={[builder]} {size} {variant}>
 					<slot name="buttonContent" />
 				</Button>
 			</Drawer.Trigger>
@@ -78,7 +78,7 @@
 			</div>
 			<Drawer.Footer class="my-0 shrink pt-2">
 				<Drawer.Close asChild let:builder>
-					<Button variant={cancelVariant} builders={[builder]}>Cancel</Button>
+					<Button builders={[builder]} variant={cancelVariant}>Cancel</Button>
 				</Drawer.Close>
 			</Drawer.Footer>
 		</Drawer.Content>
diff --git a/src/lib/components/mesocycleAndExerciseSplit/AddEditExerciseDrawer.svelte b/src/lib/components/mesocycleAndExerciseSplit/AddEditExerciseDrawer.svelte
index 5c9243f4..cf1b46ed 100644
--- a/src/lib/components/mesocycleAndExerciseSplit/AddEditExerciseDrawer.svelte
+++ b/src/lib/components/mesocycleAndExerciseSplit/AddEditExerciseDrawer.svelte
@@ -125,28 +125,28 @@
 >
 	<Sheet.Trigger asChild let:builder>
 		<Button
-			size="icon"
-			variant="outline"
-			builders={[builder]}
 			aria-label="add-exercise"
+			builders={[builder]}
 			onclick={resetDrawerState}
+			size="icon"
+			variant="outline"
 		>
 			<AddIcon />
 		</Button>
 	</Sheet.Trigger>
-	<Sheet.Content side="right" class="w-11/12 overflow-y-auto px-4">
+	<Sheet.Content class="w-11/12 overflow-y-auto px-4" side="right">
 		<Sheet.Header>
 			<Sheet.Title>{mode} exercise</Sheet.Title>
 		</Sheet.Header>
-		<form onsubmit={submitForm} class="mt-8 grid h-fit grid-cols-2 gap-x-2 gap-y-4">
+		<form class="mt-8 grid h-fit grid-cols-2 gap-x-2 gap-y-4" onsubmit={submitForm}>
 			<div class="col-span-2 flex w-full flex-col gap-1.5">
 				<span class="text-sm font-medium">Exercise name</span>
 				<Command.Root class="bg-background">
 					<Command.Input
-						bind:value={currentExercise.name}
-						placeholder="Type here or search..."
 						onFocus={() => (searching = true)}
+						placeholder="Type here or search..."
 						required
+						bind:value={currentExercise.name}
 					/>
 					{#if searching}
 						<Command.List class="max-h-32 bg-muted">
@@ -172,15 +172,15 @@
 			>
 				<Select.Root
 					name="exercise-target-muscle-group"
-					selected={{
-						value: currentExercise.targetMuscleGroup,
-						label: convertCamelCaseToNormal(currentExercise.targetMuscleGroup)
-					}}
 					onSelectedChange={(v) => {
 						currentExercise.targetMuscleGroup = v?.value;
 						if (v?.value !== 'Custom') currentExercise.customMuscleGroup = null;
 					}}
 					required
+					selected={{
+						value: currentExercise.targetMuscleGroup,
+						label: convertCamelCaseToNormal(currentExercise.targetMuscleGroup)
+					}}
 				>
 					<Select.Label class="p-0 text-sm font-medium leading-none">
 						Target muscle group
@@ -190,7 +190,7 @@
 					</Select.Trigger>
 					<Select.Content class="h-48 overflow-y-auto">
 						{#each Object.values(MuscleGroup) as muscleGroup}
-							<Select.Item value={muscleGroup} label={convertCamelCaseToNormal(muscleGroup)} />
+							<Select.Item label={convertCamelCaseToNormal(muscleGroup)} value={muscleGroup} />
 						{/each}
 					</Select.Content>
 				</Select.Root>
@@ -201,8 +201,8 @@
 					<Input
 						id="exercise-custom-muscle-group"
 						placeholder="Type here"
-						bind:value={currentExercise.customMuscleGroup}
 						required
+						bind:value={currentExercise.customMuscleGroup}
 					/>
 				</div>
 			{/if}
@@ -212,15 +212,15 @@
 					<Input
 						id="exercise-sets"
 						min={0}
-						type="number"
 						placeholder="Type here"
-						bind:value={currentExercise.sets}
 						required
+						type="number"
+						bind:value={currentExercise.sets}
 					/>
 				</div>
 				<div class="flex flex-col gap-1.5">
 					<span class="text-sm font-medium leading-none">Progression</span>
-					<Button variant="secondary" class="gap-2" onclick={() => (overridesSheetOpen = true)}>
+					<Button class="gap-2" onclick={() => (overridesSheetOpen = true)} variant="secondary">
 						<span class="pointer-events-none">Overrides</span>
 						<ChevronRight class="pointer-events-none" />
 					</Button>
@@ -237,19 +237,19 @@
 						<Input
 							id="exercise-bodyweight-fraction"
 							min={0.01}
+							placeholder="Fraction"
+							required
 							step={0.01}
 							type="number"
-							placeholder="Fraction"
 							bind:value={currentExercise.bodyweightFraction}
-							required
 						/>
 					{/if}
 					<div class="flex grow items-center rounded-md border px-2 py-1.5">
 						<Switch
-							includeInput
 							id="exercise-involves-bodyweight"
 							name="exercise-involves-bodyweight"
 							checked={currentExercise.bodyweightFraction !== null}
+							includeInput
 							onCheckedChange={(c) => {
 								currentExercise.bodyweightFraction = c ? undefined : null;
 							}}
@@ -260,12 +260,12 @@
 			<div class="flex w-full flex-col gap-1.5">
 				<Select.Root
 					name="exercise-set-type"
+					onSelectedChange={(v) => (currentExercise.setType = v?.value ?? 'Straight')}
+					required
 					selected={{
 						value: currentExercise.setType,
 						label: convertCamelCaseToNormal(currentExercise.setType)
 					}}
-					onSelectedChange={(v) => (currentExercise.setType = v?.value ?? 'Straight')}
-					required
 				>
 					<Select.Label class="p-0 text-sm font-medium leading-none">Set type</Select.Label>
 					<Select.Trigger>
@@ -273,7 +273,7 @@
 					</Select.Trigger>
 					<Select.Content>
 						{#each Object.values(SetType) as setTemplate}
-							<Select.Item value={setTemplate} label={convertCamelCaseToNormal(setTemplate)} />
+							<Select.Item label={convertCamelCaseToNormal(setTemplate)} value={setTemplate} />
 						{/each}
 					</Select.Content>
 				</Select.Root>
@@ -282,12 +282,6 @@
 				<div class="flex w-full flex-col gap-1.5">
 					<Select.Root
 						name="exercise-set-change-type"
-						selected={{
-							value: currentExercise.changeType ?? 'Percentage',
-							label: currentExercise.changeType
-								? convertCamelCaseToNormal(currentExercise.changeType)
-								: 'Percentage'
-						}}
 						onSelectedChange={(v) => {
 							if (
 								currentExercise.setType === 'Drop' ||
@@ -297,6 +291,12 @@
 								currentExercise.changeType = v?.value ?? 'Percentage';
 						}}
 						required
+						selected={{
+							value: currentExercise.changeType ?? 'Percentage',
+							label: currentExercise.changeType
+								? convertCamelCaseToNormal(currentExercise.changeType)
+								: 'Percentage'
+						}}
 					>
 						<Select.Label class="p-0 text-sm font-medium leading-none">
 							Load change type
@@ -306,7 +306,7 @@
 						</Select.Trigger>
 						<Select.Content>
 							{#each Object.values(ChangeType) as changeType}
-								<Select.Item value={changeType} label={convertCamelCaseToNormal(changeType)} />
+								<Select.Item label={convertCamelCaseToNormal(changeType)} value={changeType} />
 							{/each}
 						</Select.Content>
 					</Select.Root>
@@ -316,9 +316,9 @@
 					<Input
 						id="exercise-set-decrement"
 						placeholder="Type here"
+						required
 						type="number"
 						bind:value={currentExercise.changeAmount}
-						required
 					/>
 				</div>
 			{/if}
@@ -327,10 +327,10 @@
 				<Input
 					id="exercise-rep-range-start"
 					min={1}
-					type="number"
 					placeholder="Type here"
-					bind:value={currentExercise.repRangeStart}
 					required
+					type="number"
+					bind:value={currentExercise.repRangeStart}
 				/>
 			</div>
 			<div class="flex w-full flex-col gap-1.5">
@@ -338,22 +338,22 @@
 				<Input
 					id="exercise-rep-range-end"
 					min={(currentExercise.repRangeStart ?? 0) + 1}
-					type="number"
 					placeholder="Type here"
-					bind:value={currentExercise.repRangeEnd}
 					required
+					type="number"
+					bind:value={currentExercise.repRangeEnd}
 				/>
 			</div>
 			<div class="col-span-2 flex w-full flex-col gap-1.5">
 				<Label for="exercise-note">Note</Label>
 				<Textarea
 					id="exercise-note"
-					placeholder="Exercise cues, machine heights, etc."
 					class="resize-none"
+					placeholder="Exercise cues, machine heights, etc."
 					bind:value={currentExercise.note}
 				/>
 			</div>
-			<Button type="submit" class="col-span-2">{mode} exercise</Button>
+			<Button class="col-span-2" type="submit">{mode} exercise</Button>
 		</form>
 	</Sheet.Content>
 </Sheet.Root>
@@ -368,7 +368,7 @@
 					them here for each exercise
 				</Sheet.Description>
 			</Sheet.Header>
-			<form onsubmit={submitOverrides} class="mt-8 grid h-fit gap-x-2 gap-y-4">
+			<form class="mt-8 grid h-fit gap-x-2 gap-y-4" onsubmit={submitOverrides}>
 				<div class="flex flex-col gap-1">
 					<div class="flex items-center justify-between">
 						<Label for="exercise-minimum-weight-change-value">Minimum weight change</Label>
@@ -383,10 +383,10 @@
 					</div>
 					<Input
 						id="exercise-minimum-weight-change-value"
-						type="number"
-						placeholder="5"
 						disabled={currentExercise.minimumWeightChange === null}
+						placeholder="5"
 						required
+						type="number"
 						bind:value={currentExercise.minimumWeightChange}
 					/>
 				</div>
@@ -404,10 +404,10 @@
 					</div>
 					<Input
 						id="exercise-override-overload-percentage-value"
-						type="number"
-						placeholder={props.mesocycle?.startOverloadPercentage.toString()}
 						disabled={currentExercise.overloadPercentage === null}
+						placeholder={props.mesocycle?.startOverloadPercentage.toString()}
 						required
+						type="number"
 						bind:value={currentExercise.overloadPercentage}
 					/>
 				</div>
@@ -425,15 +425,15 @@
 					</div>
 					<Select.Root
 						disabled={currentExercise.preferredProgressionVariable === null}
+						onSelectedChange={(s) => {
+							if (s !== undefined && 'sets' in currentExercise)
+								currentExercise.preferredProgressionVariable = s.value;
+						}}
 						required
 						selected={{
 							value: props.mesocycle?.preferredProgressionVariable,
 							label: props.mesocycle?.preferredProgressionVariable
 						}}
-						onSelectedChange={(s) => {
-							if (s !== undefined && 'sets' in currentExercise)
-								currentExercise.preferredProgressionVariable = s.value;
-						}}
 					>
 						<Select.Trigger class="w-full">
 							<Select.Value />
@@ -497,7 +497,7 @@
 						</div>
 					{/key}
 				</div>
-				<Button variant="secondary" class="gap-2" type="submit">
+				<Button class="gap-2" type="submit" variant="secondary">
 					<ChevronLeft />
 					Basics
 				</Button>
diff --git a/src/lib/components/mesocycleAndExerciseSplit/DndComponent.svelte b/src/lib/components/mesocycleAndExerciseSplit/DndComponent.svelte
index f85ba020..f23bc4ef 100644
--- a/src/lib/components/mesocycleAndExerciseSplit/DndComponent.svelte
+++ b/src/lib/components/mesocycleAndExerciseSplit/DndComponent.svelte
@@ -33,41 +33,41 @@
 </script>
 
 <div
+	class="flex h-px grow flex-col gap-1 overflow-y-auto"
+	onconsider={handleSort}
+	onfinalize={handleSort}
 	use:dragHandleZone={{
 		items: itemList,
 		flipDurationMs: 200,
 		dropTargetClasses: ['border-none'],
 		dropTargetStyle: {}
 	}}
-	onconsider={handleSort}
-	onfinalize={handleSort}
-	class="flex h-px grow flex-col gap-1 overflow-y-auto"
 >
 	{#each itemList as exerciseTemplate, idx (exerciseTemplate.name)}
 		<div class="relative" animate:flip={{ duration: 200 }}>
 			{#if 'sets' in exerciseTemplate && contextProps.context === 'mesocycle'}
 				<ExerciseTemplateCard
 					context="mesocycle"
+					deleteExercise={contextProps.deleteExercise}
+					{exerciseTemplate}
 					{idx}
+					readOnly={false}
 					{reordering}
-					{exerciseTemplate}
-					deleteExercise={contextProps.deleteExercise}
 					setEditingExercise={contextProps.setEditingExercise}
-					readOnly={false}
 				/>
 			{:else if contextProps.context === 'exerciseSplit'}
 				<ExerciseTemplateCard
 					context="exerciseSplit"
-					{idx}
+					deleteExercise={contextProps.deleteExercise}
 					{exerciseTemplate}
+					{idx}
+					readOnly={false}
 					{reordering}
-					deleteExercise={contextProps.deleteExercise}
 					setEditingExercise={contextProps.setEditingExercise}
-					readOnly={false}
 				/>
 			{/if}
 			{#if exerciseTemplate[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-				<div in:fade={{ duration: 200 }} class="custom-shadow-item"></div>
+				<div class="custom-shadow-item" in:fade={{ duration: 200 }}></div>
 			{/if}
 		</div>
 	{:else}
diff --git a/src/lib/components/mesocycleAndExerciseSplit/ExerciseTemplateCard.svelte b/src/lib/components/mesocycleAndExerciseSplit/ExerciseTemplateCard.svelte
index 846396a9..b5f4dac0 100644
--- a/src/lib/components/mesocycleAndExerciseSplit/ExerciseTemplateCard.svelte
+++ b/src/lib/components/mesocycleAndExerciseSplit/ExerciseTemplateCard.svelte
@@ -46,11 +46,11 @@
 		<span class="mr-auto truncate">{props.exerciseTemplate.name}</span>
 		{#if !props.readOnly}
 			{#if props.reordering}
-				<div use:dragHandle role="button" tabindex="0">
+				<div role="button" tabindex="0" use:dragHandle>
 					<GripVertical />
 				</div>
 			{:else}
-				<DropdownMenu.Root open={isContextMenuOpen} onOpenChange={(v) => (isContextMenuOpen = v)}>
+				<DropdownMenu.Root onOpenChange={(v) => (isContextMenuOpen = v)} open={isContextMenuOpen}>
 					<DropdownMenu.Trigger asChild let:builder>
 						<button use:builder.action {...builder} class="px-0.5 py-0">
 							<MenuIcon class="h-4 w-4" />
@@ -59,12 +59,12 @@
 					<DropdownMenu.Content align="end">
 						<DropdownMenu.Group>
 							<DropdownMenu.Item
+								class="gap-2"
 								onclick={() => {
 									if (props.context === 'exerciseSplit')
 										props.setEditingExercise(props.exerciseTemplate);
 									else props.setEditingExercise(props.exerciseTemplate);
 								}}
-								class="gap-2"
 							>
 								<EditIcon /> Edit
 							</DropdownMenu.Item>
diff --git a/src/lib/components/mesocycleAndExerciseSplit/SwapExercisesDialog.svelte b/src/lib/components/mesocycleAndExerciseSplit/SwapExercisesDialog.svelte
index babdaf53..5e597f14 100644
--- a/src/lib/components/mesocycleAndExerciseSplit/SwapExercisesDialog.svelte
+++ b/src/lib/components/mesocycleAndExerciseSplit/SwapExercisesDialog.svelte
@@ -28,15 +28,15 @@
 	}
 </script>
 
-<ResponsiveDialog title="Swap exercises" needTrigger={false} bind:open>
+<ResponsiveDialog needTrigger={false} title="Swap exercises" bind:open>
 	<p>
 		Swap <span class="font-semibold">
 			{splitDays[selectedSplitDayIndex].name}
 			<span class="text-muted-foreground">(Day {selectedSplitDayIndex + 1})</span>
 		</span> exercises with:
 	</p>
-	<form onsubmit={startSwap} class="flex w-full gap-2">
-		<Select.Root bind:selected={swapExercisesFrom} required>
+	<form class="flex w-full gap-2" onsubmit={startSwap}>
+		<Select.Root required bind:selected={swapExercisesFrom}>
 			<Select.Trigger class="grow">
 				<Select.Value placeholder="Select one" />
 			</Select.Trigger>
@@ -45,18 +45,18 @@
 					{@const isSelectedDay = idx === selectedSplitDayIndex}
 					{#if !splitDay.isRestDay}
 						<Select.Item
-							value={idx}
-							disabled={isSelectedDay}
 							class={cn({ 'text-primary': isSelectedDay })}
+							disabled={isSelectedDay}
+							value={idx}
 						>
 							{splitDay.name} (Day {idx + 1})
 						</Select.Item>
 					{:else if splitDay}
-						<Select.Item value={idx} disabled>Rest (Day {idx + 1})</Select.Item>
+						<Select.Item disabled value={idx}>Rest (Day {idx + 1})</Select.Item>
 					{/if}
 				{/each}
 			</Select.Content>
 		</Select.Root>
-		<Button type="submit" class="shrink-0">Swap exercises</Button>
+		<Button class="shrink-0" type="submit">Swap exercises</Button>
 	</form>
 </ResponsiveDialog>
diff --git a/src/routes/(components)/DesktopLayout.svelte b/src/routes/(components)/DesktopLayout.svelte
index 8deb4934..f5085b21 100644
--- a/src/routes/(components)/DesktopLayout.svelte
+++ b/src/routes/(components)/DesktopLayout.svelte
@@ -17,25 +17,25 @@
 </script>
 
 <header class="flex h-screen w-96 flex-col bg-muted p-10">
-	<Button variant="link" class="justify-start gap-2 text-foreground" href="/">
+	<Button class="justify-start gap-2 text-foreground" href="/" variant="link">
 		{#if $navigating}
 			<div class="flex h-[72px] w-[72px] items-center justify-center">
-				<LoaderCircle width={48} height={48} class="animate-spin text-primary" />
+				<LoaderCircle class="animate-spin text-primary" height={48} width={48} />
 			</div>
 		{:else}
-			<img src="/favicon.webp" alt="MyFit logo" width={72} height={72} />
+			<img alt="MyFit logo" height={72} src="/favicon.webp" width={72} />
 		{/if}
 		<h1 class="text-4xl font-bold">MyFit</h1>
 	</Button>
 	<NavLinks />
 	<div class="flex gap-1">
-		<ModeToggle variant="outline" size="lg" />
+		<ModeToggle size="lg" variant="outline" />
 		<PWAButtons isMobile={false} />
 	</div>
 	{#if $page.data.session}
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger asChild let:builder>
-				<Button builders={[builder]} variant="secondary" size="lg" class="mt-1 justify-around">
+				<Button class="mt-1 justify-around" builders={[builder]} size="lg" variant="secondary">
 					<UserAvatar session={$page.data.session} />
 					<span class="text-base font-semibold">{$page.data.session.user?.name}</span>
 				</Button>
@@ -46,10 +46,10 @@
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger asChild let:builder>
 				<Button
-					variant="outline"
+					class="mt-1 justify-around text-base"
 					builders={[builder]}
 					size="lg"
-					class="mt-1 justify-around text-base"
+					variant="outline"
 				>
 					Login
 				</Button>
diff --git a/src/routes/(components)/MobileLayout.svelte b/src/routes/(components)/MobileLayout.svelte
index cf2e93e6..2662f6c4 100644
--- a/src/routes/(components)/MobileLayout.svelte
+++ b/src/routes/(components)/MobileLayout.svelte
@@ -22,21 +22,21 @@
 
 <header class="flex shrink-0 items-center gap-2 border-b bg-muted p-1">
 	<Sheet.Root bind:open={sheetOpen}>
-		<Sheet.Trigger aria-label="Menu" class="px-2">
+		<Sheet.Trigger class="px-2" aria-label="Menu">
 			<MenuIcon />
 		</Sheet.Trigger>
 		<Sheet.Content side="left">
 			<Sheet.Header class="items-start">
 				<Sheet.Title>
 					<Button
-						variant="link"
 						class="justify-start gap-2 text-foreground"
 						onclick={async () => {
 							await goto('/');
 							sheetOpen = false;
 						}}
+						variant="link"
 					>
-						<img src="/favicon.webp" alt="MyFit logo" width={52} height={52} />
+						<img alt="MyFit logo" height={52} src="/favicon.webp" width={52} />
 						<h1 class="text-2xl font-bold">MyFit</h1>
 					</Button>
 				</Sheet.Title>
@@ -44,13 +44,13 @@
 			<NavLinks bind:sheetOpen />
 		</Sheet.Content>
 	</Sheet.Root>
-	<a href="/" class="mx-1 mr-auto">
+	<a class="mx-1 mr-auto" href="/">
 		{#if $navigating}
 			<div class="flex h-10 w-10 items-center justify-center">
-				<LoaderCircle width={24} height={24} class="animate-spin text-primary" />
+				<LoaderCircle class="animate-spin text-primary" height={24} width={24} />
 			</div>
 		{:else}
-			<img src="/favicon.webp" alt="MyFit logo" width={40} height={40} />
+			<img alt="MyFit logo" height={40} src="/favicon.webp" width={40} />
 		{/if}
 	</a>
 	<PWAButtons isMobile={true} />
@@ -67,7 +67,7 @@
 	{:else}
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger asChild let:builder>
-				<Button size="sm" variant="ghost" builders={[builder]}>Login</Button>
+				<Button builders={[builder]} size="sm" variant="ghost">Login</Button>
 			</DropdownMenu.Trigger>
 			<LoginProviderMenu />
 		</DropdownMenu.Root>
diff --git a/src/routes/(components)/NavLinks.svelte b/src/routes/(components)/NavLinks.svelte
index 47c885a4..dd8d932f 100644
--- a/src/routes/(components)/NavLinks.svelte
+++ b/src/routes/(components)/NavLinks.svelte
@@ -14,10 +14,10 @@
 	{#each linkItems as { text, href }}
 		<li>
 			<Button
-				variant="link"
 				class="text-foreground lg:text-base"
-				onclick={() => (sheetOpen = false)}
 				{href}
+				onclick={() => (sheetOpen = false)}
+				variant="link"
 			>
 				{text}
 			</Button>
diff --git a/src/routes/(components)/PWAButtons.svelte b/src/routes/(components)/PWAButtons.svelte
index 9a690529..8fc653e4 100644
--- a/src/routes/(components)/PWAButtons.svelte
+++ b/src/routes/(components)/PWAButtons.svelte
@@ -59,19 +59,19 @@
 
 {#if isMobile}
 	{#if $needRefresh}
-		<Button variant="ghost" size="icon" onclick={updateApplication}>
+		<Button onclick={updateApplication} size="icon" variant="ghost">
 			<UpdateIcon class={cn({ 'animate-spin': reloading })} />
 		</Button>
 	{:else if showInstallButton}
 		<Button
-			variant="ghost"
-			size="icon"
 			aria-label="Download"
 			onclick={() => {
 				// @ts-expect-error Not standard API yet, so need this ignore
 				deferredPrompt.prompt();
 				deferredPrompt = null;
 			}}
+			size="icon"
+			variant="ghost"
 		>
 			<DownloadIcon />
 		</Button>
@@ -80,26 +80,26 @@
 	<div class="grow">
 		{#if $needRefresh}
 			<Button
-				variant="outline"
 				class="w-full gap-2 text-base"
-				size="lg"
 				disabled={reloading}
 				onclick={updateApplication}
+				size="lg"
+				variant="outline"
 			>
 				<UpdateIcon class={cn({ 'animate-spin': reloading })} />
 				Reload
 			</Button>
 		{:else if showInstallButton}
 			<Button
-				variant="outline"
 				class="w-full gap-2 text-base"
-				size="lg"
 				aria-label="Download"
 				onclick={() => {
 					// @ts-expect-error Not standard API yet, so need this ignore
 					deferredPrompt.prompt();
 					deferredPrompt = null;
 				}}
+				size="lg"
+				variant="outline"
 			>
 				<DownloadIcon /> Download
 			</Button>
diff --git a/src/routes/(components)/UserAvatar.svelte b/src/routes/(components)/UserAvatar.svelte
index 6bf7c86f..f482eb3c 100644
--- a/src/routes/(components)/UserAvatar.svelte
+++ b/src/routes/(components)/UserAvatar.svelte
@@ -13,6 +13,6 @@
 </script>
 
 <Avatar.Root class="h-8 w-8">
-	<Avatar.Image src={session.user?.image} alt="Profile picture" referrerpolicy="no-referrer" />
+	<Avatar.Image alt="Profile picture" referrerpolicy="no-referrer" src={session.user?.image} />
 	<Avatar.Fallback>{getInitials(session.user?.name)}</Avatar.Fallback>
 </Avatar.Root>
diff --git a/src/routes/(components)/UserDropdown.svelte b/src/routes/(components)/UserDropdown.svelte
index f88f61e8..edb2685e 100644
--- a/src/routes/(components)/UserDropdown.svelte
+++ b/src/routes/(components)/UserDropdown.svelte
@@ -8,11 +8,11 @@
 
 <DropdownMenu.Content align="start">
 	<DropdownMenu.Group>
-		<DropdownMenu.Item href="/profile" class="gap-2">
+		<DropdownMenu.Item class="gap-2" href="/profile">
 			<UserIcon />
 			Profile
 		</DropdownMenu.Item>
-		<DropdownMenu.Item href="/settings" class="gap-2">
+		<DropdownMenu.Item class="gap-2" href="/settings">
 			<SettingsIcon />
 			Settings
 		</DropdownMenu.Item>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7f51e7df..a417cbb7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import H2 from '$lib/components/ui/typography/H2.svelte';
 </script>
 
diff --git a/src/routes/exercise-splits/+page.svelte b/src/routes/exercise-splits/+page.svelte
index 0c16a990..4f6216e1 100644
--- a/src/routes/exercise-splits/+page.svelte
+++ b/src/routes/exercise-splits/+page.svelte
@@ -61,18 +61,18 @@
 	<div class="flex gap-1">
 		<form class="contents" onsubmit={updateSearchParam}>
 			<Input
-				bind:value={searchString}
 				id="search-exercise-splits"
 				placeholder="Search"
 				type="search"
+				bind:value={searchString}
 			/>
-			<Button variant="secondary" aria-label="search" type="submit">
+			<Button aria-label="search" type="submit" variant="secondary">
 				<SearchIcon />
 			</Button>
 		</form>
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger asChild let:builder>
-				<Button builders={[builder]} aria-label="exercise-split-new-options"><AddIcon /></Button>
+				<Button aria-label="exercise-split-new-options" builders={[builder]}><AddIcon /></Button>
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content align="end">
 				<DropdownMenu.Group>
@@ -94,9 +94,9 @@
 			<InfiniteLoader triggerLoad={loadMore}>
 				{#each exerciseSplits as exerciseSplit}
 					<Button
-						variant="outline"
 						class="mb-1 flex h-12 items-center justify-between rounded-md border bg-card p-2"
 						href="/exercise-splits/{exerciseSplit.id}"
+						variant="outline"
 					>
 						<span class="truncate text-lg font-semibold">{exerciseSplit.name}</span>
 						<Badge>{exerciseSplit.exerciseSplitDays.length} days / cycle</Badge>
@@ -108,7 +108,7 @@
 					<LoaderCircle class="animate-spin" />
 				{/snippet}
 				{#snippet error(load)}
-					<Button variant="outline" onclick={load}>An error occurred. Retry?</Button>
+					<Button onclick={load} variant="outline">An error occurred. Retry?</Button>
 				{/snippet}
 				{#snippet noData()}
 					{#if exerciseSplits.length > 0}
diff --git a/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExerciseSplitSkeleton.svelte b/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExerciseSplitSkeleton.svelte
index 5f459c12..1c41d36f 100644
--- a/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExerciseSplitSkeleton.svelte
+++ b/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExerciseSplitSkeleton.svelte
@@ -4,7 +4,7 @@
 	import { Skeleton } from '$lib/components/ui/skeleton';
 </script>
 
-<Tabs.Root value="info" class="w-full">
+<Tabs.Root class="w-full" value="info">
 	<Tabs.List class="grid w-full grid-cols-2">
 		<Tabs.Trigger value="info">Info</Tabs.Trigger>
 		<Tabs.Trigger value="exercises">Exercises</Tabs.Trigger>
diff --git a/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExercisesTableComponent.svelte b/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExercisesTableComponent.svelte
index 6ae98df3..8c75bfa8 100644
--- a/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExercisesTableComponent.svelte
+++ b/src/routes/exercise-splits/[exerciseSplitId]/(components)/ExercisesTableComponent.svelte
@@ -13,13 +13,13 @@
 	let selectedSplitDay = $derived(exerciseSplitDays[parseInt(selectedDayIndex)]);
 </script>
 
-<Tabs.Root bind:value={selectedDayIndex} class="flex h-full flex-col">
+<Tabs.Root class="flex h-full flex-col" bind:value={selectedDayIndex}>
 	<Tabs.List class="w-full shrink-0 justify-start overflow-x-auto">
 		{#each exerciseSplitDays as splitDay, i}
 			<Tabs.Trigger
 				class="shrink-0 grow basis-20"
-				value={i.toString()}
 				disabled={splitDay.isRestDay}
+				value={i.toString()}
 			>
 				{splitDay.isRestDay ? 'Rest' : splitDay.name}
 			</Tabs.Trigger>
@@ -37,7 +37,7 @@
 			</div>
 			<div class="mt-2 flex h-full flex-col gap-1 overflow-y-auto">
 				{#each selectedSplitDay.exercises as exercise}
-					<ExerciseTemplateCard readOnly exerciseTemplate={exercise} context="exerciseSplit" />
+					<ExerciseTemplateCard context="exerciseSplit" exerciseTemplate={exercise} readOnly />
 				{/each}
 			</div>
 		</Card.Root>
diff --git a/src/routes/exercise-splits/[exerciseSplitId]/+page.svelte b/src/routes/exercise-splits/[exerciseSplitId]/+page.svelte
index 1191cef9..550dfe59 100644
--- a/src/routes/exercise-splits/[exerciseSplitId]/+page.svelte
+++ b/src/routes/exercise-splits/[exerciseSplitId]/+page.svelte
@@ -94,7 +94,7 @@
 {#if exerciseSplit === 'loading'}
 	<ExerciseSplitSkeleton />
 {:else}
-	<Tabs.Root bind:value={selectedTabValue} class="flex w-full grow flex-col">
+	<Tabs.Root class="flex w-full grow flex-col" bind:value={selectedTabValue}>
 		<Tabs.List class="grid w-full grid-cols-2">
 			<Tabs.Trigger value="info">Info</Tabs.Trigger>
 			<Tabs.Trigger value="exercises">Exercises</Tabs.Trigger>
@@ -143,7 +143,7 @@
 				</Card.Content>
 			</Card.Root>
 		</Tabs.Content>
-		<Tabs.Content value="exercises" class="grow">
+		<Tabs.Content class="grow" value="exercises">
 			{#if chartMode}
 				<Card.Root class="p-4">
 					<ExerciseSplitMuscleGroupsCharts
@@ -155,12 +155,12 @@
 			{/if}
 		</Tabs.Content>
 	</Tabs.Root>
-	<ResponsiveDialog title="Are you sure?" needTrigger={false} bind:open={deleteConfirmDrawerOpen}>
+	<ResponsiveDialog needTrigger={false} title="Are you sure?" bind:open={deleteConfirmDrawerOpen}>
 		<p>
 			Delete split <span class="font-semibold">{exerciseSplit.name}</span>? This action cannot be
 			undone.
 		</p>
-		<Button variant="destructive" onclick={deleteExerciseSplit} disabled={callingDeleteEndpoint}>
+		<Button disabled={callingDeleteEndpoint} onclick={deleteExerciseSplit} variant="destructive">
 			{#if callingDeleteEndpoint}
 				<LoaderCircle class="animate-spin" />
 			{:else}
@@ -170,7 +170,7 @@
 	</ResponsiveDialog>
 {/if}
 
-<ResponsiveDialog title="Note" needTrigger={false} bind:open={editExerciseSplitNoteDrawerOpen}>
+<ResponsiveDialog needTrigger={false} title="Note" bind:open={editExerciseSplitNoteDrawerOpen}>
 	<p class="text-sm">
 		Editing an exercise split won't change the mesocycle split it is used in. To modify that, use
 		the <b>Split</b> tab in <b>View mesocycle</b>
diff --git a/src/routes/exercise-splits/manage/+layout.svelte b/src/routes/exercise-splits/manage/+layout.svelte
index 6960c470..d755112e 100644
--- a/src/routes/exercise-splits/manage/+layout.svelte
+++ b/src/routes/exercise-splits/manage/+layout.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import H2 from '$lib/components/ui/typography/H2.svelte';
 	import { exerciseSplitRunes } from './exerciseSplitRunes.svelte';
 
diff --git a/src/routes/exercise-splits/manage/exercises/+page.svelte b/src/routes/exercise-splits/manage/exercises/+page.svelte
index 5e4bf64f..001598eb 100644
--- a/src/routes/exercise-splits/manage/exercises/+page.svelte
+++ b/src/routes/exercise-splits/manage/exercises/+page.svelte
@@ -43,22 +43,22 @@
 <H3>Exercises</H3>
 <Tabs.Root
 	class="flex w-full grow flex-col"
-	value={splitDayName}
 	onValueChange={(v) => {
 		exerciseSplitRunes.selectedSplitDayIndex = exerciseSplitRunes.splitDays.findIndex(
 			(splitDay) => splitDay.name === v
 		);
 	}}
+	value={splitDayName}
 >
 	<Tabs.List class="flex justify-start overflow-x-auto">
 		{#each exerciseSplitRunes.splitExercises as _, idx}
 			{@const { name, isRestDay } = exerciseSplitRunes.splitDays[idx]}
-			<Tabs.Trigger value={name} disabled={isRestDay} class="px-4">
+			<Tabs.Trigger class="px-4" disabled={isRestDay} value={name}>
 				{name !== '' ? name : 'Rest'}
 			</Tabs.Trigger>
 		{/each}
 	</Tabs.List>
-	<Tabs.Content value={splitDayName} class="grow">
+	<Tabs.Content class="grow" value={splitDayName}>
 		<div class="flex h-full flex-col gap-2">
 			<div class="flex items-center gap-2">
 				<div class="mr-auto flex flex-col">
@@ -68,13 +68,13 @@
 					</span>
 				</div>
 				<AddEditExerciseDrawer
-					context="exerciseSplit"
 					addExercise={exerciseSplitRunes.addExercise}
+					context="exerciseSplit"
 					editExercise={exerciseSplitRunes.editExercise}
-					setEditingExercise={exerciseSplitRunes.setEditingExercise}
 					editingExercise={exerciseSplitRunes.editingExercise}
+					setEditingExercise={exerciseSplitRunes.setEditingExercise}
 				/>
-				<Button size="icon" variant="outline" onclick={() => (reordering = !reordering)}>
+				<Button onclick={() => (reordering = !reordering)} size="icon" variant="outline">
 					{#if !reordering}
 						<ReorderIcon />
 					{:else}
@@ -84,10 +84,10 @@
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger asChild let:builder>
 						<Button
+							aria-label="exercise-split-functions"
 							builders={[builder]}
 							size="icon"
 							variant="outline"
-							aria-label="exercise-split-functions"
 						>
 							<MenuIcon />
 						</Button>
@@ -96,22 +96,22 @@
 						<DropdownMenu.Group>
 							<DropdownMenu.Item
 								class="gap-2"
-								onclick={exerciseSplitRunes.cutExercises}
 								disabled={selectedSplitDayExercises.length === 0}
+								onclick={exerciseSplitRunes.cutExercises}
 							>
 								<CutIcon /> Cut
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								class="gap-2"
-								onclick={exerciseSplitRunes.copyExercises}
 								disabled={selectedSplitDayExercises.length === 0}
+								onclick={exerciseSplitRunes.copyExercises}
 							>
 								<CopyIcon /> Copy
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								class="gap-2"
-								onclick={exerciseSplitRunes.pasteExercises}
 								disabled={exerciseSplitRunes.copiedExercises === undefined}
+								onclick={exerciseSplitRunes.pasteExercises}
 							>
 								<PasteIcon /> Paste
 							</DropdownMenu.Item>
@@ -126,11 +126,11 @@
 				<DndComponent
 					context="exerciseSplit"
 					deleteExercise={exerciseSplitRunes.deleteExercise}
+					{reordering}
 					setEditingExercise={exerciseSplitRunes.setEditingExercise}
 					bind:itemList={exerciseSplitRunes.splitExercises[
 						exerciseSplitRunes.selectedSplitDayIndex
 					]}
-					{reordering}
 				/>
 			</div>
 		</div>
@@ -138,13 +138,13 @@
 </Tabs.Root>
 
 <div class="mt-2 grid grid-cols-2 gap-1">
-	<Button variant="secondary" href="./structure">Previous</Button>
+	<Button href="./structure" variant="secondary">Previous</Button>
 	<Button onclick={submitExercises}>Next</Button>
 </div>
 
 <SwapExercisesDialog
-	splitDays={exerciseSplitRunes.splitDays}
 	selectedSplitDayIndex={exerciseSplitRunes.selectedSplitDayIndex}
+	splitDays={exerciseSplitRunes.splitDays}
 	swapExercises={exerciseSplitRunes.swapExercises}
 	bind:open={swapDialogOpen}
 />
diff --git a/src/routes/exercise-splits/manage/overview/+page.svelte b/src/routes/exercise-splits/manage/overview/+page.svelte
index 3ddb7a9a..1a32526f 100644
--- a/src/routes/exercise-splits/manage/overview/+page.svelte
+++ b/src/routes/exercise-splits/manage/overview/+page.svelte
@@ -67,7 +67,7 @@
 </script>
 
 <H3>Overview</H3>
-<Tabs.Root value="exercises" class="w-full">
+<Tabs.Root class="w-full" value="exercises">
 	<Tabs.List class="grid grid-cols-2">
 		<Tabs.Trigger value="exercises">Exercises</Tabs.Trigger>
 		<Tabs.Trigger value="muscleGroups">Muscle groups</Tabs.Trigger>
@@ -85,7 +85,7 @@
 </Tabs.Root>
 
 <div class="mt-auto grid grid-cols-2 gap-1">
-	<Button variant="secondary" href="./exercises">Previous</Button>
+	<Button href="./exercises" variant="secondary">Previous</Button>
 	<Button disabled={savingExerciseSplit} onclick={createOrEditExerciseSplit}>
 		{#if savingExerciseSplit}
 			<LoaderCircle class="animate-spin" />
diff --git a/src/routes/exercise-splits/manage/structure/+page.svelte b/src/routes/exercise-splits/manage/structure/+page.svelte
index 900f588a..390d7c45 100644
--- a/src/routes/exercise-splits/manage/structure/+page.svelte
+++ b/src/routes/exercise-splits/manage/structure/+page.svelte
@@ -35,8 +35,8 @@
 
 <H3>Structure</H3>
 <form
-	class="contents"
 	id="exercise-split-structure-form"
+	class="contents"
 	onsubmit={(e) => {
 		e.preventDefault();
 		submitStructure();
@@ -67,8 +67,8 @@
 					<Table.Cell>
 						<Input
 							id="exercise-split-day-{dayNumber + 1}-name"
-							placeholder={splitDay.isRestDay ? 'Rest' : `Day ${dayNumber + 1}`}
 							disabled={splitDay.isRestDay}
+							placeholder={splitDay.isRestDay ? 'Rest' : `Day ${dayNumber + 1}`}
 							required
 							bind:value={splitDay.name}
 						/>
@@ -90,25 +90,25 @@
 
 <div class="mb-1 mt-auto grid grid-cols-2 gap-1 pt-1">
 	<Button
-		variant="secondary"
 		class="gap-2"
-		onclick={exerciseSplitRunes.removeSplitDay}
 		disabled={exerciseSplitRunes.splitDays.length === 1}
+		onclick={exerciseSplitRunes.removeSplitDay}
+		variant="secondary"
 	>
 		<RemoveIcon /> Remove
 	</Button>
-	<Button variant="secondary" class="gap-2" onclick={exerciseSplitRunes.addSplitDay}>
+	<Button class="gap-2" onclick={exerciseSplitRunes.addSplitDay} variant="secondary">
 		<AddIcon /> Add
 	</Button>
 </div>
-<Button type="submit" form="exercise-split-structure-form">Next</Button>
+<Button form="exercise-split-structure-form" type="submit">Next</Button>
 
-<ResponsiveDialog title="Warning" needTrigger={false} bind:open={warningDialogOpen}>
+<ResponsiveDialog needTrigger={false} title="Warning" bind:open={warningDialogOpen}>
 	<p>
 		You'll lose exercise data from the following days:
 		<span class="font-semibold text-yellow-500">
 			{dataLossDays.map((day) => `Day ${day + 1}`).join(', ')}
 		</span>. Continue?
 	</p>
-	<Button variant="destructive" onclick={() => submitStructure(true)}>Continue</Button>
+	<Button onclick={() => submitStructure(true)} variant="destructive">Continue</Button>
 </ResponsiveDialog>
diff --git a/src/routes/exercise-splits/templates/+page.svelte b/src/routes/exercise-splits/templates/+page.svelte
index 3054f6ab..62e8b739 100644
--- a/src/routes/exercise-splits/templates/+page.svelte
+++ b/src/routes/exercise-splits/templates/+page.svelte
@@ -23,9 +23,9 @@
 
 {#each exerciseSplitTemplates as { description, exerciseSplit }}
 	<Button
-		variant="outline"
 		class="mb-1 flex h-fit flex-col rounded-md border bg-card p-2"
 		onclick={() => templateExerciseSplit(exerciseSplit)}
+		variant="outline"
 	>
 		<div class="pointer-events-none flex w-full items-center justify-between">
 			<span class="text-lg font-semibold">{exerciseSplit.name}</span>
diff --git a/src/routes/mesocycles/(components)/MesocycleCyclicSetChangesCharts.svelte b/src/routes/mesocycles/(components)/MesocycleCyclicSetChangesCharts.svelte
index 4ef085c1..7816ed42 100644
--- a/src/routes/mesocycles/(components)/MesocycleCyclicSetChangesCharts.svelte
+++ b/src/routes/mesocycles/(components)/MesocycleCyclicSetChangesCharts.svelte
@@ -126,9 +126,9 @@
 
 <div class="mb-2 w-full grow">
 	<canvas
-		class:max-h-56={selectedChartType.value === 'Regardless of progress'}
 		bind:this={chartCanvas}
 		id="chart-canvas"
+		class:max-h-56={selectedChartType.value === 'Regardless of progress'}
 	></canvas>
 </div>
 
diff --git a/src/routes/mesocycles/+page.svelte b/src/routes/mesocycles/+page.svelte
index 3e0c0988..14fb6657 100644
--- a/src/routes/mesocycles/+page.svelte
+++ b/src/routes/mesocycles/+page.svelte
@@ -56,15 +56,15 @@
 <div class="flex grow flex-col gap-2">
 	<div class="flex gap-1">
 		<form class="contents" onsubmit={updateSearchParam}>
-			<Input bind:value={searchString} id="search-mesocycles" placeholder="Search" type="search" />
-			<Button variant="secondary" aria-label="search" type="submit">
+			<Input id="search-mesocycles" placeholder="Search" type="search" bind:value={searchString} />
+			<Button aria-label="search" type="submit" variant="secondary">
 				<SearchIcon />
 			</Button>
 		</form>
 		<Button
 			aria-label="create-new-mesocycle"
-			onclick={createNewMesocycle}
-			href="/mesocycles/manage/basics"><AddIcon /></Button
+			href="/mesocycles/manage/basics"
+			onclick={createNewMesocycle}><AddIcon /></Button
 		>
 	</div>
 	<div class="flex items-center gap-2">
@@ -80,9 +80,9 @@
 		<div class="muted-text-box">No active mesocycle</div>
 	{:else}
 		<Button
-			variant="outline"
 			class="mb-1 flex h-12 items-center justify-between rounded-md border bg-card p-2"
 			href="/mesocycles/{activeMesocycle.id}"
+			variant="outline"
 		>
 			<span class="text-lg font-semibold">{activeMesocycle.name}</span>
 			<Badge>Active</Badge>
@@ -105,9 +105,9 @@
 			<InfiniteLoader triggerLoad={loadMore}>
 				{#each mesocycles as mesocycle}
 					<Button
-						variant="outline"
 						class="mb-1 flex h-12 items-center justify-between rounded-md border bg-card p-2"
 						href="/mesocycles/{mesocycle.id}"
+						variant="outline"
 					>
 						<span class="text-lg font-semibold">{mesocycle.name}</span>
 						{#if !mesocycle.startDate}
@@ -125,7 +125,7 @@
 					<LoaderCircle class="animate-spin" />
 				{/snippet}
 				{#snippet error(load)}
-					<Button variant="outline" onclick={load}>An error occurred. Retry?</Button>
+					<Button onclick={load} variant="outline">An error occurred. Retry?</Button>
 				{/snippet}
 				{#snippet noData()}
 					{#if mesocycles.length > 0}
diff --git a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleBasicsTab.svelte b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleBasicsTab.svelte
index cf2d77cb..072c35bb 100644
--- a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleBasicsTab.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleBasicsTab.svelte
@@ -149,10 +149,10 @@
 				<span class="text-sm text-muted-foreground">RIR progression</span>
 				<Badge variant="outline">{arraySum(mesocycle.RIRProgression)} cycles</Badge>
 			</div>
-			<Resizable.PaneGroup direction="horizontal" class="min-h-10 w-full rounded-lg border">
+			<Resizable.PaneGroup class="min-h-10 w-full rounded-lg border" direction="horizontal">
 				{#each mesocycle.RIRProgression.toReversed() as cycles, idx}
 					{@const size = (cycles / arraySum(mesocycle.RIRProgression)) * 100}
-					<Resizable.Pane minSize={size} maxSize={size} class="flex items-center justify-center">
+					<Resizable.Pane class="flex items-center justify-center" maxSize={size} minSize={size}>
 						<Popover.Root portal={null}>
 							<Popover.Trigger>
 								{mesocycle.RIRProgression.length - idx - 1}
@@ -172,7 +172,7 @@
 		<div class="flex flex-col">
 			<span class="text-sm text-muted-foreground">Start exercise template</span>
 			{#if mesocycle.exerciseSplit}
-				<a href="/exercise-splits/{mesocycle.exerciseSplit.id}" class="font-semibold underline">
+				<a class="font-semibold underline" href="/exercise-splits/{mesocycle.exerciseSplit.id}">
 					{mesocycle.exerciseSplit.name}
 				</a>
 			{:else}
@@ -192,7 +192,7 @@
 			</span>
 		</div>
 		<div class="flex flex-col gap-1">
-			<span class="text-sm text-muted-foreground" id="last-set-to-failure-label">
+			<span id="last-set-to-failure-label" class="text-sm text-muted-foreground">
 				Last set to failure
 			</span>
 			<Switch
@@ -203,7 +203,7 @@
 			/>
 		</div>
 		<div class="flex flex-col gap-1">
-			<span class="text-sm text-muted-foreground" id="force-RIR-matching-label">
+			<span id="force-RIR-matching-label" class="text-sm text-muted-foreground">
 				Force RIR matching
 			</span>
 			<Switch
@@ -216,7 +216,7 @@
 	</Card.Content>
 	{#if !mesocycle.endDate}
 		<Card.Footer class="justify-end">
-			<Button onclick={progressMesocycle} disabled={callingPatchEndpoint} class="w-36">
+			<Button class="w-36" disabled={callingPatchEndpoint} onclick={progressMesocycle}>
 				{#if callingPatchEndpoint}
 					<LoaderCircle class="animate-spin" />
 				{:else}
@@ -227,16 +227,16 @@
 	{/if}
 </Card.Root>
 
-<ResponsiveDialog title="Are you sure?" needTrigger={false} bind:open={deleteConfirmDrawerOpen}>
+<ResponsiveDialog needTrigger={false} title="Are you sure?" bind:open={deleteConfirmDrawerOpen}>
 	<p>
 		Delete mesocycle <span class="font-semibold">{mesocycle.name}</span>? This action cannot be
 		undone.
 	</p>
 	<Button
-		variant="destructive"
-		onclick={deleteMesocycle}
-		disabled={callingDeleteEndpoint}
 		class="gap-2"
+		disabled={callingDeleteEndpoint}
+		onclick={deleteMesocycle}
+		variant="destructive"
 	>
 		{#if callingDeleteEndpoint}
 			<LoaderCircle class="animate-spin" />
diff --git a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleExerciseSplitStats.svelte b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleExerciseSplitStats.svelte
index 9e6dab32..1463fe6f 100644
--- a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleExerciseSplitStats.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleExerciseSplitStats.svelte
@@ -10,7 +10,7 @@
 	let { splitExercises }: PropsType = $props();
 </script>
 
-<Tabs.Root value="volume" class="mb-auto w-full">
+<Tabs.Root class="mb-auto w-full" value="volume">
 	<Tabs.List class="grid grid-cols-3">
 		<Tabs.Trigger value="volume">Volume</Tabs.Trigger>
 		<Tabs.Trigger value="exercises">Exercises</Tabs.Trigger>
diff --git a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSkeleton.svelte b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSkeleton.svelte
index e8ce2e36..f485e780 100644
--- a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSkeleton.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSkeleton.svelte
@@ -5,7 +5,7 @@
 	import MenuIcon from 'virtual:icons/lucide/menu';
 </script>
 
-<Tabs.Root value="basics" class="flex w-full grow flex-col">
+<Tabs.Root class="flex w-full grow flex-col" value="basics">
 	<Tabs.List class="grid grid-cols-4">
 		<Tabs.Trigger value="basics">Basics</Tabs.Trigger>
 		<Tabs.Trigger value="split">Split</Tabs.Trigger>
diff --git a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSplitTab.svelte b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSplitTab.svelte
index 8be354f4..ef69247f 100644
--- a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSplitTab.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleSplitTab.svelte
@@ -25,27 +25,27 @@
 
 <Card.Root class="mb-2 flex items-center justify-between gap-2 p-2">
 	<span class="text-sm font-medium text-muted-foreground">The current split of the mesocycle</span>
-	<Button size="sm" class="gap-2" onclick={editMesocycleExerciseSplit}>
+	<Button class="gap-2" onclick={editMesocycleExerciseSplit} size="sm">
 		Edit <EditIcon />
 	</Button>
 </Card.Root>
 <Tabs.Root
-	value={selectedSplitDay.name}
+	class="w-full"
 	onValueChange={(v) => {
 		selectedSplitDay = mesocycle.mesocycleExerciseSplitDays.find(
 			(splitDay) => splitDay.name === v
 		) as MesocycleSplitDay;
 	}}
-	class="w-full"
+	value={selectedSplitDay.name}
 >
 	<Tabs.List class="flex justify-start overflow-x-auto">
 		{#each mesocycle.mesocycleExerciseSplitDays as splitDay}
-			<Tabs.Trigger value={splitDay.name} disabled={splitDay.isRestDay}>
+			<Tabs.Trigger disabled={splitDay.isRestDay} value={splitDay.name}>
 				{splitDay.isRestDay ? 'Rest' : splitDay.name}
 			</Tabs.Trigger>
 		{/each}
 	</Tabs.List>
-	<Tabs.Content value={selectedSplitDay.name} class="flex flex-col gap-1">
+	<Tabs.Content class="flex flex-col gap-1" value={selectedSplitDay.name}>
 		{#each selectedSplitDay.mesocycleSplitDayExercises as exercise}
 			<ExerciseTemplateCard context="mesocycle" exerciseTemplate={exercise} readOnly />
 		{/each}
diff --git a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleVolumeTab.svelte b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleVolumeTab.svelte
index 6dc0afca..e4db90ec 100644
--- a/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleVolumeTab.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/(components)/MesocycleVolumeTab.svelte
@@ -9,7 +9,7 @@
 	let { cyclicSetChanges }: PropsType = $props();
 </script>
 
-<ScrollArea orientation="both" class="h-px grow">
+<ScrollArea class="h-px grow" orientation="both">
 	<Table.Root>
 		<Table.Header>
 			<Table.Row>
diff --git a/src/routes/mesocycles/[mesocycleId]/+page.svelte b/src/routes/mesocycles/[mesocycleId]/+page.svelte
index 8fd1a2ed..22d82497 100644
--- a/src/routes/mesocycles/[mesocycleId]/+page.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/+page.svelte
@@ -29,7 +29,7 @@
 {#if mesocycle === 'loading'}
 	<MesocycleSkeleton />
 {:else}
-	<Tabs.Root bind:value={selectedTabValue} class="flex w-full grow flex-col">
+	<Tabs.Root class="flex w-full grow flex-col" bind:value={selectedTabValue}>
 		<Tabs.List class="grid grid-cols-4">
 			<Tabs.Trigger value="basics">Basics</Tabs.Trigger>
 			<Tabs.Trigger value="split">Split</Tabs.Trigger>
@@ -50,7 +50,7 @@
 				/>
 			{/if}
 		</Tabs.Content>
-		<Tabs.Content value="volume" class="grow">
+		<Tabs.Content class="grow" value="volume">
 			{#if !chartMode}
 				<div class="flex h-full flex-col">
 					<MesocycleVolumeTab cyclicSetChanges={mesocycle.mesocycleCyclicSetChanges} />
@@ -61,7 +61,7 @@
 				</Card.Root>
 			{/if}
 		</Tabs.Content>
-		<Tabs.Content value="workouts" class="grow">
+		<Tabs.Content class="grow" value="workouts">
 			{#if !chartMode}
 				TODO: workouts list and some stats like: most progressed muscle group, exercise, least
 				progressed, highest volumes, etc
diff --git a/src/routes/mesocycles/[mesocycleId]/edit-split/exercises/+page.svelte b/src/routes/mesocycles/[mesocycleId]/edit-split/exercises/+page.svelte
index 44041318..8f3117d3 100644
--- a/src/routes/mesocycles/[mesocycleId]/edit-split/exercises/+page.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/edit-split/exercises/+page.svelte
@@ -44,21 +44,21 @@
 <H3>Exercises</H3>
 <Tabs.Root
 	class="flex w-full grow flex-col"
-	value={splitDayName}
 	onValueChange={(v) => {
 		mesocycleExerciseSplitRunes.selectedSplitDayIndex =
 			mesocycleExerciseSplitRunes.splitDays.findIndex((splitDay) => splitDay.name === v);
 	}}
+	value={splitDayName}
 >
 	<Tabs.List class="flex justify-start overflow-x-auto">
 		{#each mesocycleExerciseSplitRunes.splitExercises as _, idx}
 			{@const { name, isRestDay } = mesocycleExerciseSplitRunes.splitDays[idx]}
-			<Tabs.Trigger value={name} disabled={isRestDay} class="px-4">
+			<Tabs.Trigger class="px-4" disabled={isRestDay} value={name}>
 				{name !== '' ? name : 'Rest'}
 			</Tabs.Trigger>
 		{/each}
 	</Tabs.List>
-	<Tabs.Content value={splitDayName} class="grow">
+	<Tabs.Content class="grow" value={splitDayName}>
 		<div class="flex h-full flex-col gap-2">
 			<div class="flex items-center gap-2">
 				<div class="mr-auto flex flex-col">
@@ -68,14 +68,14 @@
 					</span>
 				</div>
 				<AddEditExerciseDrawer
-					context="mesocycle"
-					mesocycle={mesocycleExerciseSplitRunes.mesocycle as Mesocycle}
 					addExercise={mesocycleExerciseSplitRunes.addExercise}
+					context="mesocycle"
 					editExercise={mesocycleExerciseSplitRunes.editExercise}
-					setEditingExercise={mesocycleExerciseSplitRunes.setEditingExercise}
 					editingExercise={mesocycleExerciseSplitRunes.editingExercise}
+					mesocycle={mesocycleExerciseSplitRunes.mesocycle as Mesocycle}
+					setEditingExercise={mesocycleExerciseSplitRunes.setEditingExercise}
 				/>
-				<Button size="icon" variant="outline" onclick={() => (reordering = !reordering)}>
+				<Button onclick={() => (reordering = !reordering)} size="icon" variant="outline">
 					{#if !reordering}
 						<ReorderIcon />
 					{:else}
@@ -85,10 +85,10 @@
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger asChild let:builder>
 						<Button
+							aria-label="exercise-split-functions"
 							builders={[builder]}
 							size="icon"
 							variant="outline"
-							aria-label="exercise-split-functions"
 						>
 							<MenuIcon />
 						</Button>
@@ -97,22 +97,22 @@
 						<DropdownMenu.Group>
 							<DropdownMenu.Item
 								class="gap-2"
-								onclick={mesocycleExerciseSplitRunes.cutExercises}
 								disabled={selectedSplitDayExercises.length === 0}
+								onclick={mesocycleExerciseSplitRunes.cutExercises}
 							>
 								<CutIcon /> Cut
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								class="gap-2"
-								onclick={mesocycleExerciseSplitRunes.copyExercises}
 								disabled={selectedSplitDayExercises.length === 0}
+								onclick={mesocycleExerciseSplitRunes.copyExercises}
 							>
 								<CopyIcon /> Copy
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								class="gap-2"
-								onclick={mesocycleExerciseSplitRunes.pasteExercises}
 								disabled={mesocycleExerciseSplitRunes.copiedExercises === undefined}
+								onclick={mesocycleExerciseSplitRunes.pasteExercises}
 							>
 								<PasteIcon /> Paste
 							</DropdownMenu.Item>
@@ -127,11 +127,11 @@
 				<DndComponent
 					context="mesocycle"
 					deleteExercise={mesocycleExerciseSplitRunes.deleteExercise}
+					{reordering}
 					setEditingExercise={mesocycleExerciseSplitRunes.setEditingExercise}
 					bind:itemList={mesocycleExerciseSplitRunes.splitExercises[
 						mesocycleExerciseSplitRunes.selectedSplitDayIndex
 					]}
-					{reordering}
 				/>
 			</div>
 		</div>
@@ -139,13 +139,13 @@
 </Tabs.Root>
 
 <div class="mt-2 grid grid-cols-2 gap-1">
-	<Button variant="secondary" href="./structure">Previous</Button>
+	<Button href="./structure" variant="secondary">Previous</Button>
 	<Button onclick={submitExercises}>Next</Button>
 </div>
 
 <SwapExercisesDialog
-	splitDays={mesocycleExerciseSplitRunes.splitDays}
 	selectedSplitDayIndex={mesocycleExerciseSplitRunes.selectedSplitDayIndex}
+	splitDays={mesocycleExerciseSplitRunes.splitDays}
 	swapExercises={mesocycleExerciseSplitRunes.swapExercises}
 	bind:open={swapDialogOpen}
 />
diff --git a/src/routes/mesocycles/[mesocycleId]/edit-split/overview/+page.svelte b/src/routes/mesocycles/[mesocycleId]/edit-split/overview/+page.svelte
index a5425f2c..de5f68c5 100644
--- a/src/routes/mesocycles/[mesocycleId]/edit-split/overview/+page.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/edit-split/overview/+page.svelte
@@ -39,8 +39,8 @@
 
 <MesocycleExerciseSplitStats splitExercises={mesocycleExerciseSplitRunes.splitExercises} />
 <div class="mt-2 grid grid-cols-2 gap-1">
-	<Button variant="secondary" href="./exercises">Previous</Button>
-	<Button onclick={saveMesocycleExerciseSplit} disabled={savingMesocycleExerciseSplit}>
+	<Button href="./exercises" variant="secondary">Previous</Button>
+	<Button disabled={savingMesocycleExerciseSplit} onclick={saveMesocycleExerciseSplit}>
 		{#if !savingMesocycleExerciseSplit}
 			Save
 		{:else}
diff --git a/src/routes/mesocycles/[mesocycleId]/edit-split/structure/+page.svelte b/src/routes/mesocycles/[mesocycleId]/edit-split/structure/+page.svelte
index 2920a1b9..09bd5001 100644
--- a/src/routes/mesocycles/[mesocycleId]/edit-split/structure/+page.svelte
+++ b/src/routes/mesocycles/[mesocycleId]/edit-split/structure/+page.svelte
@@ -57,8 +57,8 @@
 
 <H3>Structure</H3>
 <form
-	class="contents"
 	id="exercise-split-structure-form"
+	class="contents"
 	onsubmit={(e) => {
 		e.preventDefault();
 		submitStructure();
@@ -71,8 +71,8 @@
 				<Table.Head>
 					<Popover.Root>
 						<Popover.Trigger
-							aria-label="mesocycle-exercise-split-edit-warning"
 							class={cn({ 'text-background': !showWarningIcon })}
+							aria-label="mesocycle-exercise-split-edit-warning"
 						>
 							<WarningIcon class="h-4 w-4" />
 						</Popover.Trigger>
@@ -99,8 +99,8 @@
 					<Table.Cell>
 						<Input
 							id="exercise-split-day-{dayNumber + 1}-name"
-							placeholder={splitDay.isRestDay ? 'Rest' : `Day ${dayNumber + 1}`}
 							disabled={splitDay.isRestDay}
+							placeholder={splitDay.isRestDay ? 'Rest' : `Day ${dayNumber + 1}`}
 							required
 							bind:value={splitDay.name}
 						/>
@@ -122,25 +122,25 @@
 
 <div class="mb-1 mt-auto grid grid-cols-2 gap-1 pt-1">
 	<Button
-		variant="secondary"
 		class="gap-2"
-		onclick={mesocycleExerciseSplitRunes.removeSplitDay}
 		disabled={mesocycleExerciseSplitRunes.splitDays.length === 1}
+		onclick={mesocycleExerciseSplitRunes.removeSplitDay}
+		variant="secondary"
 	>
 		<RemoveIcon /> Remove
 	</Button>
-	<Button variant="secondary" class="gap-2" onclick={mesocycleExerciseSplitRunes.addSplitDay}>
+	<Button class="gap-2" onclick={mesocycleExerciseSplitRunes.addSplitDay} variant="secondary">
 		<AddIcon /> Add
 	</Button>
 </div>
-<Button type="submit" form="exercise-split-structure-form">Next</Button>
+<Button form="exercise-split-structure-form" type="submit">Next</Button>
 
-<ResponsiveDialog title="Warning" needTrigger={false} bind:open={warningDialogOpen}>
+<ResponsiveDialog needTrigger={false} title="Warning" bind:open={warningDialogOpen}>
 	<p>
 		You'll lose exercise data from the following days:
 		<span class="font-semibold text-yellow-500">
 			{dataLossDays.map((day) => `Day ${day + 1}`).join(', ')}
 		</span>. Continue?
 	</p>
-	<Button variant="destructive" onclick={() => submitStructure(true)}>Continue</Button>
+	<Button onclick={() => submitStructure(true)} variant="destructive">Continue</Button>
 </ResponsiveDialog>
diff --git a/src/routes/mesocycles/manage/+layout.svelte b/src/routes/mesocycles/manage/+layout.svelte
index 39c3f627..7241b1f6 100644
--- a/src/routes/mesocycles/manage/+layout.svelte
+++ b/src/routes/mesocycles/manage/+layout.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import H2 from '$lib/components/ui/typography/H2.svelte';
 	import { mesocycleRunes } from './mesocycleRunes.svelte';
 
diff --git a/src/routes/mesocycles/manage/basics/+page.svelte b/src/routes/mesocycles/manage/basics/+page.svelte
index 3f6a8177..e00fd057 100644
--- a/src/routes/mesocycles/manage/basics/+page.svelte
+++ b/src/routes/mesocycles/manage/basics/+page.svelte
@@ -67,12 +67,12 @@
 	<div class="flex gap-2">
 		<div class="flex basis-1/2 flex-col gap-1.5">
 			<Select.Root
-				required
-				selected={selectedRIR}
 				onSelectedChange={(s) => {
 					if (!s) return;
 					generateRIRDistribution(s.value, totalDuration);
 				}}
+				required
+				selected={selectedRIR}
 			>
 				<Select.Label class="p-0 text-sm font-medium leading-none">Start RIR</Select.Label>
 				<Select.Trigger>
@@ -93,22 +93,22 @@
 			<Label for="mesocycle-duration">Mesocycle duration</Label>
 			<Input
 				id="mesocycle-duration"
-				placeholder="Type here"
-				type="number"
-				min={selectedRIR.value + 1}
 				max={20}
-				required
-				value={totalDuration}
+				min={selectedRIR.value + 1}
 				oninput={(e) => {
 					totalDuration = e.currentTarget.valueAsNumber;
 					if (!isNaN(totalDuration)) generateRIRDistribution(selectedRIR.value, totalDuration);
 				}}
+				placeholder="Type here"
+				required
+				type="number"
+				value={totalDuration}
 			/>
 		</div>
 	</div>
 
 	<span class="text-sm font-medium leading-none">RIR progression</span>
-	<Resizable.PaneGroup direction="vertical" class="rounded-lg border">
+	<Resizable.PaneGroup class="rounded-lg border" direction="vertical">
 		{#each RIRProgression.toReversed() as cyclesPerRIR, idx}
 			{#key selectedRIR.value + totalDuration}
 				<Resizable.Pane
@@ -128,11 +128,11 @@
 			{/key}
 			{#if idx !== RIRProgression.length - 1}
 				<Resizable.Handle
-					withHandle
 					onDraggingChange={(dragging) => {
 						manualDragging = dragging;
 						if (!dragging) panes[idx].resize((100 / totalDuration) * cyclesPerRIR);
 					}}
+					withHandle
 				/>
 			{/if}
 		{/each}
diff --git a/src/routes/mesocycles/manage/overview/+page.svelte b/src/routes/mesocycles/manage/overview/+page.svelte
index 1af2b371..b1922325 100644
--- a/src/routes/mesocycles/manage/overview/+page.svelte
+++ b/src/routes/mesocycles/manage/overview/+page.svelte
@@ -118,7 +118,7 @@
 </Card.Root>
 
 <div class="mt-auto grid grid-cols-2 gap-1">
-	<Button variant="secondary" onclick={() => window.history.back()}>Previous</Button>
+	<Button onclick={() => window.history.back()} variant="secondary">Previous</Button>
 	<Button disabled={savingMesocycle} onclick={createOrEditMesocycle}>
 		{#if savingMesocycle}
 			<LoaderCircle class="animate-spin" />
diff --git a/src/routes/mesocycles/manage/progression/+page.svelte b/src/routes/mesocycles/manage/progression/+page.svelte
index 49c31e9b..09d7bc6c 100644
--- a/src/routes/mesocycles/manage/progression/+page.svelte
+++ b/src/routes/mesocycles/manage/progression/+page.svelte
@@ -58,7 +58,7 @@
 	<span class="mb-0.5 text-sm font-medium">Starting exercise split</span>
 	<Popover.Root>
 		<Popover.Trigger asChild let:builder>
-			<Button builders={[builder]} variant="outline" role="combobox" class="w-full justify-between">
+			<Button class="w-full justify-between" builders={[builder]} role="combobox" variant="outline">
 				{#if exerciseSplits !== 'loading'}
 					{selectedExerciseSplit === null ? 'Pick one' : selectedExerciseSplit.name}
 				{:else}
@@ -69,7 +69,7 @@
 		</Popover.Trigger>
 		<Popover.Content class="mt-0.5 p-0" align="start">
 			<Command.Root shouldFilter={false}>
-				<Command.Input placeholder="Search" class="h-9" bind:value={searchString} />
+				<Command.Input class="h-9" placeholder="Search" bind:value={searchString} />
 				{#if exerciseSplits === 'loading'}
 					<Command.Empty class="flex items-center justify-center gap-2">
 						<LoaderCircle class="h-5 w-5 animate-spin" />
@@ -80,12 +80,12 @@
 						<div class="flex max-h-32 flex-col overflow-y-auto">
 							{#each filterExerciseSplits(exerciseSplits) as exerciseSplit}
 								<Command.Item
-									value={exerciseSplit.id.toString()}
 									onSelect={(currentValue) => {
 										if (exerciseSplits === 'loading') return;
 										selectedExerciseSplit =
 											exerciseSplits.find((split) => split.id === currentValue) ?? null;
 									}}
+									value={exerciseSplit.id.toString()}
 								>
 									<Check
 										class={cn('mr-2 h-4 w-4', {
@@ -124,14 +124,14 @@
 			</Card.Header>
 			<Card.Content class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<Select.Root
-					selected={{
-						value: mesocycleRunes.mesocycle.preferredProgressionVariable,
-						label: mesocycleRunes.mesocycle.preferredProgressionVariable
-					}}
 					onSelectedChange={(s) => {
 						if (!s) return;
 						mesocycleRunes.mesocycle.preferredProgressionVariable = s.value;
 					}}
+					selected={{
+						value: mesocycleRunes.mesocycle.preferredProgressionVariable,
+						label: mesocycleRunes.mesocycle.preferredProgressionVariable
+					}}
 				>
 					<div class="flex flex-col gap-1">
 						<Select.Label class="flex items-center justify-between p-0 font-medium">
@@ -141,11 +141,11 @@
 							</InfoPopover>
 						</Select.Label>
 						<Select.Trigger id="mesocycle-progression-option">
-							<Select.Value placeholder="Select" class="capitalize" />
+							<Select.Value class="capitalize" placeholder="Select" />
 						</Select.Trigger>
 						<Select.Content>
 							{#each Object.values(ProgressionVariable) as progressionOption}
-								<Select.Item value={progressionOption} class="capitalize">
+								<Select.Item class="capitalize" value={progressionOption}>
 									{progressionOption}
 								</Select.Item>
 							{/each}
@@ -155,8 +155,8 @@
 				{#if mesocycleRunes.editingMesocycleId === null}
 					<div class="flex w-full max-w-sm flex-col gap-1.5">
 						<Label
-							for="distribution-min-sets-per-exercise"
 							class="flex items-center justify-between"
+							for="distribution-min-sets-per-exercise"
 						>
 							Minimum sets per exercise
 							<InfoPopover ariaLabel="distribution-min-sets-per-exercise-info">
@@ -164,21 +164,21 @@
 							</InfoPopover>
 						</Label>
 						<Input
-							type="number"
-							step={1}
-							min={0}
-							max={maxMinSetsValue}
 							id="distribution-min-sets-per-exercise"
+							max={maxMinSetsValue}
+							min={0}
 							placeholder="Type here"
 							required
+							step={1}
+							type="number"
 							bind:value={mesocycleRunes.minSets}
 						/>
 					</div>
 				{/if}
 				<div class="relative flex items-center justify-between rounded-md border p-2">
 					<Label
-						for="mesocycle-last-set-to-failure"
 						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+						for="mesocycle-last-set-to-failure"
 					>
 						Take last set to failure
 					</Label>
@@ -196,8 +196,8 @@
 				</div>
 				<div class="relative flex items-center justify-between rounded-md border p-2">
 					<Label
-						for="mesocycle-last-set-to-failure"
 						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+						for="mesocycle-last-set-to-failure"
 					>
 						Force RIR matching
 					</Label>
@@ -221,11 +221,11 @@
 						</span>
 					</div>
 					<Slider
-						value={[mesocycleRunes.mesocycle.startOverloadPercentage]}
-						onValueChange={(value) => (mesocycleRunes.mesocycle.startOverloadPercentage = value[0])}
-						min={0}
 						max={10}
+						min={0}
+						onValueChange={(value) => (mesocycleRunes.mesocycle.startOverloadPercentage = value[0])}
 						step={0.25}
+						value={[mesocycleRunes.mesocycle.startOverloadPercentage]}
 					/>
 				</div>
 			</Card.Content>
@@ -234,7 +234,7 @@
 
 	<div class="grid grid-cols-2 gap-1">
 		<Button variant="secondary">
-			<a href="./basics" class="w-full">Previous</a>
+			<a class="w-full" href="./basics">Previous</a>
 		</Button>
 		<Button onclick={savePreferencesAndExerciseSplit}>Next</Button>
 	</div>
diff --git a/src/routes/mesocycles/manage/volume/(components)/MesocycleStartVolumesSetupTable.svelte b/src/routes/mesocycles/manage/volume/(components)/MesocycleStartVolumesSetupTable.svelte
index de16f587..941c3a49 100644
--- a/src/routes/mesocycles/manage/volume/(components)/MesocycleStartVolumesSetupTable.svelte
+++ b/src/routes/mesocycles/manage/volume/(components)/MesocycleStartVolumesSetupTable.svelte
@@ -104,7 +104,7 @@
 		<Table.Row>
 			<Table.Head>
 				<Popover.Root bind:open={muscleGroupPopoverOpen}>
-					<Popover.Trigger aria-label="add-muscle-group" class="flex items-center text-left">
+					<Popover.Trigger class="flex items-center text-left" aria-label="add-muscle-group">
 						Muscle Group
 						<Plus class="shrink-0 basis-4" />
 					</Popover.Trigger>
@@ -113,15 +113,15 @@
 							<div class="flex grow flex-col gap-2">
 								<Select.Root
 									name="exercise-target-muscle-group"
-									selected={{
-										value: selectedMuscleGroup.value,
-										label: convertCamelCaseToNormal(selectedMuscleGroup?.value)
-									}}
 									onSelectedChange={(v) => {
 										if (!v) return;
 										selectedMuscleGroup.value = v.value;
 									}}
 									required
+									selected={{
+										value: selectedMuscleGroup.value,
+										label: convertCamelCaseToNormal(selectedMuscleGroup?.value)
+									}}
 								>
 									<Select.Label class="p-0 text-sm font-medium leading-none">
 										Add muscle group
@@ -132,8 +132,8 @@
 									<Select.Content class="h-48 overflow-y-auto">
 										{#each Object.values(MuscleGroup) as muscleGroup}
 											<Select.Item
-												value={muscleGroup}
 												label={convertCamelCaseToNormal(muscleGroup)}
+												value={muscleGroup}
 											/>
 										{/each}
 									</Select.Content>
@@ -175,24 +175,24 @@
 											bind:checked={state.value}
 										/>
 										<Label
-											for="replace-all-{state.setChangeProperty}"
 											class="text-sm font-medium leading-none"
+											for="replace-all-{state.setChangeProperty}"
 										>
 											{title}
 										</Label>
 									</div>
 								{:else}
 									<div class="flex grow flex-col">
-										<Label for="replace-all-{state.setChangeProperty}" class="mb-1.5">
+										<Label class="mb-1.5" for="replace-all-{state.setChangeProperty}">
 											{title}
 										</Label>
 										<Input
-											type="number"
 											id="replace-all-{state.setChangeProperty}"
-											placeholder="Type here"
-											min={state.min}
 											max={state.max}
+											min={state.min}
+											placeholder="Type here"
 											required
+											type="number"
 											bind:value={state.value}
 										/>
 									</div>
@@ -222,10 +222,10 @@
 					<Table.Cell>
 						{#if setChange.inSplit}
 							<Input
-								type="number"
-								aria-label="{muscleGroup}-start-volume"
 								id="{muscleGroup}-start-volume"
+								aria-label="{muscleGroup}-start-volume"
 								required
+								type="number"
 								bind:value={setChange.startVolume}
 							/>
 						{/if}
@@ -233,25 +233,25 @@
 				{/if}
 				<Table.Cell>
 					<Input
-						type="number"
-						aria-label="{muscleGroup}-max-volume"
 						id="{muscleGroup}-max-volume"
+						aria-label="{muscleGroup}-max-volume"
 						required
+						type="number"
 						bind:value={setChange.maxVolume}
 					/>
 				</Table.Cell>
 				<Table.Cell>
 					<Select.Root
-						required
-						selected={{
-							value: setChange.setIncreaseAmount,
-							label: setChange.setIncreaseAmount.toString()
-						}}
 						onSelectedChange={(s) => {
 							if (!s) return;
 							if (s.value === 0) setChange.regardlessOfProgress = false;
 							setChange.setIncreaseAmount = s.value;
 						}}
+						required
+						selected={{
+							value: setChange.setIncreaseAmount,
+							label: setChange.setIncreaseAmount.toString()
+						}}
 					>
 						<Select.Trigger class="w-16" aria-label="{muscleGroup}-set-increase-amount">
 							<Select.Value />
diff --git a/src/routes/mesocycles/manage/volume/+page.svelte b/src/routes/mesocycles/manage/volume/+page.svelte
index cdb6b06c..4f4652f6 100644
--- a/src/routes/mesocycles/manage/volume/+page.svelte
+++ b/src/routes/mesocycles/manage/volume/+page.svelte
@@ -33,11 +33,11 @@
 
 <H3>Volume</H3>
 {#if exerciseSplit !== 'loading' || data.editing}
-	<ScrollArea orientation="both" class="h-px grow">
+	<ScrollArea class="h-px grow" orientation="both">
 		<MesocycleStartVolumesSetupTable />
 	</ScrollArea>
 	<div class="grid grid-cols-2 gap-1">
-		<Button variant="secondary" href="./progression">Previous</Button>
+		<Button href="./progression" variant="secondary">Previous</Button>
 		<Button onclick={submitVolume}>Next</Button>
 	</div>
 {:else}
diff --git a/src/routes/workouts/manage/exercises/(components)/DndComponent.svelte b/src/routes/workouts/manage/exercises/(components)/DndComponent.svelte
index 3f4ad034..e4d19f59 100644
--- a/src/routes/workouts/manage/exercises/(components)/DndComponent.svelte
+++ b/src/routes/workouts/manage/exercises/(components)/DndComponent.svelte
@@ -23,21 +23,21 @@
 </script>
 
 <div
+	class="flex h-px grow flex-col gap-1 overflow-y-auto"
+	onconsider={handleSort}
+	onfinalize={handleSort}
 	use:dragHandleZone={{
 		items: itemList,
 		flipDurationMs: 200,
 		dropTargetClasses: ['border-none'],
 		dropTargetStyle: {}
 	}}
-	onconsider={handleSort}
-	onfinalize={handleSort}
-	class="flex h-px grow flex-col gap-1 overflow-y-auto"
 >
 	{#each itemList as exercise, idx (exercise.name)}
 		<div class="relative" animate:flip={{ duration: 200 }}>
-			<WorkoutExerciseCard {idx} {reordering} {readOnly} bind:exercise={itemList[idx]} />
+			<WorkoutExerciseCard {idx} {readOnly} {reordering} bind:exercise={itemList[idx]} />
 			{#if exercise[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-				<div in:fade={{ duration: 200 }} class="custom-shadow-item"></div>
+				<div class="custom-shadow-item" in:fade={{ duration: 200 }}></div>
 			{/if}
 		</div>
 	{:else}
diff --git a/src/routes/workouts/manage/exercises/(components)/SetsComponent.svelte b/src/routes/workouts/manage/exercises/(components)/SetsComponent.svelte
index c06228c8..1d8be434 100644
--- a/src/routes/workouts/manage/exercises/(components)/SetsComponent.svelte
+++ b/src/routes/workouts/manage/exercises/(components)/SetsComponent.svelte
@@ -119,22 +119,22 @@
 			<form class="contents" onsubmit={(e) => completeSet(e, set, idx)}>
 				{#if !set.skipped}
 					<Input
-						type="number"
-						min={0}
 						id="{exercise.name}-set-{idx + 1}-reps"
 						disabled={set.completed || set.skipped}
+						min={0}
 						required
+						type="number"
 						bind:value={set.reps}
 					/>
 					{#if idx === 0 || !['Straight', 'Myorep', 'MyorepMatch'].includes(exercise.setType)}
 						<Input
-							type="number"
-							min={0}
-							step={0.25}
 							id="{exercise.name}-set-{idx + 1}-load"
 							disabled={set.completed || set.skipped}
-							required
+							min={0}
 							placeholder={getNextLoad(idx)}
+							required
+							step={0.25}
+							type="number"
 							bind:value={set.load}
 						/>
 					{:else if exercise.setType === 'MyorepMatch'}
@@ -143,11 +143,11 @@
 						<span></span>
 					{/if}
 					<Input
-						type="number"
-						min={0}
 						id="{exercise.name}-set-{idx + 1}-RIR"
 						disabled={set.completed || set.skipped}
+						min={0}
 						required
+						type="number"
 						bind:value={set.RIR}
 					/>
 				{:else}
@@ -158,11 +158,11 @@
 					</div>
 				{/if}
 				<Button
-					size="icon"
 					class="place-self-end"
+					disabled={shouldSetBeDisabled(set, idx)}
+					size="icon"
 					type="submit"
 					variant={set.completed ? 'outline' : 'default'}
-					disabled={shouldSetBeDisabled(set, idx)}
 				>
 					{#if set.skipped}
 						<UndoIcon />
@@ -182,17 +182,17 @@
 							<span class="text-sm text-muted-foreground">skipped</span>
 							<Separator class="w-px grow" />
 						</div>
-						<Button size="icon" class="place-self-end" variant="secondary" disabled>
+						<Button class="place-self-end" disabled size="icon" variant="secondary">
 							<CheckIcon />
 						</Button>
 					{:else}
 						<form class="contents" onsubmit={(e) => completeMiniSet(e, set, miniIdx)}>
 							<Input
-								type="number"
-								min={0}
 								id="{exercise.name}-set-{idx + 1}-mini-set-{miniIdx + 1}-reps"
 								disabled={miniSet.completed}
+								min={0}
 								required
+								type="number"
 								bind:value={miniSet.reps}
 							/>
 							{#if exercise.setType === 'MyorepMatch'}
@@ -200,28 +200,28 @@
 							{:else}
 								{@const expectedLoad = getMiniSetLoad(idx, miniIdx)}
 								<Input
-									type="number"
-									min={0}
-									step={0.25}
 									id="{exercise.name}-set-{idx + 1}-mini-set-{miniIdx + 1}-load"
 									disabled={miniSet.completed}
-									required
+									min={0}
 									placeholder={expectedLoad === undefined ? expectedLoad : expectedLoad.toString()}
+									required
+									step={0.25}
+									type="number"
 									bind:value={miniSet.load}
 								/>
 							{/if}
 							<Input
-								type="number"
-								min={0}
 								id="{exercise.name}-set-{idx + 1}-mini-set-{miniIdx + 1}-RIR"
 								disabled={miniSet.completed}
+								min={0}
 								required
+								type="number"
 								bind:value={miniSet.RIR}
 							/>
 							<Button
-								size="icon"
 								class="place-self-end"
 								disabled={miniSetButtonDisabled}
+								size="icon"
 								type="submit"
 								variant={miniSet.completed ? 'outline' : 'default'}
 							>
@@ -235,17 +235,17 @@
 					{/if}
 				{/each}
 				<Button
-					variant="secondary"
 					aria-label="add-mini-set-to-set-{idx + 1}-of-{exercise.name}"
 					onclick={() => addMiniSet(idx)}
+					variant="secondary"
 				>
 					<AddIcon />
 				</Button>
 				<Button
-					variant="secondary"
 					aria-label="remove-mini-set-from-set-{idx + 1}-of-{exercise.name}"
 					disabled={set.miniSets.length === 0}
 					onclick={() => set.miniSets.pop()}
+					variant="secondary"
 				>
 					<RemoveIcon />
 				</Button>
diff --git a/src/routes/workouts/manage/exercises/(components)/WorkoutExerciseCard.svelte b/src/routes/workouts/manage/exercises/(components)/WorkoutExerciseCard.svelte
index be74459e..351567e9 100644
--- a/src/routes/workouts/manage/exercises/(components)/WorkoutExerciseCard.svelte
+++ b/src/routes/workouts/manage/exercises/(components)/WorkoutExerciseCard.svelte
@@ -37,11 +37,11 @@
 		<span class="mr-auto truncate">{exercise.name}</span>
 		{#if !readOnly}
 			{#if reordering}
-				<div use:dragHandle role="button" tabindex="0">
+				<div role="button" tabindex="0" use:dragHandle>
 					<GripVertical />
 				</div>
 			{:else}
-				<DropdownMenu.Root open={isContextMenuOpen} onOpenChange={(v) => (isContextMenuOpen = v)}>
+				<DropdownMenu.Root onOpenChange={(v) => (isContextMenuOpen = v)} open={isContextMenuOpen}>
 					<DropdownMenu.Trigger asChild let:builder>
 						<button use:builder.action {...builder} class="px-0.5 py-0">
 							<MenuIcon class="h-4 w-4" />
@@ -50,8 +50,8 @@
 					<DropdownMenu.Content align="end">
 						<DropdownMenu.Group>
 							<DropdownMenu.Item
-								onclick={() => workoutRunes.setEditingExercise(exercise)}
 								class="gap-2"
+								onclick={() => workoutRunes.setEditingExercise(exercise)}
 							>
 								<EditIcon /> Edit
 							</DropdownMenu.Item>
diff --git a/src/routes/workouts/manage/exercises/+page.svelte b/src/routes/workouts/manage/exercises/+page.svelte
index 852370c2..24683fa1 100644
--- a/src/routes/workouts/manage/exercises/+page.svelte
+++ b/src/routes/workouts/manage/exercises/+page.svelte
@@ -86,7 +86,7 @@
 				<span class="flex items-center gap-2 text-sm text-muted-foreground">
 					Day {workoutData.workoutOfMesocycle?.splitDayIndex + 1}, Cycle {workoutData
 						.workoutOfMesocycle?.cycleNumber}
-					<InfoPopover ariaLabel="mesocycle-info" align="center">
+					<InfoPopover align="center" ariaLabel="mesocycle-info">
 						<span class="text-sm text-foreground">
 							{workoutData.workoutOfMesocycle.mesocycle.name}:
 							{getFormattedDate(workoutData.startedAt)}
@@ -101,27 +101,27 @@
 			{/if}
 		</div>
 		<div class="grid grid-cols-3 gap-x-2 gap-y-1">
-			<Button size="icon" variant="outline" onclick={() => (reordering = !reordering)}>
+			<Button onclick={() => (reordering = !reordering)} size="icon" variant="outline">
 				{#if !reordering}
 					<ReorderIcon />
 				{:else}
 					<EditIcon />
 				{/if}
 			</Button>
-			<Button size="icon" variant="outline" aria-label="compare-exercises">
+			<Button aria-label="compare-exercises" size="icon" variant="outline">
 				<CompareIcon />
 				<!-- TODO: comparison stuff -->
 			</Button>
 			<AddEditExerciseDrawer
-				context="workout"
-				mesocycle={workoutData.workoutOfMesocycle?.mesocycle}
 				addExercise={workoutRunes.addExercise}
+				context="workout"
 				editExercise={workoutRunes.editExercise}
-				setEditingExercise={workoutRunes.setEditingExercise}
 				editingExercise={workoutRunes.editingExercise}
+				mesocycle={workoutData.workoutOfMesocycle?.mesocycle}
+				setEditingExercise={workoutRunes.setEditingExercise}
 			/>
 			{#if totalSets !== null && completedSets !== null}
-				<Progress class="col-span-3 h-1.5" value={completedSets} max={totalSets} />
+				<Progress class="col-span-3 h-1.5" max={totalSets} value={completedSets} />
 			{:else}
 				<Skeleton class="col-span-3 h-1.5 w-full" />
 			{/if}
@@ -136,11 +136,11 @@
 	</div>
 {:else}
 	<div class="mt-2 flex h-px grow flex-col overflow-y-auto">
-		<DndComponent bind:itemList={workoutRunes.workoutExercises} {reordering} />
+		<DndComponent {reordering} bind:itemList={workoutRunes.workoutExercises} />
 	</div>
 {/if}
 
 <div class="mt-2 grid grid-cols-2 gap-1">
-	<Button variant="secondary" href="./start">Previous</Button>
+	<Button href="./start" variant="secondary">Previous</Button>
 	<Button onclick={submitWorkoutExercises}>Next</Button>
 </div>
diff --git a/src/routes/workouts/manage/overview/+page.svelte b/src/routes/workouts/manage/overview/+page.svelte
index 17d55dcf..81e5d153 100644
--- a/src/routes/workouts/manage/overview/+page.svelte
+++ b/src/routes/workouts/manage/overview/+page.svelte
@@ -88,8 +88,8 @@
 
 <!-- TODO: stuff -->
 <div class="mt-auto grid grid-cols-2 gap-1">
-	<Button variant="secondary" onclick={() => window.history.back()}>Previous</Button>
-	<Button onclick={saveWorkout} disabled={savingWorkout}>
+	<Button onclick={() => window.history.back()} variant="secondary">Previous</Button>
+	<Button disabled={savingWorkout} onclick={saveWorkout}>
 		{#if savingWorkout}
 			<LoaderCircle class="animate-spin" />
 		{:else}
diff --git a/src/routes/workouts/manage/start/+page.svelte b/src/routes/workouts/manage/start/+page.svelte
index f62efd1d..de688da4 100644
--- a/src/routes/workouts/manage/start/+page.svelte
+++ b/src/routes/workouts/manage/start/+page.svelte
@@ -113,9 +113,9 @@
 		<div class="mb-1 flex w-full flex-col gap-1.5 rounded-lg border bg-card p-4">
 			<Label for="user-bodyweight">Bodyweight</Label>
 			<Input
-				type="number"
 				id="user-bodyweight"
 				placeholder="Type here"
+				type="number"
 				bind:value={userBodyweight}
 			/>
 		</div>
@@ -139,7 +139,7 @@
 			</Card.Header>
 			{#if workoutData.workoutOfMesocycle.workoutStatus === 'RestDay'}
 				<Card.Footer>
-					<Button class="ml-auto w-32 gap-2" onclick={completeRestDay} disabled={completingRestDay}>
+					<Button class="ml-auto w-32 gap-2" disabled={completingRestDay} onclick={completeRestDay}>
 						{#if completingRestDay}
 							<LoaderCircle class="animate-spin" />
 						{:else}
@@ -153,8 +153,8 @@
 	{/if}
 	<Button
 		class="mt-auto"
-		onclick={() => startWorkout()}
 		disabled={userBodyweight === null || $navigating !== null}
+		onclick={() => startWorkout()}
 	>
 		{#if $navigating}
 			<LoaderCircle class="animate-spin" />
@@ -164,7 +164,7 @@
 	</Button>
 {/if}
 
-<ResponsiveDialog title="Warning" needTrigger={false} bind:open={overwriteWorkoutDialogOpen}>
+<ResponsiveDialog needTrigger={false} title="Warning" bind:open={overwriteWorkoutDialogOpen}>
 	<p>
 		A workout is already in progress with <span class="font-semibold"
 			>{workoutRunes.workoutExercises?.length} exercises</span
@@ -172,6 +172,6 @@
 	</p>
 	<div class="grid grid-cols-2 gap-1.5">
 		<Button onclick={() => startWorkout(true, 'keepCurrent')}>Keep current</Button>
-		<Button variant="destructive" onclick={() => startWorkout(true, 'overwrite')}>Overwrite</Button>
+		<Button onclick={() => startWorkout(true, 'overwrite')} variant="destructive">Overwrite</Button>
 	</div>
 </ResponsiveDialog>