diff --git a/frontend/src/lib/components/DarkModeToggle.svelte b/frontend/src/lib/components/DarkModeToggle.svelte
index 7eac8b9..0ea16a2 100644
--- a/frontend/src/lib/components/DarkModeToggle.svelte
+++ b/frontend/src/lib/components/DarkModeToggle.svelte
@@ -26,13 +26,13 @@
 
 <style>
 	svg {
-		@apply w-12 h-12;
+		@apply h-12 w-12;
 	}
 	.blue {
 		@apply stroke-sspsBlue fill-sspsBlue;
-		@apply transition-colors duration-300 hover:fill-sspsBlueDark hover:stroke-sspsBlueDark;
+		@apply hover:fill-sspsBlueDark hover:stroke-sspsBlueDark transition-colors duration-300;
 	}
 	.white {
-		@apply stroke-white fill-white;
+		@apply fill-white stroke-white;
 	}
 </style>
diff --git a/frontend/src/lib/components/PageTransition.svelte b/frontend/src/lib/components/PageTransition.svelte
index 8905a8f..1781dad 100644
--- a/frontend/src/lib/components/PageTransition.svelte
+++ b/frontend/src/lib/components/PageTransition.svelte
@@ -7,7 +7,7 @@
 	<div
 		in:fly={{ x: -5, duration: 500, delay: 500 }}
 		out:fly={{ x: 5, duration: 500 }}
-		class="absolute bg-inherit w-full h-full"
+		class="absolute h-full w-full bg-inherit"
 	>
 		<slot />
 	</div>
diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index e7b65e8..741afe7 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -31,6 +31,6 @@
 		@apply m-0;
 	}
 	.card h3 {
-		@apply text-sspsBlue text-4xl md:text-2xl xl:text-4xl font-semibold;
+		@apply text-sspsBlue text-4xl font-semibold md:text-2xl xl:text-4xl;
 	}
 </style>
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index 091471b..ef16f03 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -87,18 +87,18 @@
 	};
 </script>
 
-<div class="relative card uploadCard">
+<div class="card uploadCard relative">
 	<div class="header">
 		<h3 class="mb-4 sm:mb-0">{title}</h3>
-		<div class="mb-4 sm:mb-0 mt-1 sm:mt-0">
+		<div class="mb-4 mt-1 sm:mb-0 sm:mt-0">
 			<FileType {filetype} filesize={filesize + ' MB'} />
 		</div>
