diff --git a/.prettierrc b/.prettierrc
index 4dd7e46..477c344 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -8,7 +8,7 @@
 			"files": "*.svelte",
 			"options": {
 				"parser": "svelte",
-				"plugins": ["prettier-plugin-svelte"]
+				"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
 			}
 		},
 		{
diff --git a/package-lock.json b/package-lock.json
index ced2196..10f3f6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,9 @@
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.46.1",
 				"postcss": "^8.4.49",
-				"prettier": "^3.3.2",
+				"prettier": "^3.4.2",
 				"prettier-plugin-svelte": "^3.2.4",
+				"prettier-plugin-tailwindcss": "^0.6.9",
 				"shiki": "^1.24.0",
 				"svelte": "^5.4.0",
 				"sveltejs-tippy": "^3.0.0",
@@ -3262,6 +3263,84 @@
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/prettier-plugin-tailwindcss": {
+			"version": "0.6.9",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.9.tgz",
+			"integrity": "sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.21.3"
+			},
+			"peerDependencies": {
+				"@ianvs/prettier-plugin-sort-imports": "*",
+				"@prettier/plugin-pug": "*",
+				"@shopify/prettier-plugin-liquid": "*",
+				"@trivago/prettier-plugin-sort-imports": "*",
+				"@zackad/prettier-plugin-twig-melody": "*",
+				"prettier": "^3.0",
+				"prettier-plugin-astro": "*",
+				"prettier-plugin-css-order": "*",
+				"prettier-plugin-import-sort": "*",
+				"prettier-plugin-jsdoc": "*",
+				"prettier-plugin-marko": "*",
+				"prettier-plugin-multiline-arrays": "*",
+				"prettier-plugin-organize-attributes": "*",
+				"prettier-plugin-organize-imports": "*",
+				"prettier-plugin-sort-imports": "*",
+				"prettier-plugin-style-order": "*",
+				"prettier-plugin-svelte": "*"
+			},
+			"peerDependenciesMeta": {
+				"@ianvs/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@prettier/plugin-pug": {
+					"optional": true
+				},
+				"@shopify/prettier-plugin-liquid": {
+					"optional": true
+				},
+				"@trivago/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@zackad/prettier-plugin-twig-melody": {
+					"optional": true
+				},
+				"prettier-plugin-astro": {
+					"optional": true
+				},
+				"prettier-plugin-css-order": {
+					"optional": true
+				},
+				"prettier-plugin-import-sort": {
+					"optional": true
+				},
+				"prettier-plugin-jsdoc": {
+					"optional": true
+				},
+				"prettier-plugin-marko": {
+					"optional": true
+				},
+				"prettier-plugin-multiline-arrays": {
+					"optional": true
+				},
+				"prettier-plugin-organize-attributes": {
+					"optional": true
+				},
+				"prettier-plugin-organize-imports": {
+					"optional": true
+				},
+				"prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"prettier-plugin-style-order": {
+					"optional": true
+				},
+				"prettier-plugin-svelte": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/property-information": {
 			"version": "6.5.0",
 			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
diff --git a/package.json b/package.json
index 3ca9765..55ecd0e 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,9 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
 		"postcss": "^8.4.49",
-		"prettier": "^3.3.2",
+		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.2.4",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"shiki": "^1.24.0",
 		"svelte": "^5.4.0",
 		"sveltejs-tippy": "^3.0.0",
diff --git a/src/App.svelte b/src/App.svelte
index ede9221..d397856 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -271,7 +271,7 @@
 		<Notification close={() => (showErrorNotification = false)} />
 	{/if}
 
-	<main class="py-6 px-4 space-y-6 flex-1">
+	<main class="flex-1 space-y-6 px-4 py-6">
 		<AuthorizationRequest
 			bind:selectedScopes
 			bind:selectedProtocolParams
diff --git a/src/lib/components/AuthorizationRequest.svelte b/src/lib/components/AuthorizationRequest.svelte
index 4695d0c..3a42e5a 100644
--- a/src/lib/components/AuthorizationRequest.svelte
+++ b/src/lib/components/AuthorizationRequest.svelte
@@ -23,10 +23,10 @@
 </script>
 
 <section
