diff --git a/src/lib/components/GuessesTable.svelte b/src/lib/components/GuessesTable.svelte
index a2bac3a..e64446c 100644
--- a/src/lib/components/GuessesTable.svelte
+++ b/src/lib/components/GuessesTable.svelte
@@ -1,191 +1,201 @@
 <script lang="ts">
-  import { bibleBooks } from "$lib/types/bible";
+	import { bibleBooks } from "$lib/types/bible";
+	import Container from "./Container.svelte";
 
-  interface Guess {
-    book: {
-      id: string;
-      name: string;
-      testament: string;
-      section: string;
-    };
-    testamentMatch: boolean;
-    sectionMatch: boolean;
-    adjacent: boolean;
-    firstLetterMatch: boolean;
-  }
+	interface Guess {
+		book: {
+			id: string;
+			name: string;
+			testament: string;
+			section: string;
+		};
+		testamentMatch: boolean;
+		sectionMatch: boolean;
+		adjacent: boolean;
+		firstLetterMatch: boolean;
+	}
 
-  let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
-    $props();
+	let {
+		guesses,
+		correctBookId,
+	}: { guesses: Guess[]; correctBookId: string } = $props();
 
-  let hasGuesses = $derived(guesses.length > 0);
+	let hasGuesses = $derived(guesses.length > 0);
 
-  function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
-    if (isCorrect) return "bg-green-500 border-green-600";
-    if (isAdjacent) return "bg-yellow-500 border-yellow-600";
-    return "bg-red-500 border-red-600";
-  }
+	function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
+		if (isCorrect) return "bg-green-500 border-green-600";
+		if (isAdjacent) return "bg-yellow-500 border-yellow-600";
+		return "bg-red-500 border-red-600";
+	}
 
-  function getBoxContent(
-    guess: Guess,
-    column: "book" | "firstLetter" | "testament" | "section",
-  ): string {
-    switch (column) {
-      case "book":
-        return guess.book.name;
-      case "firstLetter":
-        // Check if this is the special Epistles + "1" case
-        const correctBook = bibleBooks.find((b) => b.id === correctBookId);
-        const correctIsEpistlesWithNumber =
-          (correctBook?.section === "Pauline Epistles" ||
-            correctBook?.section === "General Epistles") &&
-          correctBook.name[0] === "1";
-        const guessStartsWithNumber = guess.book.name[0] === "1";
+	function getBoxContent(
+		guess: Guess,
+		column: "book" | "firstLetter" | "testament" | "section",
+	): string {
+		switch (column) {
+			case "book":
+				return guess.book.name;
+			case "firstLetter":
+				// Check if this is the special Epistles + "1" case
+				const correctBook = bibleBooks.find(
+					(b) => b.id === correctBookId,
+				);
+				const correctIsEpistlesWithNumber =
+					(correctBook?.section === "Pauline Epistles" ||
+						correctBook?.section === "General Epistles") &&
+					correctBook.name[0] === "1";
+				const guessStartsWithNumber = guess.book.name[0] === "1";
 
-        if (
-          correctIsEpistlesWithNumber &&
-          guessStartsWithNumber &&
-          guess.firstLetterMatch
-        ) {
-          return "Yes"; // Special wordplay case
-        }
-        return guess.book.name[0]; // Normal case: just show the first letter
-      case "testament":
-        return (
-          guess.book.testament.charAt(0).toUpperCase() +
-          guess.book.testament.slice(1).toLowerCase()
-        );
-      case "section":
-        return guess.book.section;
-    }
-  }
+				if (
+					correctIsEpistlesWithNumber &&
+					guessStartsWithNumber &&
+					guess.firstLetterMatch
+				) {
+					return "Yes"; // Special wordplay case
+				}
+				return guess.book.name[0]; // Normal case: just show the first letter
+			case "testament":
+				return (
+					guess.book.testament.charAt(0).toUpperCase() +
+					guess.book.testament.slice(1).toLowerCase()
+				);
+			case "section":
+				return guess.book.section;
+		}
+	}
 </script>
 
