diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index e7681f7..de408a2 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@@ -1,19 +1,20 @@
 import React from 'react'
 import './styles.css'
+import '@fontsource-variable/inter'
+import '@fontsource-variable/newsreader'
+import '@fontsource/dm-serif-text'
+import '@fontsource/krona-one'
 
 export const metadata = {
-  description: 'A blank template using Payload in a Next.js app.',
-  title: 'Payload Blank Template',
+  description: "Chris Arter's blog — software, life, cars.",
+  title: 'Chris Arter | A Blog of Tech & Cars',
 }
 
 export default async function RootLayout(props: { children: React.ReactNode }) {
   const { children } = props
-
   return (
     <html lang="en">
-      <body>
-        <main>{children}</main>
-      </body>
+      <body className="bg-paper text-ink font-sans antialiased">{children}</body>
     </html>
   )
 }
diff --git a/src/app/(frontend)/styles.css b/src/app/(frontend)/styles.css
index d255efd..aceaea8 100644
--- a/src/app/(frontend)/styles.css
+++ b/src/app/(frontend)/styles.css
@@ -13,6 +13,8 @@
   --color-paper: rgb(var(--paper));
   --color-paper-2: rgb(var(--paper-2));
   --color-paper-3: rgb(var(--paper-3));
+  --color-hair: rgba(243, 241, 234, 0.10);
+  --color-hair-2: rgba(243, 241, 234, 0.18);
 
   /* Font families */
   --font-family-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;