-	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6"
+	class="relative w-full rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
 >
 	<span
-		class="absolute -mt-8 bg-white dark:bg-gray-1000 px-2 -mx-2 text-charcoal/70 dark:text-gray/70 uppercase text-xs font-mono"
+		class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
 		>Authorization Request</span
 	>
 	{#if localStorage.plausible_ignore}
@@ -34,10 +34,10 @@
 	{/if}
 	<button
 		onclick={reset}
-		class="absolute -top-3 right-2 px-3 py-0.5 rounded-md border border-charcoal dark:border-gray-800 text-xs bg-white dark:bg-gray-1000"
+		class="absolute -top-3 right-2 rounded-md border border-charcoal bg-white px-3 py-0.5 text-xs dark:border-gray-800 dark:bg-gray-1000"
 		>Reset</button
 	>
-	<div class="columns-1 md:columns-2 2xl:columns-3 4xl:columns-4 gap-x-12 space-y-6">
+	<div class="columns-1 gap-x-12 space-y-6 md:columns-2 2xl:columns-3 4xl:columns-4">
 		<ScopeParam
 			bind:selectedScopes
 			bind:customScope
diff --git a/src/lib/components/AuthorizationResponse.svelte b/src/lib/components/AuthorizationResponse.svelte
index e48d437..ddd53ca 100644
--- a/src/lib/components/AuthorizationResponse.svelte
+++ b/src/lib/components/AuthorizationResponse.svelte
@@ -8,10 +8,10 @@
 
 <section
 	id="authz-response-container"
-	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6 scroll-mt-5"
+	class="relative w-full scroll-mt-5 rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
 >
 	<span
-		class="absolute -mt-8 bg-white dark:bg-gray-1000 px-2 -mx-2 text-charcoal/70 dark:text-gray/70 uppercase text-xs font-mono"
+		class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
 		>Authorization Response</span
 	>
 
@@ -42,6 +42,6 @@
 			{/if}
 		</div>
 	{:else}
-		<p class="text-sm text-center my-4 opacity-70">Nothing to see here yet</p>
+		<p class="my-4 text-center text-sm opacity-70">Nothing to see here yet</p>
 	{/if}
 </section>
diff --git a/src/lib/components/ChevronY.svelte b/src/lib/components/ChevronY.svelte
index 1899469..90ba4cb 100644
--- a/src/lib/components/ChevronY.svelte
+++ b/src/lib/components/ChevronY.svelte
@@ -8,7 +8,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="3"
 	stroke="currentColor"
-	class="w-4 h-4 mt-0.5"
+	class="mt-0.5 h-4 w-4"
 	class:rotate-180={dir === 'up'}
 >
 	<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
diff --git a/src/lib/components/CopyButton.svelte b/src/lib/components/CopyButton.svelte
index b98a331..13086e0 100644
--- a/src/lib/components/CopyButton.svelte
+++ b/src/lib/components/CopyButton.svelte
@@ -15,7 +15,7 @@
 <button
 	onclick={copy}
 	use:tippy={{ content: 'Copy', placement: 'right' }}
-	class="w-6 h-6 flex items-center justify-center {css} rounded-md bg-white dark:bg-charcoal"
+	class="flex h-6 w-6 items-center justify-center {css} rounded-md bg-white dark:bg-charcoal"
 >
 	{#if copied}
 		<svg
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index f346c2f..e41a051 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -19,10 +19,10 @@
 </script>
 
 <header
-	class="text-white dark:text-gray flex-shrink-0 bg-charcoal h-12 flex items-center justify-between px-4 font-medium text-lg"
+	class="flex h-12 flex-shrink-0 items-center justify-between bg-charcoal px-4 text-lg font-medium text-white dark:text-gray"
 >
-	<div class="w-1/3 inline-flex items-center">
-		<button onclick={() => (mobileMenu = !mobileMenu)} class="md:hidden mr-2 group">
+	<div class="inline-flex w-1/3 items-center">
+		<button onclick={() => (mobileMenu = !mobileMenu)} class="group mr-2 md:hidden">
 			{#if mobileMenu}
 				<CloseIcon />
 			{:else}
@@ -32,19 +32,19 @@
 		<a
 			href="https://hello.dev"
 			target="_blank"
-			class="hidden md:inline-flex items-center relative nav-link font-normal hover:underline"
+			class="nav-link relative hidden items-center font-normal hover:underline md:inline-flex"
 		>
 			<span>hello.dev</span>
 			<ExternalLinkIcon />
 		</a>
 	</div>
-	<span class="md:w-1/3 flex justify-center flex-shrink-0">
+	<span class="flex flex-shrink-0 justify-center md:w-1/3">
 		<img src="logo.svg" alt="Hellō Playground" />
 	</span>
-	<div class="w-1/3 flex justify-end space-x-4">
-		<ul class="hidden md:flex space-x-4">
+	<div class="flex w-1/3 justify-end space-x-4">
+		<ul class="hidden space-x-4 md:flex">
 			{#each navLinks as { text, link }}
-				<li class="nav-link text-sm font-normal relative">
+				<li class="nav-link relative text-sm font-normal">
 					<a href={link} target="_blank" class="inline-flex items-center hover:underline">
 						{text}
 						<ExternalLinkIcon />
@@ -56,7 +56,7 @@
 
 	{#if mobileMenu}
 		<div
-			class="bg-charcoal md:hidden absolute left-0 top-12 w-full px-4 z-50 min-w-[320px]"
+			class="absolute left-0 top-12 z-50 w-full min-w-[320px] bg-charcoal px-4 md:hidden"
 			transition:slide={{ duration: 150 }}
 		>
 			<ul class="flex flex-col gap-y-3 pb-4 text-base">
@@ -95,7 +95,7 @@
 					mobileMenu = false;
 				}
 			}}
-			class="md:hidden fixed top-12 left-0 z-40 bg-black bg-opacity-60 w-full h-full"
+			class="fixed left-0 top-12 z-40 h-full w-full bg-black bg-opacity-60 md:hidden"
 		></div>
 	{/if}
 </header>
diff --git a/src/lib/components/Icons/ExternalLinkIcon.svelte b/src/lib/components/Icons/ExternalLinkIcon.svelte
index f8382db..90ae43e 100644
--- a/src/lib/components/Icons/ExternalLinkIcon.svelte
+++ b/src/lib/components/Icons/ExternalLinkIcon.svelte
@@ -1,6 +1,6 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	class="h-4 ml-1"
+	class="ml-1 h-4"
 	fill="none"
 	viewBox="0 0 24 24"
 	stroke="currentColor"
diff --git a/src/lib/components/Inputs/DomainHintInput.svelte b/src/lib/components/Inputs/DomainHintInput.svelte
index 4e1a677..cd3863a 100644
--- a/src/lib/components/Inputs/DomainHintInput.svelte
+++ b/src/lib/components/Inputs/DomainHintInput.svelte
@@ -8,13 +8,13 @@
 
 <input
 	type="text"
-	class="border w-full form-input h-6 px-2"
+	class="form-input h-6 w-full border px-2"
 	class:opacity-50={!selected}
 	bind:value
 />
 
 {#if invalidSlugs?.length}
-	<p class="text-red-500 text-xs mt-2" transition:slide={{ duration: 150 }}>
+	<p class="mt-2 text-xs text-red-500" transition:slide={{ duration: 150 }}>
 		{invalidSlugs}
 		{invalidSlugs.length > 1 ? 'are unsupported values' : 'is an unsupported value'}
 	</p>
diff --git a/src/lib/components/Inputs/ProviderHintInput.svelte b/src/lib/components/Inputs/ProviderHintInput.svelte
index 0d17096..1a66c2d 100644
--- a/src/lib/components/Inputs/ProviderHintInput.svelte
+++ b/src/lib/components/Inputs/ProviderHintInput.svelte
@@ -29,7 +29,7 @@
 
 <input
 	type="text"
-	class="border w-full form-input h-6 px-2"
+	class="form-input h-6 w-full border px-2"
 	class:opacity-50={!selected}
 	oninput={validate}
 	placeholder={PROVIDER_HINT?.PLACEHOLDER}
@@ -37,7 +37,7 @@
 />
 
 {#if invalidSlugs?.length}
-	<p class="text-red-500 text-xs mt-2" transition:slide={{ duration: 150 }}>
+	<p class="mt-2 text-xs text-red-500" transition:slide={{ duration: 150 }}>
 		{invalidSlugs}
 		{invalidSlugs.length > 1 ? 'are unsupported values' : 'is an unsupported value'}
 	</p>
diff --git a/src/lib/components/Notification.svelte b/src/lib/components/Notification.svelte
index ee959c7..5c338ac 100644
--- a/src/lib/components/Notification.svelte
+++ b/src/lib/components/Notification.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="bg-red-500 px-2.5 h-11 md:h-9 text-center text-white flex items-center justify-center"
+	class="flex h-11 items-center justify-center bg-red-500 px-2.5 text-center text-white md:h-9"
 	out:slide
 >
 	<span class="text-sm"
@@ -19,7 +19,7 @@
 			viewBox="0 0 24 24"
 			stroke-width="2"
 			stroke="currentColor"
-			class="w-5 h-5"
+			class="h-5 w-5"
 		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 		</svg>
diff --git a/src/lib/components/Request/AuthorizationServer.svelte b/src/lib/components/Request/AuthorizationServer.svelte
index 61bb32f..552ffa5 100644
--- a/src/lib/components/Request/AuthorizationServer.svelte
+++ b/src/lib/components/Request/AuthorizationServer.svelte
@@ -18,7 +18,7 @@
 		class="inline-flex items-center space-x-2"
 		onclick={() => (dropdowns.server = !dropdowns.server)}
 	>
-		<span class="font-medium text-base"> Authorization Server </span>
+		<span class="text-base font-medium"> Authorization Server </span>
 		<ChevronY dir={dropdowns.server ? 'up' : 'down'} />
 	</button>
 	{#if dropdowns.server}
@@ -27,7 +27,7 @@
 			...AUTHZ_SERVERS.SERVERS,
 			...(showHelloExtended ? AUTHZ_SERVERS.HELLO_EXTEND_SERVERS : [])
 		]}
-		<ul class="space-y-2 mt-2" transition:slide|local={{ duration: 150 }}>
+		<ul class="mt-2 space-y-2" transition:slide|local={{ duration: 150 }}>
 			{#each ALL_AUTHZ_SERVERS as server}
 				<li class="flex items-center">
 					<input
@@ -43,7 +43,7 @@
 					{:then validateOk}
 						<label
 							for={server}
-							class="ml-2 break-all w-full md:w-auto truncate"
+							class="ml-2 w-full truncate break-all md:w-auto"
 							class:text-red-500={!validateOk}>{server}</label
 						>
 						<CopyButton content={server} css="opacity-70 ml-1" />
@@ -63,7 +63,7 @@
 					form="custom-authz-server"
 					type="url"
 					name="authz-server"
-					class="h-6 ml-2 w-full text-charcoal form-input"
+					class="form-input ml-2 h-6 w-full text-charcoal"
 					placeholder="https://domain.example/"
 					oninput={() => (selectedAuthzServer = 'custom-authz-server')}
 					bind:value={customAuthzServer}
diff --git a/src/lib/components/Request/HelloModeToggle.svelte b/src/lib/components/Request/HelloModeToggle.svelte
index 7674427..d193c8a 100644
--- a/src/lib/components/Request/HelloModeToggle.svelte
+++ b/src/lib/components/Request/HelloModeToggle.svelte
@@ -2,7 +2,7 @@
 	let { isHelloMode = $bindable() } = $props();
 </script>
 
-<div class="flex items-center absolute absolute top-4 md:-top-3 right-2 md:right-18">
+<div class="absolute absolute right-2 top-4 flex items-center md:-top-3 md:right-18">
 	<div>
 		<input
 			id="mode-hello"
@@ -27,6 +27,6 @@
 
 <style>
 	label {
-		@apply cursor-pointer select-none px-3 h-[22px] w-14 block flex border-y items-center justify-center border-charcoal dark:border-gray-800 text-xs bg-white dark:bg-gray-1000 peer-checked:bg-charcoal peer-checked:text-white;
+		@apply block flex h-[22px] w-14 cursor-pointer select-none items-center justify-center border-y border-charcoal bg-white px-3 text-xs peer-checked:bg-charcoal peer-checked:text-white dark:border-gray-800 dark:bg-gray-1000;
 	}
 </style>
diff --git a/src/lib/components/Request/HelloParams.svelte b/src/lib/components/Request/HelloParams.svelte
index 1d2f728..780d4db 100644
--- a/src/lib/components/Request/HelloParams.svelte
+++ b/src/lib/components/Request/HelloParams.svelte
@@ -21,7 +21,7 @@
 		class="inline-flex items-center space-x-2"
 		onclick={() => (dropdowns.hello = !dropdowns.hello)}
 	>
-		<span class="font-medium text-base"> Hellō Parameters </span>
+		<span class="text-base font-medium"> Hellō Parameters </span>
 		<ChevronY dir={dropdowns.hello ? 'up' : 'down'} />
 		<Tooltip
 			content="Hellō Parameters Docs"
@@ -34,7 +34,7 @@
 			...PARAMS.HELLO_PARAM.PARAMS,
 			...(showHelloExtended ? PARAMS.HELLO_PARAM.HELLO_EXTEND_PARAMS : [])
 		]}
-		<ul class="flex flex-col justify-center mt-2 space-y-2" transition:slide={{ duration: 150 }}>
+		<ul class="mt-2 flex flex-col justify-center space-y-2" transition:slide={{ duration: 150 }}>
 			{#each ALL_HELLO_PARAMS as param}
 				{@const required = PARAMS.HELLO_PARAM.REQUIRED.includes(param.NAME)}
 				{@const selected = selectedHelloParams.includes(param.NAME)}
@@ -49,7 +49,7 @@
 					<hr class="border-charcoal dark:border-gray-800" />
 				{/if}
 
-				<li class="flex flex-col md:flex-row items-start">
+				<li class="flex flex-col items-start md:flex-row">
 					<div class="flex items-center space-x-2">
 						<input
 							type="checkbox"
@@ -58,11 +58,11 @@
 							bind:group={selectedHelloParams}
 							value={param.NAME}
 						/>
-						<label for={param.NAME} class="font-normal w-48" class:text-red-500={!validateOk}
+						<label for={param.NAME} class="w-48 font-normal" class:text-red-500={!validateOk}
 							>{param.NAME} {required ? '*' : ''}</label
 						>
 					</div>
-					<div class="flex flex-col w-full">
+					<div class="flex w-full flex-col">
 						{#if param.NAME === 'provider_hint'}
 							<ProviderHintInput {selected} bind:value={selectedHelloParamsValues.provider_hint} />
 						{:else if param.NAME === 'domain_hint'}
@@ -70,14 +70,14 @@
 						{:else}
 							<input
 								type="text"
-								class="border w-full form-input h-6 px-2"
+								class="form-input h-6 w-full border px-2"
 								class:opacity-50={!selected}
 								bind:value={selectedHelloParamsValues[param.NAME]}
 								placeholder={param.PLACEHOLDER}
 							/>
 						{/if}
 						{#if param.HINT}
-							<p class="text-xs opacity-70 mt-1">
+							<p class="mt-1 text-xs opacity-70">
 								{param.HINT}
 							</p>
 						{/if}
diff --git a/src/lib/components/Request/InviteRequest.svelte b/src/lib/components/Request/InviteRequest.svelte
index 17ab8bd..9c6179f 100644
--- a/src/lib/components/Request/InviteRequest.svelte
+++ b/src/lib/components/Request/InviteRequest.svelte
@@ -13,16 +13,16 @@
 </script>
 
 <section
-	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6"
+	class="relative w-full rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
 >
 	<span
-		class="absolute -mt-8 bg-white dark:bg-gray-1000 px-2 -mx-2 text-charcoal/70 dark:text-gray/70 uppercase text-xs font-mono"
+		class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
 		>Invite Request</span
 	>
-	<div class="max-w-lg mx-auto">
+	<div class="mx-auto max-w-lg">
 		{#if canInvite}
 			<div
-				class="overflow-x-auto bg-[#F2F6FB] dark:bg-charcoal rounded-sm p-4 break-words relative"
+				class="relative overflow-x-auto break-words rounded-sm bg-[#F2F6FB] p-4 dark:bg-charcoal"
 			>
 				<span class="absolute right-4 top-4">
 					<CopyButton content={inviteUrl} />
@@ -36,11 +36,11 @@
 
 		<button
 			onclick={inviteWithHello}
-			class="hello-btn-black-and-static hello-btn-hover-flare w-full disabled:opacity-30 mt-3"
+			class="hello-btn-black-and-static hello-btn-hover-flare mt-3 w-full disabled:opacity-30"
 			class:hello-btn-loader={inviteWithHelloAjax}
 			disabled={inviteWithHelloAjax || !canInvite}>Invite others to Playground</button
 		>
-		<p class="text-sm text-center mt-2 opacity-70">
+		<p class="mt-2 text-center text-sm opacity-70">
 			{#if canInvite}
 				Use this to test sending invitations
 			{:else}
diff --git a/src/lib/components/Request/ProtocolParams.svelte b/src/lib/components/Request/ProtocolParams.svelte
index 5ac778a..c70f548 100644
--- a/src/lib/components/Request/ProtocolParams.svelte
+++ b/src/lib/components/Request/ProtocolParams.svelte
@@ -19,7 +19,7 @@
 		class="inline-flex items-center space-x-2"
 		onclick={() => (dropdowns.protocol = !dropdowns.protocol)}
 	>
-		<span class="font-medium text-base"> Protocol Parameters </span>
+		<span class="text-base font-medium"> Protocol Parameters </span>
 		<ChevronY dir={dropdowns.protocol ? 'up' : 'down'} />
 		<Tooltip
 			content="Protocol Parameters Docs"
@@ -27,7 +27,7 @@
 		/>
 	</button>
 	{#if dropdowns.protocol}
-		<ul class="flex flex-col mt-2 space-y-2" transition:slide={{ duration: 150 }}>
+		<ul class="mt-2 flex flex-col space-y-2" transition:slide={{ duration: 150 }}>
 			{#each PARAMS.PROTOCOL_PARAM.PARAMS as param}
 				{@const required = PARAMS.PROTOCOL_PARAM.REQUIRED.includes(param.NAME)}
 				{@const selected = selectedProtocolParams.includes(param.NAME)}
@@ -41,7 +41,7 @@
 					helloParamsValues: selectedHelloParamsValues
 				})}
 				{@const error = !requiredOk || !needsOk}
-				<li class="flex flex-col md:flex-row items-start">
+				<li class="flex flex-col items-start md:flex-row">
 					<div class="flex items-center space-x-2">
 						<input
 							type="checkbox"
@@ -53,14 +53,14 @@
 						/>
 						<label
 							for={param.NAME}
-							class="font-normal w-48"
+							class="w-48 font-normal"
 							class:pointer-events-none={param.CHECKBOX_HIDDEN}
 							class:text-red-500={error}>{param.NAME} {required ? '*' : ''}</label
 						>
 					</div>
 					{#if Array.isArray(param.POSSIBLE_VALUE)}
 						<ul
-							class="xl:h-8 p-1 gap-1 w-full ring-1 ring-charcoal dark:ring-gray-800 flex flex-col xl:flex-row items-center rounded-sm"
+							class="flex w-full flex-col items-center gap-1 rounded-sm p-1 ring-1 ring-charcoal xl:h-8 xl:flex-row dark:ring-gray-800"
 							class:opacity-50={!selected}
 						>
 							{#each param.POSSIBLE_VALUE as value}
@@ -72,7 +72,7 @@
 											id={value}
 											{value}
 											bind:group={selectedProtocolParamsValues[param.NAME]}
-											class="!hidden peer"
+											class="peer !hidden"
 										/>
 									{:else}
 										<input
@@ -81,12 +81,12 @@
 											id={value}
 											{value}
 											bind:group={selectedProtocolParamsValues[param.NAME]}
-											class="!hidden peer"
+											class="peer !hidden"
 										/>
 									{/if}
 									<label
 										for={value}
-										class="peer-checked:bg-charcoal peer-checked:ring-1 ring-charcoal dark:ring-gray-800 block flex justify-center items-center w-full cursor-pointer peer-checked:text-white peer-checked:dark:text-gray"
+										class="block flex w-full cursor-pointer items-center justify-center ring-charcoal peer-checked:bg-charcoal peer-checked:text-white peer-checked:ring-1 dark:ring-gray-800 peer-checked:dark:text-gray"
 									>
 										{value}
 									</label>
@@ -96,7 +96,7 @@
 					{:else}
 						<input
 							type="text"
-							class="border w-full form-input h-6 px-2"
+							class="form-input h-6 w-full border px-2"
 							class:opacity-50={!selected}
 							bind:value={selectedProtocolParamsValues[param.NAME]}
 							placeholder={param.PLACEHOLDER}
diff --git a/src/lib/components/Request/RequestUrl.svelte b/src/lib/components/Request/RequestUrl.svelte
index b82a41c..62d4d76 100644
--- a/src/lib/components/Request/RequestUrl.svelte
+++ b/src/lib/components/Request/RequestUrl.svelte
@@ -26,7 +26,7 @@
 				viewBox="0 0 24 24"
 				stroke-width="3"
 				stroke="currentColor"
-				class="w-4 h-4"
+				class="h-4 w-4"
 				class:rotate-180={dropdowns.request}
 			>
 				<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
@@ -36,7 +36,7 @@
 	{#if dropdowns.request}
 		<div class="relative" transition:slide={{ duration: 150 }}>
 			<div
-				class="bg-[#F2F6FB] dark:bg-charcoal rounded-sm p-4 break-words mt-2 relative overflow-x-auto"
+				class="relative mt-2 overflow-x-auto break-words rounded-sm bg-[#F2F6FB] p-4 dark:bg-charcoal"
 			>
 				<span class="absolute right-4 top-4">
 					<CopyButton content={authzUrl} />
@@ -51,7 +51,7 @@
 	<!-- class:hello-btn-hover-flare={darkMode} -->
 	<button
 		onclick={continueWithHello}
-		class="hello-btn-black-and-static hello-btn-hover-flare w-full flex mt-3"
+		class="hello-btn-black-and-static hello-btn-hover-flare mt-3 flex w-full"
 		class:hello-btn-loader={continueWithHelloAjax}
 		disabled={continueWithHelloAjax}>ō&nbsp;&nbsp;&nbsp;Continue with Hellō</button
 	>
diff --git a/src/lib/components/Request/ScopeParam.svelte b/src/lib/components/Request/ScopeParam.svelte
index 24a1269..319f60d 100644
--- a/src/lib/components/Request/ScopeParam.svelte
+++ b/src/lib/components/Request/ScopeParam.svelte
@@ -22,13 +22,13 @@
 		class="inline-flex items-center space-x-2"
 		onclick={() => (dropdowns.scope = !dropdowns.scope)}
 	>
-		<span class="font-medium text-base"> Scope Parameter </span>
+		<span class="text-base font-medium"> Scope Parameter </span>
 		<ChevronY dir={dropdowns.scope ? 'up' : 'down'} />
 		<Tooltip content="Scope Parameter Docs" href="https://www.hello.dev/docs/scopes/" />
 	</button>
 
 	{#if isOverridden}
-		<p class="opacity-70 text-xs italic mt-1">
+		<p class="mt-1 text-xs italic opacity-70">
 			Overridden with 'scope' in Protocol Parameters section
 		</p>
 	{/if}
@@ -44,12 +44,12 @@
 			...(showHelloExtended ? PARAMS.SCOPE_PARAM.HELLO_EXTEND_NON_STANDARD : [])
 		]}
 		<div
-			class="flex mt-2 space-x-2"
+			class="mt-2 flex space-x-2"
 			transition:slide={{ duration: 150 }}
 			class:opacity-50={isOverridden}
 			class:pointer-events-none={isOverridden}
 		>
-			<ul class="space-y-2 w-40 md:w-48">
+			<ul class="w-40 space-y-2 md:w-48">
 				{#each ALL_STANDARD_SCOEPS as stdScope}
 					{@const required = PARAMS.SCOPE_PARAM.REQUIRED.includes(stdScope)}
 					{@const selected = selectedScopes.includes(stdScope)}
@@ -70,7 +70,7 @@
 				{/each}
 			</ul>
 
-			<ul class="space-y-2 w-40 md:w-48">
+			<ul class="w-40 space-y-2 md:w-48">
 				{#each ALL_NON_STANDARD_SCOPES as nonStdScope}
 					<li class="flex flex-row items-center space-x-2">
 						<input
@@ -80,7 +80,7 @@
 							value={nonStdScope}
 							bind:group={selectedScopes}
 						/>
-						<label for={nonStdScope} class="italic truncate">{nonStdScope}</label>
+						<label for={nonStdScope} class="truncate italic">{nonStdScope}</label>
 					</li>
 				{/each}
 
@@ -96,7 +96,7 @@
 						class:opacity-50={!selectedScopes.includes('custom-scope')}
 						form="custom-scope"
 						type="text"
-						class="h-6 px-2 w-32 md:w-40 form-input italic"
+						class="form-input h-6 w-32 px-2 italic md:w-40"
 						autocomplete="off"
 						autocorrect="off"
 						autocapitalize="off"
diff --git a/src/lib/components/Response/Claims.svelte b/src/lib/components/Response/Claims.svelte
index a7c1874..8ef517f 100644
--- a/src/lib/components/Response/Claims.svelte
+++ b/src/lib/components/Response/Claims.svelte
@@ -19,19 +19,19 @@
 	<div class="flex flex-col items-start text-left">
 		<span class="font-medium" style="word-break: break-word;">Claims</span>
 	</div>
-	<ul class="mt-2 break-words text-sm font-sans flex flex-col overflow-x-auto">
+	<ul class="mt-2 flex flex-col overflow-x-auto break-words font-sans text-sm">
 		{#each ALL_SCOPES.filter((i) => payload[i]) as claim}
 			{@const isString = typeof payload[claim] == 'string'}
 			<li
-				class="py-2 flex flex-col md:flex-row items-start md:items-center odd:bg-[#F2F6FB] odd:dark:bg-charcoal/60 rounded-md px-2"
+				class="flex flex-col items-start rounded-md px-2 py-2 odd:bg-[#F2F6FB] md:flex-row md:items-center odd:dark:bg-charcoal/60"
 			>
-				<div class="w-full md:w-1/3 flex-shrink-0 font-medium">{claim}</div>
+				<div class="w-full flex-shrink-0 font-medium md:w-1/3">{claim}</div>
 				<div class="flex items-center space-x-2">
 					{#if claim === 'picture' && payload[claim]}
 						<!-- svelte-ignore a11y_img_redundant_alt -->
 						<img
 							src={payload[claim]}
-							class="h-10 w-10 rounded-full object-fit"
+							class="object-fit h-10 w-10 rounded-full"
 							alt="Picture claim"
 						/>
 						<a href={payload[claim]} target="_blank" class="text-xs opacity-70 hover:underline"
diff --git a/src/lib/components/Response/JsonResponse.svelte b/src/lib/components/Response/JsonResponse.svelte
index a062596..0300d79 100644
--- a/src/lib/components/Response/JsonResponse.svelte
+++ b/src/lib/components/Response/JsonResponse.svelte
@@ -10,7 +10,7 @@
 		<span class="font-medium" style="word-break: break-word;">{label}</span>
 		<CopyText content={JSON.stringify(json, null, 2)} />
 	</div>
-	<p class="mt-2 break-words text-sm font-sans">
+	<p class="mt-2 break-words font-sans text-sm">
 		{@html highlight('json', JSON.stringify(json, null, 2))}
 	</p>
 </section>
diff --git a/src/lib/constants.js b/src/lib/constants.js
index c33734f..01d64b4 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -109,7 +109,7 @@ const PROVIDER_HINTS = [
 	'zoho',
 	'email',
 	'ethereum',
-	'qrcode',
+	'qrcode'
 ].sort();
 
 const HELLO_PARAM = {
@@ -117,9 +117,7 @@ const HELLO_PARAM = {
 		{
 			NAME: 'provider_hint',
 			POSSIBLE_VALUE: PROVIDER_HINTS,
-			HINT: [...PROVIDER_HINTS, 'apple--', 'microsoft--', 'google-', 'email--'].join(
-				' '
-			),
+			HINT: [...PROVIDER_HINTS, 'apple--', 'microsoft--', 'google-', 'email--'].join(' '),
 			ONLY_ONE: false,
 			PLACEHOLDER: 'space separated'
 		},