diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk
index 1a05bfa..f43ed48 100644
--- a/src/_layouts/post.njk
+++ b/src/_layouts/post.njk
@@ -7,21 +7,20 @@ schema: blog
   <div class="wrapper flow prose">
     <h1 class="gradient-text">{{ title }}</h1>
 
+    {% if image %}
     <!-- image -->
-    {% if image %}{% eleventyImage image, alt or title, null, "eager", "feature" %} {%
-    endif %}
-
+    {% eleventyImage image, alt or title, null, "eager", "feature" %} {% endif %} {% if
+    credit %}
     <!-- credit -->
-    {% if credit %}
-    <p class="feature text-step-min-1">© {{ credit }}</p>
+    <p class="credit feature | text-step-min-1">© {{ credit }}</p>
     {% endif %}
 
-    <p class="cluster text-step-min-1" style="--gutter: var(--space-xs-s)">
+    <p class="meta | cluster" style="--gutter: var(--space-xs-s)">
       <!-- date -->
-      {% set definedDate = date %} {% include "components/date.njk" %}
-
+      {% set definedDate = date %} {% include "components/date.njk" %} {% if tags.length >
+      1 %}
       <!-- tags -->
-      {% if tags.length > 1 %} {% for tag in tags %} {% if tag != "posts" %}
+      {% for tag in tags %} {% if tag != "posts" %}
       <a class="button post-tag" href="/tags/{{ tag }}">
         {{ tag }}
       </a>
diff --git a/src/assets/css/blocks/post.css b/src/assets/css/blocks/post.css
index 0d327c6..5828ebb 100644
--- a/src/assets/css/blocks/post.css
+++ b/src/assets/css/blocks/post.css
@@ -17,3 +17,23 @@
   object-fit: cover;
   object-position: center;
 }
+
+.date {
+  font-size: var(--size-step-1);
+  color: var(--color-text-light);
+}
+
+.credit {
+  font-size: var(--size-step-min-1);
+  color: var(--color-text-accent);
+  background-color: var(--color-bg);
+  padding: var(--space-xs) var(--space-s);
+  border-radius: var(--border-radius);
+  transform: translateY(-4ch) translateX(-0.5ch);
+  max-inline-size: fit-content;
+}
+
+.meta {
+  font-size: var(--size-step-min-1);
+  margin-block-end: var(--space-m);
+}