-{#if hasGuesses}
-  <div class="space-y-3">
-    <!-- Column Headers -->
-    <div 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"
-      >
-        Testament
-      </div>
-      <div
-        class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
-      >
-        Section
-      </div>
-      <div
-        class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
-      >
-        First Letter
-      </div>
-    </div>
+{#if !hasGuesses}
+	<Container class="p-6 text-center">
+		<h2 class="font-triodion text-xl italic mb-3 text-gray-800">
+			Instructions
+		</h2>
+		<p class="text-gray-700 leading-relaxed italic">
+			Guess what book of the bible you think the verse is from. You will
+			get clues to tell you if your guess is close or not. Green means the
+			category is correct; red means wrong.
+		</p>
+	</Container>
+{:else}
+	<div class="space-y-3">
+		<!-- Column Headers -->
+		<div
+			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"
+			>
+				Testament
+			</div>
+			<div
+				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+			>
+				Section
+			</div>
+			<div
+				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+			>
+				First Letter
+			</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-md animate-flip-in {getBoxColor(
-            guess.book.id === correctBookId,
-          )}"
-          style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
-        >
-          <span
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
-            >{getBoxContent(guess, "book")}</span
-          >
-        </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"
-        >
-          <span
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
-            >{getBoxContent(guess, "testament")}</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"
+				>
+					<span class="text-center leading-tight px-1 text-shadow-sm"
+						>{getBoxContent(guess, "testament")}</span
+					>
+				</div>
 
-        <!-- Section Column -->
-        <div
-          class="relative 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.sectionMatch,
-            guess.adjacent,
-          )}"
-          style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
-        >
-          <span
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
-            >{getBoxContent(guess, "section")}
-            {#if guess.adjacent}
-              ‼️
-            {/if}
-          </span>
-        </div>
+				<!-- Section Column -->
+				<div
+					class="relative 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.sectionMatch,
+						guess.adjacent,
+					)}"
+					style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
+				>
+					<span class="text-center leading-tight px-1 text-shadow-sm"
+						>{getBoxContent(guess, "section")}
+						{#if guess.adjacent}
+							‼️
+						{/if}
+					</span>
+				</div>
 
-        <!-- First Letter 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.firstLetterMatch,
-          )}"
-          style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
-        >
-          <span
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
-            >{getBoxContent(guess, "firstLetter")}</span
-          >
-        </div>
-      </div>
-    {/each}
-  </div>
-  <!-- </div> -->
+				<!-- First Letter 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.firstLetterMatch,
+					)}"
+					style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
+				>
+					<span class="text-center leading-tight px-1 text-shadow-sm"
+						>{getBoxContent(guess, "firstLetter")}</span
+					>
+				</div>
+			</div>
+		{/each}
+	</div>
+	<!-- </div> -->
 {/if}
 
 <style>
-  @keyframes flipIn {
-    0% {
-      opacity: 0;
-      transform: rotateX(-90deg);
-    }
-    50% {
-      transform: rotateX(0deg);
-    }
-    100% {
-      opacity: 1;
-      transform: rotateX(0deg);
-    }
-  }
+	@keyframes flipIn {
+		0% {
+			opacity: 0;
+			transform: rotateX(-90deg);
+		}
+		50% {
+			transform: rotateX(0deg);
+		}
+		100% {
+			opacity: 1;
+			transform: rotateX(0deg);
+		}
+	}
 
-  .animate-flip-in {
-    opacity: 0;
-    transform: rotateX(-90deg);
-    animation: flipIn 0.6s ease-out forwards;
-  }
+	.animate-flip-in {
+		opacity: 0;
+		transform: rotateX(-90deg);
+		animation: flipIn 0.6s ease-out forwards;
+	}
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  .fade-in {
-    animation: fadeIn 0.5s ease-out;
-  }
+	.fade-in {
+		animation: fadeIn 0.5s ease-out;
+	}
 </style>