diff --git a/src/includes/postmeta.macro.njk b/src/includes/postmeta.macro.njk
index 6886890..93f2e33 100644
--- a/src/includes/postmeta.macro.njk
+++ b/src/includes/postmeta.macro.njk
@@ -1,6 +1,6 @@
 {% macro postmeta(params) %}
 <ul
-  class="flex flex-wrap items-center gap-4 text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
+  class="flex flex-wrap items-center gap-4 {% if params.center %} justify-center {% else %} justify-start {% endif %} text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
   role="group"
   aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}"
 >
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
index edff726..8fa3cee 100644
--- a/src/layouts/base.njk
+++ b/src/layouts/base.njk
@@ -24,7 +24,7 @@
     <link rel="me" href="https://meow.social/@SebinNyshkim">
   </head>
   <body class="h-dvh bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
-    <header class="sm:px-safe-offset-4 md:px-safe-offset-6">
+    <header class="absolute z-10 left-0 right-0 top-0 sm:px-safe-offset-4 md:px-safe-offset-6">
       <div class="flex min-h-16 max-w-screen-xl items-center justify-center bg-sky-600 shadow-xl sm:m-4 sm:mx-auto  sm:justify-between sm:rounded-xl dark:bg-sky-950">
         <div class="hidden sm:flex sm:items-center">
           <img src="/img/sebin.png" alt="" class="m-4 max-w-14 rounded-full border-4 shadow-2xl">
@@ -46,7 +46,7 @@
       </div>
     </header>
 
-    <main class="mb-20 space-y-10 pt-10 *:px-safe-offset-4 sm:mb-32 sm:pt-16 md:mb-40 md:pt-20 md:*:px-safe-offset-6">
+    <main class="mb-20 space-y-10 sm:mb-32 md:mb-40">
       {{ content | safe }}
     </main>
 
diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk
index 439dc7a..1951a9c 100644
--- a/src/layouts/blogpost.njk
+++ b/src/layouts/blogpost.njk
@@ -2,26 +2,28 @@
 layout: base.njk
 ---
 
-<article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
-  <h1 class="text-4xl">{{ title }}</h1>
-  <div class="not-prose space-y-4 text-base">
-    {%- from 'postmeta.macro.njk' import postmeta %}
-    {{ postmeta({ date: page.date, author: author, content: content}) }}
-    {% if tags.length > 0 %}
-      <ul class="flex gap-1" aria-label="Tagged in">
-        {% for tag in tags %}
-          <li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
-            {% lucide "tag", {"size": "20"} %}
-            {{ tag }}
-          </li>
-        {%- endfor %}
-      </ul>
-    {% endif %}
-  </div>
+<article>
+  <header style="background-image: url({{ image.src }})" class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-900 before:bg-opacity-85 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6">
+    <div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal">
+      <h1 class="text-balance text-center">{{ title }}</h1>
+    </div>
+    <div class="not-prose space-y-6 self-end text-base">
+      {%- from 'postmeta.macro.njk' import postmeta %}
+      {{ postmeta({ date: page.date, author: author, content: content, center: true }) }}
+      {% if tags.length > 0 %}
+        <ul class="flex flex-wrap justify-center gap-1" aria-label="Tagged in">
+          {% for tag in tags %}
+            <li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
+              {% lucide "tag", { "size": "20" } %}
+              {{ tag }}
+            </li>
+          {%- endfor %}
+        </ul>
+      {% endif %}
+    </div>
+  </header>
 
-  {% if image and image.src != '' %}
-    <img src="{{ image.src }}" alt="{{ image.alt }}">
-  {% endif %}
-
-  {{ content | safe }}
+  <section class="px-safe-offset-4 md:px-safe-offset-6 prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
+    {{ content | safe }}
+  </section>
 </article>
diff --git a/src/layouts/page.njk b/src/layouts/page.njk
index 89f96ef..ff2b400 100644
--- a/src/layouts/page.njk
+++ b/src/layouts/page.njk
@@ -2,6 +2,6 @@
 layout: base.njk
 ---
 
-<section class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
+<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl sm:pt-52 md:px-safe-offset-6">
   {{ content | safe }}
 </section>
diff --git a/src/layouts/postlist.njk b/src/layouts/postlist.njk
index a8c8eaa..5a2b3dc 100644
--- a/src/layouts/postlist.njk
+++ b/src/layouts/postlist.njk
@@ -2,7 +2,7 @@
 layout: base.njk
 ---
 
-<section class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
+<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl sm:pt-52 md:px-safe-offset-6">
   <h1>{{ title }}</h1>
 
   <p>Everything I have written, from newest to oldest.</p>
diff --git a/src/posts.njk b/src/posts.njk
index dd75e9e..a217998 100644
--- a/src/posts.njk
+++ b/src/posts.njk
@@ -12,7 +12,7 @@ pagination:
 ---
 
 {% for post in blogposts %}
-  <article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
+  <article class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl md:px-safe-offset-6">
     <h1>{{ post.data.title }}</h1>
     <div class="not-prose">
       {%- from 'postmeta.macro.njk' import postmeta %}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0d2c97f..f5a3ce8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,14 @@
 export default {
   content: ['./src/**/*.{html,md,njk,ejs,pug}'],
   theme: {
-    extend: {}
+    extend: {
+      gridTemplateRows: {
+        'article-header': '1fr auto 0'
+      },
+      height: {
+        '128': '32rem'
+      }
+    }
   },
   plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")]
 };
