diff --git a/src/components/council/CouncilCard.svelte b/src/components/council/CouncilCard.svelte
index 190fb15..305739c 100644
--- a/src/components/council/CouncilCard.svelte
+++ b/src/components/council/CouncilCard.svelte
@@ -10,16 +10,16 @@
 </script>
 
 <article
-	class="group grid h-full min-w-0 grid-rows-[auto_1fr] overflow-hidden rounded-xl bg-ecsess-800 shadow-md ring-2 ring-ecsess-500/50 ring-offset-2 ring-offset-ecsess-900 transition-all duration-500 ease-out hover:ring-ecsess-300 hover:shadow-xl hover:shadow-ecsess-400/50 focus-within:ring-2 focus-within:ring-ecsess-300 focus-within:ring-offset-2 focus-within:ring-offset-ecsess-900 {featured
+	class="group bg-ecsess-800 ring-ecsess-500/50 ring-offset-ecsess-900 hover:ring-ecsess-300 hover:shadow-ecsess-400/50 focus-within:ring-ecsess-300 focus-within:ring-offset-ecsess-900 grid h-full min-w-0 grid-rows-[auto_1fr] overflow-hidden rounded-xl shadow-md ring-2 ring-offset-2 transition-all duration-500 ease-out focus-within:ring-2 focus-within:ring-offset-2 hover:shadow-xl {featured
 		? 'w-full max-w-[14rem] sm:max-w-[16rem]'
 		: 'w-full max-w-[14rem] sm:max-w-[16rem]'}"
 >
 	<div
