diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
new file mode 100644
index 0000000..47e4b24
--- /dev/null
+++ b/src/layouts/Page.astro
@@ -0,0 +1,62 @@
+---
+import Header from '../components/Header.astro';
+
+const { title } = Astro.props;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{ title }</title>
+	</head>
+	<body>
+		<Header />
+		<main><slot /></main>
+	</body>
+</html>
+
+<style>
+@font-face {
+	font-family: 'Cantarell';
+	src: url('/fonts/cantarell.otf') format('otf');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+body {
+	/* Background */
+  background: linear-gradient(90deg, #08001a 0%, #000d1a 100%);
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-color: black;
+	/* Text */
+	color: white;
+	font-family: 'Cantarell', sans-serif;
+	/* Flex */
+	display: flex;
+	align-items: center;
+	margin: 0;
+	flex-direction: column;
+}
+
+main {
+	width: 40%;
+}
+
+@media screen and (max-width: 1200px) {
+	main {
+		width: 60%;
+	}
+}
+
+@media screen and (max-width: 800px) {
+	main {
+		width: 95%;
+	}
+}
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 703cf20..40d1a42 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,91 +1,41 @@
 ---
-import Header from '../components/Header.astro';
+import Page from '../layouts/Page.astro';
 import Card from '../components/Card.astro';
+
+const title = 'Home';
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Ahurac</title>
-	</head>
-	<body>
-		<Header />
-		<main>
-			<p>Home of a FOSS extremist and music nerd.</p>
-			<h1>My services</h1>
-			<div id="cards">
-				<Card
-					id="forgejo"
-					name="Forgejo"
-					link="https://git.ahur.ac/"
-				>A straight-to-the-point source code forge</Card>
-				<Card
-					id="send"
-					name="Send"
-					link="https://send.ahur.ac/"
-				>Encrypt and send files privately</Card>
-				<Card
-					id="matrix"
-					name="Matrix"
-					link="https://chat.ahur.ac/"
-				>The messenger that doesn't spy on you</Card>
-				<Card
-					id="vaultwarden"
-					name="Vaultwarden"
-					link="https://vw.ahur.ac/"
-				>A (Rust) based password manager</Card>
-			</div>
-		</main>
-	</body>
-</html>
+<Page title={ `Ahurac | ${title}` }>
+<p>Home of a FOSS extremist and music nerd.</p>
+
+<h1>My services</h1>
+
+<div id="cards">
+<Card
+	id="forgejo"
+	name="Forgejo"
+	link="https://git.ahur.ac/"
+>A straight-to-the-point source code forge</Card>
+<Card
+	id="send"
+	name="Send"
+	link="https://send.ahur.ac/"
+>Encrypt and send files privately</Card>
+<Card
+	id="matrix"
+	name="Matrix"
+	link="https://chat.ahur.ac/"
+>The messenger that doesn't spy on you</Card>
+<Card
+	id="vaultwarden"
+	name="Vaultwarden"
+	link="https://vw.ahur.ac/"
+>A (Rust) based password manager</Card>
+</div>
 
 <style>
 #cards {
 	display: flex;
 	flex-direction: column;
 }
-
-@font-face {
-	font-family: 'Cantarell';
-	src: url('/fonts/cantarell.otf') format('otf');
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
-
-body {
-	/* Background */
-  background: linear-gradient(90deg, #08001a 0%, #000d1a 100%);
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-attachment: fixed;
-	background-color: black;
-	/* Text */
-	color: white;
-	font-family: 'Cantarell', sans-serif;
-	/* Flex */
-	display: flex;
-	align-items: center;
-	margin: 0;
-	flex-direction: column;
-}
-
-main {
-	width: 40%;
-}
-
-@media screen and (max-width: 1200px) {
-	main {
-		width: 60%;
-	}
-}
-
-@media screen and (max-width: 800px) {
-	main {
-		width: 95%;
-	}
-}
 </style>
