diff --git a/src/layouts/CenteredContent.astro b/src/layouts/CenteredContent.astro
new file mode 100644
index 0000000..95b864b
--- /dev/null
+++ b/src/layouts/CenteredContent.astro
@@ -0,0 +1,18 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props as Props;
+---
+
+<BaseLayout title={title} description={description}>
+  <div
+    class="w-screen h-screen p-5 text-center flex flex-col gap-5 justify-center items-center"
+  >
+    <slot />
+  </div>
+</BaseLayout>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 47052ce..d7393e8 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,16 +1,12 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import CenteredContent from '../layouts/CenteredContent.astro';
 
 const tagline =
   'Browse past versions of thousands of Spotify playlists saved over time';
 ---
 
-<Layout title="404" description={tagline}>
-  <div
-    class="p-5 w-full h-full text-center flex flex-col md:gap-7 gap-5 justify-center items-center"
-  >
-    <span class="md:text-4xl text-3xl text-center">
-      This page doesn't exist (yet)
-    </span>
-  </div>
-</Layout>
+<CenteredContent title="404" description={tagline}>
+  <span class="md:text-4xl text-3xl text-center">
+    This page doesn't exist (yet)
+  </span>
+</CenteredContent>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 9fe6ad2..5bc756b 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,44 +1,40 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import CenteredContent from '../layouts/CenteredContent.astro';
 
 const currentYear = new Date().getFullYear();
 ---
 
-<Layout
+<CenteredContent
   title="About"
   description="Browse past versions of thousands of Spotify playlists saved over time"
 >
-  <div
-    class="w-full h-full p-5 md:text-xl text-base text-center flex flex-col md:gap-5 gap-3 justify-center items-center"
-  >
-    <h1 class="md:mb-3 mb-2 font-bold md:text-5xl text-3xl">
-      Spotify Playlist Archive
-    </h1>
-    <p>
-      &copy; 2019-{currentYear} Mack Ward, Maciej Pędzich. Released under MIT License.
-    </p>
-    <p>
-      Developed using
-      <a
-        href="https://github.com/maciejpedzich/spotify-playlist-archive-website/blob/master/package.json#L11"
-        target="_blank">these packages</a
-      >. Hosted on
-      <a href="https://www.netlify.com" target="_blank">Netlify</a>.
-    </p>
-    <p>
-      Source code:
-      <a
-        href="https://github.com/mackorone/spotify-playlist-archive"
-        target="_blank">playlist archive</a
-      >
-      |
-      <a
-        href="https://github.com/maciejpedzich/spotify-playlist-archive-website"
-        target="_blank">this website</a
-      >.
-    </p>
-    <strong class="m-0"
-      >This project is not associated with Spotify AB in any way!</strong
+  <h1 class="md:mb-3 mb-2 font-bold md:text-5xl text-3xl">
+    Spotify Playlist Archive
+  </h1>
+  <p>
+    &copy; 2019-{currentYear} Mack Ward, Maciej Pędzich. Released under MIT License.
+  </p>
+  <p>
+    Developed using
+    <a
+      href="https://github.com/maciejpedzich/spotify-playlist-archive-website/blob/master/package.json#L11"
+      target="_blank">these packages</a
+    >. Hosted on
+    <a href="https://www.netlify.com" target="_blank">Netlify</a>.
+  </p>
+  <p>
+    Source code:
+    <a
+      href="https://github.com/mackorone/spotify-playlist-archive"
+      target="_blank">playlist archive</a
     >
-  </div>
-</Layout>
+    |
+    <a
+      href="https://github.com/maciejpedzich/spotify-playlist-archive-website"
+      target="_blank">this website</a
+    >.
+  </p>
+  <p class="m-0 font-bold">
+    This project is not associated with Spotify AB in any way!
+  </p>
+</CenteredContent>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2322c0b..66daa49 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,22 +1,17 @@
 ---
-import Layout from '../layouts/Layout.astro';
-
+import CenteredContent from '../layouts/CenteredContent.astro';
 import PlaylistSearchInput from '../components/vue/PlaylistSearchInput.vue';
 
 const tagline =
   'Browse past versions of thousands of Spotify playlists saved over time';
 ---
 
-<Layout title="Home" description={tagline}>
-  <div
-    class="p-5 w-full h-full text-center flex flex-col md:gap-7 gap-5 justify-center items-center"
-  >
-    <h1 class="font-bold md:text-5xl text-4xl text-center">
-      Spotify Playlist Archive
-    </h1>
-    <div>
-      <p class="mb-7 md:text-xl text-lg">{tagline}</p>
-      <PlaylistSearchInput client:load />
-    </div>
+<CenteredContent title="Home" description={tagline}>
+  <h1 class="font-bold md:text-5xl text-4xl text-center">
+    Spotify Playlist Archive
+  </h1>
+  <div>
+    <p class="mt-2 mb-6">{tagline}</p>
+    <PlaylistSearchInput client:load />
   </div>
-</Layout>
+</CenteredContent>