diff --git a/app/library/language-switcher/LanguageSwitcher.tsx b/app/library/language-switcher/LanguageSwitcher.tsx
index 3602fba9..4e030f81 100644
--- a/app/library/language-switcher/LanguageSwitcher.tsx
+++ b/app/library/language-switcher/LanguageSwitcher.tsx
@@ -8,10 +8,10 @@ const LanguageSwitcher = () => {
 	const location = useLocation()
 
 	return (
-		<div className="flex gap-2 p-2 fixed top-0 right-0 w-min z-10">
+		<div className="fixed top-0 right-0 z-10 flex w-min gap-2 p-2">
 			{supportedLanguages.map((language) => (
 				<Link
-					className="text-blue-500 dark:text-white hover:underline transition-all"
+					className="text-blue-500 transition-all hover:underline dark:text-white"
 					key={language}
 					to={`${location.pathname}`}
 					// We override the default appending of the language to the search params via our language
diff --git a/app/root.tsx b/app/root.tsx
index 0d50a40c..4993c0c6 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -42,7 +42,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 				<Meta />
 				<Links />
 			</head>
-			<body className="w-full h-full">
+			<body className="h-full w-full">
 				<LanguageSwitcher />
 				{children}
 				<ScrollRestoration />
@@ -75,11 +75,11 @@ export const ErrorBoundary = () => {
 	const errorStatusCode = statusCode()
 
 	return (
-		<div className="placeholder-index relative h-full min-h-screen w-screen flex items-center bg-gradient-to-b from-gray-50 to-gray-100 dark:from-blue-950 dark:to-blue-900 justify-center dark:bg-white sm:pb-16 sm:pt-8">
+		<div className="relative flex h-full min-h-screen w-screen items-center justify-center bg-gradient-to-b from-gray-50 to-gray-100 placeholder-index sm:pt-8 sm:pb-16 dark:bg-white dark:from-blue-950 dark:to-blue-900">
 			<div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8">
-				<div className="relative  min-h-72 flex flex-col justify-center sm:overflow-hidden sm:rounded-2xl p-1 md:p-4 lg:p-6">
-					<h1 className="text-center w-full text-red-600 text-2xl pb-2">{t(`error.${errorStatusCode}.title`)}</h1>
-					<p className="text-lg dark:text-white text-center w-full">{t(`error.${errorStatusCode}.description`)}</p>
+				<div className="relative flex min-h-72 flex-col justify-center p-1 sm:overflow-hidden sm:rounded-2xl md:p-4 lg:p-6">
+					<h1 className="w-full pb-2 text-center text-2xl text-red-600">{t(`error.${errorStatusCode}.title`)}</h1>
+					<p className="w-full text-center text-lg dark:text-white">{t(`error.${errorStatusCode}.description`)}</p>
 				</div>
 			</div>
 		</div>
diff --git a/app/routes/$.tsx b/app/routes/$.tsx
index 32945290..bba99ccf 100644
--- a/app/routes/$.tsx
+++ b/app/routes/$.tsx
@@ -8,27 +8,27 @@ export default function Route404() {
 	const { t } = useTranslation()
 	const to = href("/")
 	return (
-		<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-blue-950 dark:to-blue-900 dark:text-white flex items-center justify-center p-4">
-			<div className="max-w-2xl w-full text-center">
+		<div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-gray-50 to-gray-100 p-4 dark:from-blue-950 dark:to-blue-900 dark:text-white">
+			<div className="w-full max-w-2xl text-center">
 				<div className="mb-8 flex justify-center">
-					<Icon name="Ghost" className="h-24 w-24 text-indigo-600 animate-float" />
+					<Icon name="Ghost" className="h-24 w-24 animate-float text-indigo-600" />
 				</div>
 
-				<h1 className="text-6xl font-bold dark:text-white text-gray-900 mb-4">404</h1>
-				<h2 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">{t("error.404.title")}</h2>
-				<p className="text-gray-600 dark:text-white mb-8 text-lg">{t("error.404.description")}</p>
+				<h1 className="mb-4 font-bold text-6xl text-gray-900 dark:text-white">404</h1>
+				<h2 className="mb-4 font-semibold text-3xl text-gray-800 dark:text-white">{t("error.404.title")}</h2>
+				<p className="mb-8 text-gray-600 text-lg dark:text-white">{t("error.404.description")}</p>
 
-				<div className="flex flex-col sm:flex-row gap-4 justify-center">
+				<div className="flex flex-col justify-center gap-4 sm:flex-row">
 					<button
 						type="button"
 						onClick={() => navigate(-1)}
-						className="inline-flex cursor-pointer items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors duration-300"
+						className="inline-flex cursor-pointer items-center justify-center rounded-md border border-transparent bg-indigo-100 px-6 py-3 font-medium text-base text-indigo-700 transition-colors duration-300 hover:bg-indigo-200"
 					>
 						{t("navigation.back")}
 					</button>
 					<Link
 						to={to}
-						className="inline-flex cursor-pointer items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-300"
+						className="inline-flex cursor-pointer items-center justify-center rounded-md border border-transparent bg-indigo-600 px-6 py-3 font-medium text-base text-white transition-colors duration-300 hover:bg-indigo-700"
 					>
 						{t("navigation.home")}
 					</Link>
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index d9b47d58..b98e7d40 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -19,18 +19,18 @@ export default function Index({ loaderData }: Route.ComponentProps) {
 	const { t } = useTranslation()
 
 	return (
-		<div className="placeholder-index relative h-full min-h-screen w-screen dark:bg-gradient-to-b bg-white  dark:from-blue-950 dark:to-blue-900 dark:text-white sm:pb-16 sm:pt-8">
+		<div className="relative h-full min-h-screen w-screen bg-white placeholder-index sm:pt-8 sm:pb-16 dark:bg-gradient-to-b dark:from-blue-950 dark:to-blue-900 dark:text-white">
 			<div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8">
 				<div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
 					<section className="absolute inset-0">
 						<img className="h-full w-full object-cover" src="/banner.png" alt="Cover" />
 						<div className="absolute inset-0 bg-slate-950/60 mix-blend-multiply" />
 					</section>
-					<section className="lg:pb-18 relative px-4 pb-8 pt-16 sm:px-6 sm:pb-14 sm:pt-24 lg:px-8 lg:pt-32">
-						<h1 className="select-none overflow-hidden text-center text-7xl font-medium sm:text-6xl lg:text-8xl">
-							<span className="block pb-2 pr-2 text-center font-space uppercase text-white drop-shadow-md">
-								<img className="rounded-full size-80 m-auto" src="/logo.png" alt="Forge42 Logo" />
-								<span className="block h-full bg-gradient-to-tr from-[#48DDF3] to-[#FB4BB5] bg-clip-text pb-1 pr-1 text-center text-transparent dark:from-indigo-500 dark:to-sky-300 sm:inline sm:pb-0">
+					<section className="relative px-4 pt-16 pb-8 sm:px-6 sm:pt-24 sm:pb-14 lg:px-8 lg:pt-32 lg:pb-18">
+						<h1 className="select-none overflow-hidden text-center font-medium text-7xl sm:text-6xl lg:text-8xl">
+							<span className="block pr-2 pb-2 text-center font-space text-white uppercase drop-shadow-md">
+								<img className="m-auto size-80 rounded-full" src="/logo.png" alt="Forge42 Logo" />
+								<span className="block h-full bg-gradient-to-tr from-[#48DDF3] to-[#FB4BB5] bg-clip-text pr-1 pb-1 text-center text-transparent sm:inline sm:pb-0 dark:from-indigo-500 dark:to-sky-300">
 									Base&nbsp;
 								</span>
 								<span className="text-center">Stack</span>
@@ -42,7 +42,7 @@ export default function Index({ loaderData }: Route.ComponentProps) {
 							<a
 								href="https://github.com/forge42dev/base-stack"
 								target={"_blank"}
-								className="text-white no-underline font-bold hover:cursor-pointer focus:text-white"
+								className="font-bold text-white no-underline hover:cursor-pointer focus:text-white"
 								rel="noreferrer"
 							>
 								README.md
@@ -56,8 +56,8 @@ export default function Index({ loaderData }: Route.ComponentProps) {
 				</div>
 			</div>
 
-			<div className="w-full text-center text-2xl mt-4">{t("hi")}</div>
-			<section className="absolute bottom-1 mb-2 w-full pb-1 pt-2 text-center sm:bottom-2 sm:pb-3 md:mb-0 md:mt-0">
+			<div className="mt-4 w-full text-center text-2xl">{t("hi")}</div>
+			<section className="absolute bottom-1 mb-2 w-full pt-2 pb-1 text-center sm:bottom-2 sm:pb-3 md:mt-0 md:mb-0">
 				Crafted with ❤️ / Time without timezone mismatch {timezoneDate}
 			</section>
 		</div>
diff --git a/biome.json b/biome.json
index 6a7fbd04..f2a64ad4 100644
--- a/biome.json
+++ b/biome.json
@@ -48,7 +48,15 @@
 			},
 			"nursery": {
 				"recommended": true,
-				"noProcessEnv": "error"
+				"noProcessEnv": "error",
+				"useSortedClasses": {
+					"level": "error",
+					"fix": "safe",
+					"options": {
+						"attributes": ["className"],
+						"functions": ["cn", "tw", "clsx", "twMerge"]
+					}
+				}
 			}
 		}
 	},
