diff --git a/src/lib/components/GuessesTable.svelte b/src/lib/components/GuessesTable.svelte
index c8a29b9..0f2974f 100644
--- a/src/lib/components/GuessesTable.svelte
+++ b/src/lib/components/GuessesTable.svelte
@@ -99,47 +99,35 @@
 			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
 		>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
-			>
-				Book
-			</div>
-			<div
-				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
 			>
 				Testament
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
 			>
 				Section
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
 			>
 				First Letter
 			</div>
+			<div
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+			>
+				Book
+			</div>
 		</div>
 
 		{#each guesses as guess, rowIndex (guess.book.id)}
 			<div class="flex gap-2 justify-center">
-				<!-- Book Column -->
-				<div
-					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in {getBoxColor(
-						guess.book.id === correctBookId,
-					)}"
-					style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
-				>
-					<span class="text-center leading-tight px-1 text-shadow-lg"
-						>{getBoxContent(guess, "book")}</span
-					>
-				</div>
-
 				<!-- Testament Column -->
 				<div
 					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
 						guess.testamentMatch,
 					)}"
-					style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
+					style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-sm"
 						>{getBoxContent(guess, "testament")}</span
@@ -152,7 +140,7 @@
 						guess.sectionMatch,
 						guess.adjacent,
 					)}"
-					style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
+					style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-sm"
 						>{getBoxContent(guess, "section")}
@@ -167,12 +155,24 @@
 					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
 						guess.firstLetterMatch,
 					)}"
-					style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
+					style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-sm"
 						>{getBoxContent(guess, "firstLetter")}</span
 					>
 				</div>
+
+				<!-- Book Column -->
+				<div
+					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 border-opacity-100 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in {getBoxColor(
+						guess.book.id === correctBookId,
+					)}"
+					style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
+				>
+					<span class="text-center leading-tight px-1 text-shadow-lg"
+						>{getBoxContent(guess, "book")}</span
+					>
+				</div>
 			</div>
 		{/each}
 	</div>