diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index 1c69585..657c18f 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -42,20 +42,20 @@
 </script>
 
 <div
-	class="bg-blur-md bg-white/80 dark:bg-black dark:text-white md:flex-row md:px-8 flex items-center justify-between px-4 border-b border-gray-500"
+	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white md:flex-row md:px-8"
 >
-	<div class="md:flex-none flex items-center justify-between flex-1">
-		<div class="md:w-auto flex justify-between w-full gap-4 px-2 py-2">
+	<div class="flex flex-1 items-center justify-between md:flex-none">
+		<div class="flex w-full justify-between gap-4 px-2 py-2 md:w-auto">
 			<div>
 				<a href="/">
 					<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
 				</a>
 			</div>
 
-			<div class="md:hidden flex items-center justify-end">
+			<div class="flex items-center justify-end md:hidden">
 				<button on:click={toggleNavbar}>
 					<svg
-						class="burger-icon dark:text-white w-6 h-6 text-gray-900"
+						class="burger-icon h-6 w-6 text-gray-900 dark:text-white"
 						fill="none"
 						stroke="currentColor"
 						viewBox="0 0 24 24"
@@ -72,17 +72,17 @@
 			</div>
 		</div>
 
-		<div class="md:flex items-center hidden gap-4 px-2 py-2">
+		<div class="hidden items-center gap-4 px-2 py-2 md:flex">
 			{#if PUBLIC_OBA_SEARCH_ENABLED === 'true'}
-				<div class="max-w-md mx-auto">
+				<div class="mx-auto max-w-md">
 					<label
 						for="default-search"
-						class="dark:text-white mb-2 text-sm font-medium text-gray-900 sr-only">Search</label
+						class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white">Search</label
 					>
 					<div class="relative">
-						<div class="start-0 ps-3 absolute inset-y-0 flex items-center pointer-events-none">
+						<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
 							<svg
-								class="dark:text-gray-400 w-4 h-4 text-gray-500"
+								class="h-4 w-4 text-gray-500 dark:text-gray-400"
 								aria-hidden="true"
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
@@ -100,7 +100,7 @@
 						<input
 							type="search"
 							id="search"
-							class="bg-gray-50 ps-10 dark:border-gray-600 dark:placeholder-gray-400 block w-full p-2 text-sm text-gray-900 border border-gray-300 rounded-full"
+							class="block w-full rounded-full border border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 dark:border-gray-600 dark:placeholder-gray-400"
 							placeholder="Search a stop or route"
 							required
 							bind:value={searchInput}
@@ -110,10 +110,10 @@
 				</div>
 			{/if}
 
-			<div class="gap-x-4 flex">
+			<div class="flex gap-x-4">
 				{#each Object.entries(headerLinks) as [key, value]}
-					<div class="bg-white/80 dark:bg-gray-800 border rounded-md">
-						<a href={value} class="dark:text-white block px-2 py-1 font-semibold text-gray-900"
+					<div class="rounded-md border bg-white/80 dark:bg-gray-800">
+						<a href={value} class="block px-2 py-1 font-semibold text-gray-900 dark:text-white"
 							>{key}</a
 						>
 					</div>
@@ -122,19 +122,19 @@
 		</div>
 	</div>
 
-	<div class="md:flex hidden">
+	<div class="hidden md:flex">
 		<ThemeSwitcher />
 	</div>
 </div>
 
 {#if isMobileMenuOpen}
 	<div
-		class="dark:bg-black md:hidden fixed inset-0 z-50 flex flex-col items-center justify-center p-4 space-y-6 bg-white"
+		class="fixed inset-0 z-50 flex flex-col items-center justify-center space-y-6 bg-white p-4 dark:bg-black md:hidden"
 		transition:fly={{ x: 1000, duration: 300 }}
 	>
 		<button on:click={toggleNavbar}>
 			<svg
-				class="close-icon dark:text-white w-6 h-6 text-gray-900"
+				class="close-icon h-6 w-6 text-gray-900 dark:text-white"
 				fill="none"
 				stroke="currentColor"
 				viewBox="0 0 24 24"
@@ -153,7 +153,7 @@
 			{#each Object.entries(headerLinks) as [key, value]}
 				<a
 					href={value}
-					class="dark:text-white block text-xl font-semibold text-gray-900"
+					class="block text-xl font-semibold text-gray-900 dark:text-white"
 					on:click={toggleNavbar}>{key}</a
 				>
 			{/each}