diff --git a/swa/src/layouts/Layout.astro b/swa/src/layouts/BaseLayout.astro
similarity index 75%
rename from swa/src/layouts/Layout.astro
rename to swa/src/layouts/BaseLayout.astro
index 39bc6d3..3ac8977 100644
--- a/swa/src/layouts/Layout.astro
+++ b/swa/src/layouts/BaseLayout.astro
@@ -3,9 +3,11 @@ import "../styles/base.css";
 
 interface Props {
 	title: string;
+	description?: string;
+	keywords?: string;
 }
 
-const { title } = Astro.props;
+const { title, description, keywords } = Astro.props;
 ---
 
 <!doctype html>
@@ -13,8 +15,8 @@ const { title } = Astro.props;
 	<head>
 		<title>{title}</title>
 		<meta charset="UTF-8" />
-		<meta name="description" content="Personal website, portfolio, and blog of Cedric Ahlers (clowa): software projects, tutorials, and social links." />
-		<meta name="keywords" content="Cedric Ahlers, clowa, portfolio, blog, tutorials, cloud, azure, personal website" />
+		<meta name="description" content={description ?? description} />
+		<meta name="keywords" content={keywords ?? keywords} />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
diff --git a/swa/src/layouts/BlogPost.astro b/swa/src/layouts/BlogPost.astro
index 18a0630..9a98cc5 100644
--- a/swa/src/layouts/BlogPost.astro
+++ b/swa/src/layouts/BlogPost.astro
@@ -1,22 +1,18 @@
 ---
-import "../styles/base.css";
+import BaseLayout from '@layouts/BaseLayout.astro';
+import "@styles/base.css";
 import "remark-github-blockquote-alert/alert.css";
 // 1. The frontmatter prop gives access to frontmatter and other data
 const { frontmatter } = Astro.props;
 ---
-<html lang="en">
-  <head>
-    <title>{frontmatter.title}</title>
-		<meta charset="utf-8" />
-    <meta name="description" content={frontmatter.description} />
-		<meta name="keywords" content={frontmatter.tags.join(", ")} />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="color-scheme" content="light dark">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
-    <meta name="generator" content={Astro.generator} />
-  </head>
-  <body>
-    <main class="container">
+<BaseLayout 
+  title={frontmatter.title}
+  description={frontmatter.description}
+  keywords={frontmatter.tags.join(", ")}
+  >
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+
+  <main class="container">
       <header class="blog-header">
         <h1>{frontmatter.title}</h1>
         <div class="meta">
@@ -37,8 +33,7 @@ const { frontmatter } = Astro.props;
         © {new Date().getFullYear()} {frontmatter.author} — All rights reserved.
       </footer>
     </main>
-  </body>
-</html>
+</BaseLayout>
 
 <style>
   main.container {
diff --git a/swa/src/pages/404.astro b/swa/src/pages/404.astro
index f44507f..9b0a8d9 100644
--- a/swa/src/pages/404.astro
+++ b/swa/src/pages/404.astro
@@ -1,8 +1,8 @@
 ---
-import Layout from '@layouts/Layout.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
 ---
 
-<Layout title="Page Not Found.">
+<BaseLayout title="Page Not Found.">
   <div>
     <div class="icon">
       <i class="fa-solid fa-circle-exclamation fa-10x"></i>
@@ -14,7 +14,7 @@ import Layout from '@layouts/Layout.astro';
       <p>Hm, looks like this page doesn't exist ...</p>
     </div>
   </div>
-</Layout>
+</BaseLayout>
 
 <style>
   div {
diff --git a/swa/src/pages/index.astro b/swa/src/pages/index.astro
index 51576fb..2582659 100644
--- a/swa/src/pages/index.astro
+++ b/swa/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from '@layouts/Layout.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
 import Footer from '@components/Footer.astro';
 import CardGrid from '@components/CardGrid.astro';
 import IconList from '@components/IconList.astro';
@@ -26,7 +26,11 @@ const publishedPosts = allPosts
 	.sort((a: any, b: any) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf());
 ---
 
-<Layout title="Cedric Ahlers">
+<BaseLayout 
+	title="Cedric Ahlers"
+	description="Personal website, portfolio, and blog of Cedric Ahlers (clowa): software projects, tutorials, and social links."
+	keywords="Cedric Ahlers, clowa, portfolio, blog, tutorials, cloud, azure, personal website"
+	>
 	<main>
 		<div class="profile-picture">
 			<Image
@@ -89,7 +93,7 @@ const publishedPosts = allPosts
 		}))}
 		/>
 	</main>
-</Layout>
+</BaseLayout>
 <Footer text="Assembled with no clue, Astro magic and Pico.css."/>
 
 <style>
diff --git a/swa/tsconfig.json b/swa/tsconfig.json
index 9d094ab..8943b45 100644
--- a/swa/tsconfig.json
+++ b/swa/tsconfig.json
@@ -13,7 +13,8 @@
     "paths": {
       "@components/*": ["./src/components/*"],
       "@layouts/*": ["./src/layouts/*"],
-      "@scripts/*": ["./src/scripts/*"]
+      "@scripts/*": ["./src/scripts/*"],
+      "@styles/*": ["./src/styles/*"]
     }
   }
 }
