diff --git a/index.html b/index.html
index f7faa9a..d061c6e 100644
--- a/index.html
+++ b/index.html
@@ -3,14 +3,23 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="static/css/style.css">
     <title>Arcane Access Console</title>
 </head>
 <body>
-    <div id="board">
-        
+    <div class="puzzle-container">
+        <h1 class="audiowide-regular">
+            <p>Master the pattern to proceed.</p>
+            <p>Capture each arcane node in flawless succession.</p>
+        </h1>
+        <div id="board"></div>
     </div>
 
+
     <script src="static/js/script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 022beaf..71cd543 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -35,6 +35,37 @@ body {
     /* border: .5px solid #bebcbc76; subtle outer border */
 }
 
+.audiowide-regular {
+  font-family: "Audiowide", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.puzzle-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;    /* center children horizontally */
+  margin: 0 auto;         /* center the container itself if it has intrinsic width */
+  gap: 16px;              /* spacing between title and board */
+  width: fit-content;     /* shrink-wrap to board width */
+}
+
+/* keep your existing h1 rules, or scope them */
+.puzzle-container h1 {
+  text-align: center;
+  margin: 0;
+}
+
+h1 {
+    color: white;
+    font-style: italic;
+    text-align: center;
+
+    p {
+        font-size: 1.3rem;
+    }
+}
+
 .token {
     background-color: #17A398;
     width: 60%;
