diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index ef2b28d..8de4441 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -11,7 +11,7 @@ const { title } = Astro.props;
 <!doctype html>
 <html lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 0dc424f..49475d9 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
 ---
 
 <Layout title="Welcome to Astro.">
@@ -63,10 +63,8 @@ import Card from '../components/Card.astro';
 	</main>
 
 	<div class="min-h-screen bg-gray-100 flex items-center justify-center">
-		<h1 class="text-4xl font-bold text-blue-600 hover:text-blue-800">
-		  Hello Tailwind + Astro!
-		</h1>
-	  </div>
+		<h1 class="text-4xl font-bold text-blue-600 hover:text-blue-800">Hello Tailwind + Astro!</h1>
+	</div>
 </Layout>
 
 <style>
diff --git a/frontend/src/pages/player.astro b/frontend/src/pages/player.astro
index 38a5b70..a2831b5 100644
--- a/frontend/src/pages/player.astro
+++ b/frontend/src/pages/player.astro
@@ -1,4 +1,5 @@
 ---
+import Layout from '../layouts/Layout.astro';
 import type { APIResponse, Player } from "../types";
 
 const res = await fetch("http://localhost:3000/player");
@@ -6,34 +7,36 @@ const data: APIResponse<Player[]> = await res.json();
 console.log(data);
 ---
 
-<div class="overflow-x-auto p-5">
-	{
-		data.success && (
-			<table class="min-w-full bg-white border border-gray-300">
-				<thead>
-					<tr class="bg-gray-100">
-						<th class="p-4 border border-gray-300 text-left">Name</th>
-						<th class="p-4 border border-gray-300 text-left">Guild</th>
-						<th class="p-4 border border-gray-300 text-left">#Notes</th>
-						<th class="p-4 border border-gray-300 text-left">#Associations</th>
-					</tr>
-				</thead>
-				<tbody>
-					{data.data.map((player) => (
-						<tr key={player.name} class="hover:bg-gray-50">
-							<td class="p-4 border border-gray-300">
-								<a href={`/player/${player.name}`} class="text-blue-600 hover:underline">
-									{player.name}
-								</a>
-							</td>
-							<td class="p-4 border border-gray-300">{player.guild.name}</td>
-							<td class="p-4 border border-gray-300">{player.notes}</td>
-							<td class="p-4 border border-gray-300">{player.associations}</td>
+<Layout title="Players">
+	<div class="overflow-x-auto p-5">
+		{
+			data.success && (
+				<table class="min-w-full bg-white border border-gray-300">
+					<thead>
+						<tr class="bg-gray-100">
+							<th class="p-4 border border-gray-300 text-left">Name</th>
+							<th class="p-4 border border-gray-300 text-left">Guild</th>
+							<th class="p-4 border border-gray-300 text-left">#Notes</th>
+							<th class="p-4 border border-gray-300 text-left">#Associations</th>
 						</tr>
-					))}
-				</tbody>
-			</table>
-		)
-	}
-	{!data.success && <div>{data.message}</div>}
-</div>
+					</thead>
+					<tbody>
+						{data.data.map((player) => (
+							<tr key={player.name} class="hover:bg-gray-50">
+								<td class="p-4 border border-gray-300">
+									<a href={`/player/${player.name}`} class="text-blue-600 hover:underline">
+										{player.name}
+									</a>
+								</td>
+								<td class="p-4 border border-gray-300">{player.guild.name}</td>
+								<td class="p-4 border border-gray-300">{player.notes}</td>
+								<td class="p-4 border border-gray-300">{player.associations}</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			)
+		}
+		{!data.success && <div>{data.message}</div>}
+	</div>
+</Layout>
diff --git a/frontend/src/pages/player/[name].astro b/frontend/src/pages/player/[name].astro
index 14ce6cc..86cad91 100644
--- a/frontend/src/pages/player/[name].astro
+++ b/frontend/src/pages/player/[name].astro
@@ -1,7 +1,10 @@
 ---
 const { name } = Astro.params;
+import Layout from '../../layouts/Layout.astro';
 ---
 
-<div>
-	<h1>Hello {name}!</h1>
-</div>
+<Layout title={name || "Player"}>
+	<div>
+		<h1>Hello {name}!</h1>
+	</div>
+</Layout>