-		<div class="absolute px-7 right-0 top-4">
+		<div class="absolute right-0 top-4 px-7">
 			<StatusNotificationDot {status} />
 		</div>
 	</div>
 	{#if fileDropped}
-		<div class="body flex content-around justify-between items-center">
+		<div class="body flex content-around items-center justify-between">
 			<div class="w-24">
 				<img
 					class="w-full object-scale-down"
@@ -106,7 +106,7 @@
 					alt="Icon"
 				/>
 			</div>
-			<svg class="hidden xl:block h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
+			<svg class="h-25 hidden xl:block" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
 				><line
 					x1="0"
 					y="0"
@@ -117,12 +117,12 @@
 					stroke-dasharray="3"
 				/></svg
 			>
-			<div class="hidden xl:block items-center">
+			<div class="hidden items-center xl:block">
 				{#if bytesTotal === 0 || Math.round(progress * 100) === 100}
 					<h2 class="text-xl font-bold">{status === 'submitted' ? 'Odesláno' : 'Nahráno'}</h2>
 				{:else}
 					<h2 class="text-xl">Nahráno {((bytesTotal / 1_000_000) * progress).toFixed(1)} MB</h2>
-					<h2 class="text-xl self-center">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
+					<h2 class="self-center text-xl">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
 				{/if}
 			</div>
 			<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
@@ -137,7 +137,7 @@
 				/></svg
 			>
 			<div class="items-center text-center">
-				<h2 class="text-2xl text-sspsBlueDark font-bold mb-2">{Math.round(progress * 100)} %</h2>
+				<h2 class="text-sspsBlueDark mb-2 text-2xl font-bold">{Math.round(progress * 100)} %</h2>
 				<ProgressBar {progress} />
 			</div>
 		</div>
@@ -189,7 +189,7 @@
 		backdrop-filter: blur(15px) saturate(0.86);
 		-webkit-backdrop-filter: blur(15px) saturate(0.86);
 
-		@apply flex flex-col sm:flex-row justify-between sm:items-center;
+		@apply flex flex-col justify-between sm:flex-row sm:items-center;
 	}
 	.body {
 		@apply bg-[#f8fbfc];
@@ -198,10 +198,10 @@
 		@apply p-7;
 	}
 	.card h3 {
-		@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
+		@apply text-sspsBlue text-2xl font-semibold xl:text-4xl;
 	}
 	.card span {
-		@apply opacity-60 text-sm;
+		@apply text-sm opacity-60;
 		@apply transition-all duration-300;
 	}
 	.card .drag {
diff --git a/frontend/src/lib/components/dashboard/FileType.svelte b/frontend/src/lib/components/dashboard/FileType.svelte
index 1ab928f..807fb35 100644
--- a/frontend/src/lib/components/dashboard/FileType.svelte
+++ b/frontend/src/lib/components/dashboard/FileType.svelte
@@ -4,16 +4,16 @@
 </script>
 
 <div>
-	<span class="text-sspsBlue italic text-lg">{filetype}</span>
-	<span class="mx-2 text-sspsGray">/</span>
-	<span class="text-sspsBlue italic text-lg">Max {filesize}</span>
+	<span class="text-sspsBlue text-lg italic">{filetype}</span>
+	<span class="text-sspsGray mx-2">/</span>
+	<span class="text-sspsBlue text-lg italic">Max {filesize}</span>
 </div>
 
 <style>
 	div {
 		@apply flex items-center justify-between;
 		@apply py-1 px-4;
-		@apply bg-white rounded-xl shadow-md;
+		@apply rounded-xl bg-white shadow-md;
 
 		@apply hover:bg-sspsBlue;
 		@apply hover:cursor-pointer;
diff --git a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
index 67a6fd9..3edac4a 100644
--- a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
+++ b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
@@ -18,10 +18,10 @@
 	}
 </script>
 
-<div class="bg-white rounded-full flex mb-8">
+<div class="mb-8 flex rounded-full bg-white">
 	<div class="mt-3 mb-3 ml-3 flex flex-row">
-		<h2 class="ml-2 text-2xl text-sspsBlueDark font-bold">{title}</h2>
-		<span class="ml-32  w-8 h-8 rounded-full self-center {status}" />
+		<h2 class="text-sspsBlueDark ml-2 text-2xl font-bold">{title}</h2>
+		<span class="ml-32  h-8 w-8 self-center rounded-full {status}" />
 		<!-- <StatusNotificationDot {status} /> -->
 	</div>
 </div>
diff --git a/frontend/src/lib/components/dashboard/StatusNotificationDot.svelte b/frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
index b88fe5e..e133d4b 100644
--- a/frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
+++ b/frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
@@ -18,8 +18,8 @@
 </script>
 
 <!-- make red dot -->
-<div class="flex flex-row justify-between animate-pulse div-{status}">
-	<span class="mt-1 w-6 h-6 rounded-full {status}" />
+<div class="flex animate-pulse flex-row justify-between div-{status}">
+	<span class="mt-1 h-6 w-6 rounded-full {status}" />
 	<!-- <h3 class="ml-8 font-bold text-xl">{title}</h3> -->
 </div>
 
diff --git a/frontend/src/lib/components/icons/Circles.svelte b/frontend/src/lib/components/icons/Circles.svelte
index 347f30c..414e76e 100644
--- a/frontend/src/lib/components/icons/Circles.svelte
+++ b/frontend/src/lib/components/icons/Circles.svelte
@@ -1,7 +1,7 @@
 <div>
-	<span class="left-20 top-10 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" />
-	<span class="left-14 -top-6 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50" />
-	<span class="w-28 h-28 bg-black bg-[#55b1bd] opacity-60" />
+	<span class="left-20 top-10 h-20 w-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" />
+	<span class="left-14 -top-6 h-24 w-24 rounded-full bg-black bg-[#558cbd] opacity-50" />
+	<span class="h-28 w-28 bg-black bg-[#55b1bd] opacity-60" />
 </div>
 
 <style>
@@ -9,6 +9,6 @@
 		@apply relative;
 	}
 	span {
-		@apply shadow-md absolute rounded-full p-1;
+		@apply absolute rounded-full p-1 shadow-md;
 	}
 </style>
diff --git a/frontend/src/lib/components/icons/Email.svelte b/frontend/src/lib/components/icons/Email.svelte
index 93fb5de..6029c07 100644
--- a/frontend/src/lib/components/icons/Email.svelte
+++ b/frontend/src/lib/components/icons/Email.svelte
@@ -3,7 +3,7 @@
 <style>
 	span {
 		@apply flex items-center justify-center;
-		@apply text-center text-2xl text-sspsBlue;
+		@apply text-sspsBlue text-center text-2xl;
 		@apply pb-1;
 
 		@apply select-none;
diff --git a/frontend/src/lib/components/icons/SchoolBadge.svelte b/frontend/src/lib/components/icons/SchoolBadge.svelte
index c4897a1..9551c15 100644
--- a/frontend/src/lib/components/icons/SchoolBadge.svelte
+++ b/frontend/src/lib/components/icons/SchoolBadge.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-	class="py-3 px-6 md:py-4 md:px-8 rounded-[999px] shadow-2xl flex items-center justify-center transition-all duration-700 hover:shadow-md"
+	class="flex items-center justify-center rounded-[999px] py-3 px-6 shadow-2xl transition-all duration-700 hover:shadow-md md:py-4 md:px-8"
 >
 	<img class="object-cover" src={lion} alt="" />
 </div>
diff --git a/frontend/src/lib/components/icons/Telephone.svelte b/frontend/src/lib/components/icons/Telephone.svelte
index bffcc11..ba61427 100644
--- a/frontend/src/lib/components/icons/Telephone.svelte
+++ b/frontend/src/lib/components/icons/Telephone.svelte
@@ -1,5 +1,5 @@
 <svg
-	class="fill-transparent stroke-sspsBlue"
+	class="stroke-sspsBlue fill-transparent"
 	height="24"
 	width="24"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/layout/FullLayout.svelte b/frontend/src/lib/components/layout/FullLayout.svelte
index 5aa2d26..1156d4b 100644
--- a/frontend/src/lib/components/layout/FullLayout.svelte
+++ b/frontend/src/lib/components/layout/FullLayout.svelte
@@ -21,23 +21,23 @@
 
 <style>
 	.logo {
-		@apply w-[200px] h-[200px];
+		@apply h-[200px] w-[200px];
 	}
 	.bgImage {
 		@apply -z-20;
-		@apply absolute min-w-screen min-w-full min-h-screen;
+		@apply min-w-screen absolute min-h-screen min-w-full;
 		@apply bg-no-repeat;
 		background-position: 55%;
 	}
 	.bgOverlay {
-		@apply -z-10 absolute min-w-screen min-h-screen;
+		@apply min-w-screen absolute -z-10 min-h-screen;
 		background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
 		@apply bg-cover;
 	}
 	.bgOverlay .logo {
 		@apply absolute top-0 left-0;
 		@apply hidden md:inline-block;
-		@apply h-auto max-w-72;
+		@apply max-w-72 h-auto;
 		@apply p-7;
 	}
 	.bgOverlay .darkModeToggle {
@@ -47,10 +47,10 @@
 	}
 	.view {
 		@apply z-10 overflow-scroll;
-		@apply w-screen h-screen top-0 right-0 bottom-0 left-0 m-auto;
+		@apply top-0 right-0 bottom-0 left-0 m-auto h-screen w-screen;
 	}
 	.content {
-		@apply w-full h-full;
+		@apply h-full w-full;
 		@apply flex items-center justify-center;
 	}
 </style>
diff --git a/frontend/src/lib/components/layout/SplitLayout.svelte b/frontend/src/lib/components/layout/SplitLayout.svelte
index 45db3af..3fc377a 100644
--- a/frontend/src/lib/components/layout/SplitLayout.svelte
+++ b/frontend/src/lib/components/layout/SplitLayout.svelte
@@ -28,18 +28,18 @@
 <style>
 	.bgImage {
 		@apply -z-20;
-		@apply absolute min-w-screen md:min-w-[50vw] min-h-screen;
+		@apply min-w-screen absolute min-h-screen md:min-w-[50vw];
 		@apply bg-no-repeat;
 	}
 	.bgOverlay {
-		@apply -z-10 absolute min-w-screen md:min-w-[50vw] min-h-screen;
+		@apply min-w-screen absolute -z-10 min-h-screen md:min-w-[50vw];
 		background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
 		@apply bg-cover;
 	}
 	.bgOverlay .logo {
 		@apply absolute top-0 left-0;
 		@apply hidden md:inline-block;
-		@apply h-auto max-w-56;
+		@apply max-w-56 h-auto;
 		@apply p-7;
 	}
 	.darkModeToggle {
@@ -50,12 +50,12 @@
 	.view {
 		@apply z-10 overflow-scroll;
 		@apply rounded-3xl md:rounded-none;
-		@apply absolute w-[90vw] h-[90vh] top-0 md:top-auto right-0 bottom-0 md:bottom-auto left-0 md:left-auto m-auto md:m-0;
-		@apply md:w-[50vw] md:h-screen;
+		@apply absolute top-0 right-0 bottom-0 left-0 m-auto h-[90vh] w-[90vw] md:top-auto md:bottom-auto md:left-auto md:m-0;
+		@apply md:h-screen md:w-[50vw];
 		@apply md:my-auto;
 		@apply bg-white;
 	}
 	.content {
-		@apply w-full h-full;
+		@apply h-full w-full;
 	}
 </style>
diff --git a/frontend/src/lib/components/textfield/TextField.svelte b/frontend/src/lib/components/textfield/TextField.svelte
index 8caa9ca..951c2c9 100644
--- a/frontend/src/lib/components/textfield/TextField.svelte
+++ b/frontend/src/lib/components/textfield/TextField.svelte
@@ -10,7 +10,7 @@
 	export let error: string = '';
 </script>
 
-<div class="relative flex justify-center items-center">
+<div class="relative flex items-center justify-center">
 	<input
 		class:error
 		bind:value
@@ -19,12 +19,12 @@
 		on:keyup
 		on:change
 		class:withIcon={icon}
-		class="bg-[#f8fafb] w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
+		class="hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors  duration-300"
 		use:typeAction
 		{placeholder}
 	/>
 	{#if icon}
-		<span class="flex absolute right-0 top-0 bottom-0 my-auto bg-transparent p-3">
+		<span class="absolute right-0 top-0 bottom-0 my-auto flex bg-transparent p-3">
 			<slot name="icon" />
 		</span>
 	{/if}
diff --git a/frontend/src/routes/(admin)/admin/auth/login/+page.svelte b/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
index 7e6f9a8..de1160e 100644
--- a/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
+++ b/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
@@ -13,15 +13,15 @@
 <SplitLayout backgroundImage={background} backgroundPosition="30%">
 	<div class="form">
 		<div
-			class="py-3 px-6 md:py-4 md:px-8 rounded-[999px] shadow-2xl flex items-center justify-center"
+			class="flex items-center justify-center rounded-[999px] py-3 px-6 shadow-2xl md:py-4 md:px-8"
 		>
 			<img class="object-cover" src={lion} alt="" />
 		</div>
-		<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
-		<p class="mt-8 font-light text-sspsGray text-center">
+		<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Přihlášení</h1>
+		<p class="text-sspsGray mt-8 text-center font-light">
 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 		</p>
-		<div class="w-3/5 mt-8 flex flex-col">
+		<div class="mt-8 flex w-3/5 flex-col">
 			<span>
 				<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />
 			</span>
@@ -34,7 +34,7 @@
 			</span>
 		</div>
 		<input
-			class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
+			class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-3/5 rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
 			type="submit"
 			value="Odeslat"
 		/>
@@ -44,7 +44,7 @@
 <style>
 	.form {
 		@apply flex flex-col;
-		@apply mx-auto w-[90%] h-full;
+		@apply mx-auto h-full w-[90%];
 		@apply items-center justify-center;
 	}
 </style>
diff --git a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
index 4aa4ee8..83e41e3 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
@@ -25,8 +25,8 @@
 	<div class="dashboard dashboardDesktop">
 		<div class="name col-span-3">
 			<DashboardInfoCard title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
-				<span class="mt-3 text-sspsBlue truncate">{$candidateData.email}</span>
-				<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
+				<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
+				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>
 		<div class="coverletter col-span-5">
@@ -40,25 +40,25 @@
 		</div>
 	</div>
 	<div class="dashboard dashboardMobile">
-		<div class="my-10 name w-[90%] mx-auto">
+		<div class="name my-10 mx-auto w-[90%]">
 			<DashboardInfoCard title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
-				<span class="mt-3 text-sspsBlue truncate">{$candidateData.email}</span>
-				<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
+				<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
+				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>
 		<Swiper slidesPerView={1} spaceBetween={20}>
 			<SwiperSlide>
-				<div class="w-[90%] mx-auto">
+				<div class="mx-auto w-[90%]">
 					<CoverLetterUploadCard />
 				</div>
 			</SwiperSlide>
 			<SwiperSlide>
-				<div class="w-[90%] mx-auto">
+				<div class="mx-auto w-[90%]">
 					<PortfolioLetterUploadCard />
 				</div>
 			</SwiperSlide>
 			<SwiperSlide>
-				<div class="w-[90%] mx-auto">
+				<div class="mx-auto w-[90%]">
 					<PortfolioZipUploadCard />
 				</div>
 			</SwiperSlide>
@@ -68,12 +68,12 @@
 
 <style>
 	.dashboardDesktop {
-		@apply w-[85vw] h-[85vh];
-		@apply hidden md:grid grid-cols-8 grid-rows-2 gap-10;
+		@apply h-[85vh] w-[85vw];
+		@apply hidden grid-cols-8 grid-rows-2 gap-10 md:grid;
 	}
 
 	.dashboardMobile {
-		@apply w-[100vw] h-[90vh];
+		@apply h-[90vh] w-[100vw];
 		@apply md:hidden;
 	}
 
diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
index ad877f8..4c7cdf1 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
@@ -121,18 +121,18 @@
 
 <SplitLayout>
 	<div class="form">
-		<div class="w-24 h-24 md:w-auto md:h-auto">
+		<div class="h-24 w-24 md:h-auto md:w-auto">
 			<SchoolBadge />
 		</div>
 		{#if pageIndex === 0}
 			<form on:submit={handleSubmit}>
-				<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Registrace</h1>
-				<p class="block mt-8 font-light text-sspsGray text-center">
+				<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Registrace</h1>
+				<p class="text-sspsGray mt-8 block text-center font-light">
 					Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget
 					elit.
 				</p>
-				<div class="flex md:flex-col items-center justify-center w-full">
-					<span class="w-full mt-8">
+				<div class="flex w-full items-center justify-center md:flex-col">
+					<span class="mt-8 w-full">
 						<TextField
 							error={$errors.name}
 							on:change={handleChange}
@@ -141,7 +141,7 @@
 							placeholder="Jméno a příjmení"
 						/>
 					</span>
-					<span class="w-full mt-8 ml-2 md:ml-0">
+					<span class="mt-8 ml-2 w-full md:ml-0">
 						<EmailField
 							error={$errors.email}
 							on:change={handleChange}
@@ -161,15 +161,15 @@
 			</form>
 		{/if}
 		{#if pageIndex === 1}
-			<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Něco o tobě</h1>
-			<p class="block mt-8 font-light text-sspsGray text-center">
+			<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Něco o tobě</h1>
+			<p class="text-sspsGray mt-8 block text-center font-light">
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
-			<div class="flex flex-row md:flex-col w-full">
-				<span class="w-full mt-8">
+			<div class="flex w-full flex-row md:flex-col">
+				<span class="mt-8 w-full">
 					<TextField type="text" placeholder="Rodné příjmení" on:change={handleChange} />
 				</span>
-				<span class="w-full mt-8 ml-2 md:ml-0">
+				<span class="mt-8 ml-2 w-full md:ml-0">
 					<TextField
 						error={$errors.birthplace}
 						on:change={handleChange}
@@ -185,7 +185,7 @@
 				</span>
 			</div>
 
-			<div class="mt-8 flex items-center w-full">
+			<div class="mt-8 flex w-full items-center">
 				<TextField
 					error={$errors.birthdate}
 					on:change={handleChange}
@@ -205,12 +205,12 @@
 			</div>
 		{/if}
 		{#if pageIndex === 2}
-			<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Už jen kousek!</h1>
-			<p class="block mt-8 font-light text-sspsGray text-center">
+			<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Už jen kousek!</h1>
+			<p class="text-sspsGray mt-8 block text-center font-light">
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
-			<div class="flex flex-col w-full">
-				<span class="w-full mt-8">
+			<div class="flex w-full flex-col">
+				<span class="mt-8 w-full">
 					<TextField
 						error={$errors.address}
 						on:change={handleChange}
@@ -228,7 +228,7 @@
 							placeholder="E-mail zákonného zástupce"
 						/>
 					</span>
-					<span class="w-full ml-2 md:ml-0 md:mt-8">
+					<span class="ml-2 w-full md:ml-0 md:mt-8">
 						<TelephoneField
 							error={$errors.parentTelephone}
 							on:change={handleChange}
@@ -240,12 +240,12 @@
 			</div>
 		{/if}
 		{#if pageIndex === 3}
-			<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Poslední krok</h1>
-			<p class="block mt-8 font-light text-sspsGray text-center">
+			<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Poslední krok</h1>
+			<p class="text-sspsGray mt-8 block text-center font-light">
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
-			<div class="flex flex-row md:flex-col w-full">
-				<span class="w-full mt-8">
+			<div class="flex w-full flex-row md:flex-col">
+				<span class="mt-8 w-full">
 					<TextField
 						error={$errors.citizenship}
 						on:change={handleChange}
@@ -254,11 +254,11 @@
 						placeholder="Občanství"
 					/>
 				</span>
-				<span class="w-full mt-8 ml-2 md:ml-0">
+				<span class="mt-8 ml-2 w-full md:ml-0">
 					<TextField on:change={handleChange} type="text" placeholder="Evidenční číslo přihlášky" />
 				</span>
 			</div>
-			<div class="mt-8 flex items-center justify-center w-full">
+			<div class="mt-8 flex w-full items-center justify-center">
 				<IdField
 					error={$errors.personalIdNumber}
 					on:change={handleChange}
@@ -288,7 +288,7 @@
 				}
 				errors.set(formInitialValues);
 			}}
-			class="w-full mt-8 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white hover:cursor-pointer"
+			class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-full rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300 hover:cursor-pointer"
 			type="submit"
 			value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
 		/>
@@ -320,7 +320,7 @@
 <style>
 	.form {
 		@apply flex flex-col;
-		@apply mx-auto w-[90%] h-full;
+		@apply mx-auto h-full w-[90%];
 		@apply items-center justify-center;
 	}
 	.form > form {
@@ -329,9 +329,9 @@
 		@apply items-center justify-center;
 	}
 	.dot {
-		@apply ml-2 w-4 h-4 
-		@apply hover:cursor-pointer hover:bg-sspsBlue
-		@apply rounded-full bg-sspsGray;
+		@apply @apply hover:bg-sspsBlue @apply 
+		bg-sspsGray ml-2 h-4
+		w-4 rounded-full hover:cursor-pointer;
 	}
 	.dotActive {
 		@apply bg-sspsBlue;
diff --git a/frontend/src/routes/(candidate)/auth/login/+page.svelte b/frontend/src/routes/(candidate)/auth/login/+page.svelte
index 449effb..32ed22a 100644
--- a/frontend/src/routes/(candidate)/auth/login/+page.svelte
+++ b/frontend/src/routes/(candidate)/auth/login/+page.svelte
@@ -18,8 +18,8 @@
 <SplitLayout>
 	<div class="form">
 		<SchoolBadge />
-		<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
-		<p class="my-8 font-light text-sspsGray text-center">
+		<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Přihlášení</h1>
+		<p class="text-sspsGray my-8 text-center font-light">
 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 		</p>
 		<div class="w-3/5">
@@ -27,7 +27,7 @@
 		</div>
 		<input
 			on:click={redirectToCode}
-			class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
+			class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-3/5 rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
 			type="submit"
 			value="Odeslat"
 		/>
@@ -37,7 +37,7 @@
 <style>
 	.form {
 		@apply flex flex-col;
-		@apply mx-auto w-[90%] h-full;
+		@apply mx-auto h-full w-[90%];
 		@apply items-center justify-center;
 	}
 </style>
diff --git a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
index b4fe068..8458af7 100644
--- a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
+++ b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
@@ -74,7 +74,7 @@
 <FullLayout>
 	<div class="modal">
 		<img class="mx-auto" src={woman} alt="" />
-		<div class="flex justify-center items-center">
+		<div class="flex items-center justify-center">
 			<input bind:value={codeValueMobile} type="text" class="codeInputMobile" />
 			{#each [1, 2, 3, 4] as value}
 				<input
@@ -86,7 +86,7 @@
 					type="text"
 				/>
 			{/each}
-			<span class="hidden sm:block mr-2 w-8 h-2 bg-sspsBlue" />
+			<span class="bg-sspsBlue mr-2 hidden h-2 w-8 sm:block" />
 			{#each [5, 6, 7, 8] as value}
 				<input
 					class="codeInputDesktop"
@@ -98,10 +98,10 @@
 				/>
 			{/each}
 		</div>
-		<h3 class="mt-8 mx-8 text-sspsBlue font-semibold text-xl text-center">
+		<h3 class="text-sspsBlue mx-8 mt-8 text-center text-xl font-semibold">
 			Zadejte 8místný kód pro aktivaci účtu
 		</h3>
-		<p class="mt-8 mx-8 text-sspsGray text-center">Nevíte si rady? Klikněte <u>zde</u></p>
+		<p class="text-sspsGray mx-8 mt-8 text-center">Nevíte si rady? Klikněte <u>zde</u></p>
 	</div>
 </FullLayout>
 
@@ -109,21 +109,21 @@
 	.modal {
 		@apply flex flex-col items-center justify-center;
 		@apply mx-auto my-auto;
-		@apply w-[90vw] h-[90vh] md:w-4/5 md:h-4/5;
+		@apply h-[90vh] w-[90vw] md:h-4/5 md:w-4/5;
 		@apply rounded-3xl;
 		@apply bg-white;
 	}
 	input {
-		@apply text-center font-semibold text-sspsBlue;
-		@apply caret-transparent bg-[#f8fafb] shadow-lg p-3 rounded-xl outline-none border transition-colors duration-300 focus:border-sspsBlue  hover:border-sspsBlue  border-2;
+		@apply text-sspsBlue text-center font-semibold;
+		@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 caret-transparent shadow-lg outline-none  transition-colors  duration-300;
 	}
 	.codeInputMobile {
 		@apply sm:hidden;
-		@apply w-full mx-5;
+		@apply mx-5 w-full;
 	}
 	.codeInputDesktop {
 		@apply hidden;
 		@apply mr-1 md:mr-2;
-		@apply sm:block sm:text-xl sm:w-12 sm:h-15 md:text-4xl md:w-16 md:h-20 xl:text-4xl xl:w-18 xl:h-22 xl:p-0;
+		@apply sm:h-15 xl:w-18 xl:h-22 sm:block sm:w-12 sm:text-xl md:h-20 md:w-16 md:text-4xl xl:p-0 xl:text-4xl;
 	}
 </style>