-		class="relative flex aspect-square w-full min-h-0 items-center justify-center overflow-hidden bg-ecsess-700"
+		class="bg-ecsess-700 relative flex aspect-square min-h-0 w-full items-center justify-center overflow-hidden"
 	>
 		{#if tag}
 			<span
-				class="absolute right-2 top-2 z-[1] rounded-md bg-ecsess-600 px-2 py-1 text-xs font-semibold uppercase tracking-wide text-ecsess-50 shadow-md ring-1 ring-ecsess-400/60"
+				class="bg-ecsess-600 text-ecsess-50 ring-ecsess-400/60 absolute top-2 right-2 z-[1] rounded-md px-2 py-1 text-xs font-semibold tracking-wide uppercase shadow-md ring-1"
 			>
 				{tag}
 			</span>
@@ -32,20 +32,20 @@
 				onerror={handleImageError}
 			/>
 		{:else}
-			<span class="text-4xl font-bold text-ecsess-150 sm:text-5xl" aria-hidden="true">
+			<span class="text-ecsess-150 text-4xl font-bold sm:text-5xl" aria-hidden="true">
 				{getInitials(name)}
 			</span>
 		{/if}
 	</div>
 	<div class="flex flex-col items-center justify-center gap-2 p-3 text-center sm:p-4">
-		<h3 class="w-full text-base font-bold leading-tight text-ecsess-50 line-clamp-2 sm:text-lg">
+		<h3 class="text-ecsess-50 line-clamp-2 w-full text-base leading-tight font-bold sm:text-lg">
 			{name}
 		</h3>
-		<p class="w-full text-xs italic text-ecsess-200 line-clamp-2 sm:text-sm">{position}</p>
+		<p class="text-ecsess-200 line-clamp-2 w-full text-xs italic sm:text-sm">{position}</p>
 		<button
 			type="button"
 			onclick={onViewProfile}
-			class="mt-1 w-full rounded-lg bg-ecsess-500 px-3 py-2 text-xs font-semibold text-ecsess-950 shadow-md transition hover:bg-ecsess-400 hover:text-ecsess-50 focus:outline-none focus:ring-2 focus:ring-ecsess-300 focus:ring-offset-2 focus:ring-offset-ecsess-800 sm:text-sm"
+			class="bg-ecsess-500 text-ecsess-950 hover:bg-ecsess-400 hover:text-ecsess-50 focus:ring-ecsess-300 focus:ring-offset-ecsess-800 mt-1 w-full rounded-lg px-3 py-2 text-xs font-semibold shadow-md transition focus:ring-2 focus:ring-offset-2 focus:outline-none sm:text-sm"
 		>
 			View profile
 		</button>
diff --git a/src/components/council/CouncilCardPopUp.svelte b/src/components/council/CouncilCardPopUp.svelte
index c7ac114..f110094 100644
--- a/src/components/council/CouncilCardPopUp.svelte
+++ b/src/components/council/CouncilCardPopUp.svelte
@@ -21,14 +21,14 @@
 </script>
 
 <div
-	class="relative flex w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-ecsess-650/70 bg-ecsess-900 shadow-2xl text-ecsess-100 md:max-w-2xl md:flex-row"
+	class="border-ecsess-650/70 bg-ecsess-900 text-ecsess-100 relative flex w-full max-w-xl flex-col overflow-hidden rounded-2xl border shadow-2xl md:max-w-2xl md:flex-row"
 	transition:scale
 	role="article"
 >
 	<button
 		type="button"
 		onclick={onClose}
-		class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-ecsess-650 text-ecsess-50 transition hover:bg-ecsess-550 focus:outline-none focus:ring-2 focus:ring-ecsess-500 focus:ring-offset-2 focus:ring-offset-ecsess-900 md:size-9"
+		class="bg-ecsess-650 text-ecsess-50 hover:bg-ecsess-550 focus:ring-ecsess-500 focus:ring-offset-ecsess-900 absolute top-3 right-3 z-10 flex size-8 items-center justify-center rounded-full transition focus:ring-2 focus:ring-offset-2 focus:outline-none md:size-9"
 		aria-label="Close"
 	>
 		<X class="size-4 md:size-5" />
@@ -36,10 +36,10 @@
 
 	<!-- Photo block: top on small, left on md+ -->
 	<div
-		class="flex shrink-0 flex-col items-center justify-center border-b border-ecsess-700/60 bg-ecsess-850 p-4 md:min-w-[11rem] md:border-b-0 md:border-r md:border-ecsess-700/60 md:p-6"
+		class="border-ecsess-700/60 bg-ecsess-850 md:border-ecsess-700/60 flex shrink-0 flex-col items-center justify-center border-b p-4 md:min-w-[11rem] md:border-r md:border-b-0 md:p-6"
 	>
 		<div
-			class="flex w-24 aspect-[4/5] items-center justify-center overflow-hidden rounded-lg bg-ecsess-750 shadow-inner ring-1 ring-ecsess-650/60 md:w-40 md:rounded-xl"
+			class="bg-ecsess-750 ring-ecsess-650/60 flex aspect-[4/5] w-24 items-center justify-center overflow-hidden rounded-lg shadow-inner ring-1 md:w-40 md:rounded-xl"
 		>
 			{#if image && !imageError}
 				<img
@@ -49,13 +49,13 @@
 					onerror={handleImageError}
 				/>
 			{:else}
-				<span class="text-xl font-bold text-ecsess-200 md:text-3xl" aria-hidden="true">
+				<span class="text-ecsess-200 text-xl font-bold md:text-3xl" aria-hidden="true">
 					{getInitials(name)}
 				</span>
 			{/if}
 		</div>
 		{#if yearProgram}
-			<p class="mt-2 text-center text-xs font-semibold uppercase tracking-wider text-ecsess-200">
+			<p class="text-ecsess-200 mt-2 text-center text-xs font-semibold tracking-wider uppercase">
 				{yearProgram}
 			</p>
 		{/if}
@@ -63,12 +63,12 @@
 
 	<!-- Information: below photo on small, right on md+ -->
 	<div class="flex min-w-0 flex-1 flex-col justify-center p-4 md:p-6">
-		<h2 {id} class="text-lg font-bold leading-tight text-ecsess-50 md:text-2xl">{name}</h2>
-		<p class="-mt-0.5 text-sm italic text-ecsess-200 md:text-base">{position}</p>
+		<h2 {id} class="text-ecsess-50 text-lg leading-tight font-bold md:text-2xl">{name}</h2>
+		<p class="text-ecsess-200 -mt-0.5 text-sm italic md:text-base">{position}</p>
 
 		{#if positionDescription}
-			<div class="mt-3 border-t border-ecsess-700/60 pt-3 md:mt-4 md:pt-4">
-				<p class="text-sm leading-relaxed text-ecsess-100 md:text-base">
+			<div class="border-ecsess-700/60 mt-3 border-t pt-3 md:mt-4 md:pt-4">
+				<p class="text-ecsess-100 text-sm leading-relaxed md:text-base">
 					{positionDescription}
 				</p>
 			</div>
@@ -76,12 +76,12 @@
 
 		{#if email}
 			<div
-				class="mt-3 flex flex-row items-center justify-center gap-2 border-t border-ecsess-700/60 pt-3 text-center md:mt-4 md:pt-4"
+				class="border-ecsess-700/60 mt-3 flex flex-row items-center justify-center gap-2 border-t pt-3 text-center md:mt-4 md:pt-4"
 			>
-				<Mail class="size-4 shrink-0 text-ecsess-300" aria-hidden="true" />
+				<Mail class="text-ecsess-300 size-4 shrink-0" aria-hidden="true" />
 				<a
 					href="mailto:{email}"
-					class="break-all text-sm font-medium text-ecsess-200 underline decoration-ecsess-500 underline-offset-2 hover:text-ecsess-50 hover:decoration-ecsess-400 md:text-base"
+					class="text-ecsess-200 decoration-ecsess-500 hover:text-ecsess-50 hover:decoration-ecsess-400 text-sm font-medium break-all underline underline-offset-2 md:text-base"
 				>
 					{email}
 				</a>
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index 6f20632..f15a132 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -90,7 +90,7 @@
 		<!-- Hero -->
 		<h1 class="page-title text-ecsess-50">Meet the ECSESS Council</h1>
 
-		<figure class="mb-20 overflow-hidden rounded-2xl shadow-2xl ring-2 ring-ecsess-400/50">
+		<figure class="ring-ecsess-400/50 mb-20 overflow-hidden rounded-2xl shadow-2xl ring-2">
 			<img
 				src={data.councilGoofyPic.url}
 				alt="ECSESS Council having fun"
@@ -102,11 +102,11 @@
 		{#if president}
 			<section class="mb-12 w-full">
 				<div class="flex w-full items-center gap-4">
-					<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div>
-					<h2 class="shrink-0 text-xl font-semibold uppercase tracking-wider text-ecsess-100">
+					<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
+					<h2 class="text-ecsess-100 shrink-0 text-xl font-semibold tracking-wider uppercase">
 						President
 					</h2>
-					<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div>
+					<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
 				</div>
 				<div class="mt-4 flex justify-center">
 					<CardCouncil
@@ -123,11 +123,11 @@
 		<!-- Vice Presidents -->
 		<section class="mb-20 w-full">
 			<div class="flex w-full items-center gap-4">
-				<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div>
-				<h2 class="shrink-0 text-2xl font-semibold uppercase tracking-wider text-ecsess-100">
+				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
+				<h2 class="text-ecsess-100 shrink-0 text-2xl font-semibold tracking-wider uppercase">
 					Vice Presidents
 				</h2>
-				<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div>
+				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
 			</div>
 			<div class="mt-8 flex flex-wrap justify-center gap-4">
 				{#each vps as vp}
@@ -148,11 +148,11 @@
 		<!-- Year Representatives -->
 		<section class="mb-20 w-full">
 			<div class="flex w-full items-center gap-4">
-				<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div>
-				<h2 class="shrink-0 text-2xl font-semibold uppercase tracking-wider text-ecsess-100">
+				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
+				<h2 class="text-ecsess-100 shrink-0 text-2xl font-semibold tracking-wider uppercase">
 					Year Representatives
 				</h2>
-				<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div>
+				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
 			</div>
 			<div class="mt-8 flex flex-wrap justify-center gap-4">
 				{#each ureps as urep}
@@ -173,11 +173,11 @@
 
 		<!-- Join CTA at bottom -->
 		<section class="mt-4 mb-12 text-center">
-			<p class="text-lg text-ecsess-200 sm:text-xl">
+			<p class="text-ecsess-200 text-lg sm:text-xl">
 				Like what you see?
 				<Link
 					href="/join"
-					class="font-semibold text-ecsess-50 underline decoration-ecsess-300 underline-offset-4 transition hover:text-ecsess-100 hover:decoration-ecsess-200"
+					class="text-ecsess-50 decoration-ecsess-300 hover:text-ecsess-100 hover:decoration-ecsess-200 font-semibold underline underline-offset-4 transition"
 				>
 					Join ECSESS and be part of the fun →
 				</Link>