diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..fa42451
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,27 @@
+---
+import "../styles/global.css"
+
+import Footer from "../components/Footer.astro"
+import Header from "../components/Header.astro"
+
+const {pageTitle} = 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>{pageTitle}</title>
+	</head>
+  <body>
+    <Header />
+    <h1>{pageTitle}</h1>
+    <slot/>
+    <Footer/>
+    <script>
+      import "../scripts/menu.js"
+    </script>
+  </body>
+</html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index dad6c0c..638437a 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,7 +1,6 @@
 ---
 import "../styles/global.css"
-import Header from "../components/Header.astro"
-import Footer from "../components/Footer.astro"
+import BaseLayout from "../layouts/BaseLayout.astro"
 
 const pageTitle = "About Me"
 
@@ -30,54 +29,41 @@ const goal = 3
 const skillColor = "navy"
 ---
 
-<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>{pageTitle}</title>
+<BaseLayout pageTitle={pageTitle}>
+  <h2>... and my new website!</h2>
+  <p>I'm a web developer and I'm learning Astro.</p>
+  <p>This is my first website!</p>
+
+  <h2>A few things about me:</h2>
+  <ul>
+    <li> I'm {identity.firstName}. </li>
+    <li>I'm {identity.age} years old.</li>
+
+    <li>I'm a {identity.occupation} in {identity.location}.</li>
+    <li>I'm interested in {identity.interests.join(", ")}.</li>
+  </ul>
+
+  <p> My skills are:</p>
+  <ul>
+    {skills.map((skill) => (
+    <li class="skill">{skill}</li>
+    ))}
+  </ul>
+
+  {happy && <p>I am happy to be learning Astro!</p>}
+
+  {finished && <p>I finished this tutorial!</p>}
+
+  {goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
+</BaseLayout>
+
 <style define:vars={{skillColor }}>
-      h1 {
-        color: purple;
-        font-size: 4rem;
-      }
-      .skill {
+  h1 {
+    color: purple;
+    font-size: 4rem;
+  }
+  .skill {
     color: var(--skillColor);
     font-weight: bold;
   }
-    </style>
-	</head>
-	<body>
-    <Header />
-
-    <h1>{pageTitle}</h1>
-    <h2>... and my new website!</h2>
-    <p>I'm a web developer and I'm learning Astro.</p>
-    <p>This is my first website!</p>
-
-    <h2>A few things about me:</h2>
-    <ul>
-      <li> I'm {identity.firstName}. </li>
-      <li>I'm {identity.age} years old.</li>
-      
-      <li>I'm a {identity.occupation} in {identity.location}.</li>
-      <li>I'm interested in {identity.interests.join(", ")}.</li>
-      </ul>
-
-      <p> My skills are:</p>
-      <ul>
-        {skills.map((skill) => (
-          <li class="skill">{skill}</li>
-        ))}
-      </ul>
-
-      {happy && <p>I am happy to be learning Astro!</p>}
-
-      {finished && <p>I finished this tutorial!</p>}
-
-      {goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
-
-      <Footer/>
-	</body>
-</html>
+</style>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index a495bfd..31ac457 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,32 +1,18 @@
 ---
 import "../styles/global.css"
-import Header from "../components/Header.astro"
-import Footer from "../components/Footer.astro"
+import BaseLayout from "../layouts/BaseLayout.astro"
 
 const pageTitle = "Blog posts"
 
 ---
+<BaseLayout pageTitle={pageTitle}>
 
-<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>{pageTitle}</title>
-	</head>
-	<body>
-    <Header />
+<p>This is a list of my blog posts.</p>
 
-		<h1>{pageTitle}</h1>
-    <p>This is a list of my blog posts.</p>
+<ul>
+  <li><a href="/posts/post-1">My first blog post</a></li>
+  <li><a href="/posts/post-2">My second blog post</a></li>
+  <li><a href="/posts/post-3">My third blog post</a></li>
+</ul>
 
-    <ul>
-      <li><a href="/posts/post-1">My first blog post</a></li>
-      <li><a href="/posts/post-2">My second blog post</a></li>
-      <li><a href="/posts/post-3">My third blog post</a></li>
-    </ul>
-
-    <Footer/>
-	</body>
-</html>
+</BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 518b668..c9086f5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,26 +1,9 @@
 ---
-import "../styles/global.css"
-import Footer from "../components/Footer.astro"
-import Header from "../components/Header.astro"
+import BaseLayout from "../layouts/BaseLayout.astro"
 
 const pageTitle = "Orbital Orbit"
 ---
 
-<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>{pageTitle}</title>
-	</head>
-	<body>
-    <Header />
-
-		<h1>{pageTitle}</h1>
-    <Footer/>
-<script>
-import "../scripts/menu.js"
-</script>
-  </body>
-</html>
+<BaseLayout pageTitle={pageTitle}>
+ <h2>My awesome blog subtitle</h2>
+</BaseLayout>
