diff --git a/src/lib/components/blog/labels.svelte b/src/lib/components/blog/labels.svelte
new file mode 100644
index 000000000..f19e7befc
--- /dev/null
+++ b/src/lib/components/blog/labels.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export let data: string[] = [];
+</script>
+
+{#if data.length > 0}
+  <div class="labels">
+    {#each data as label}
+      <small class="label">#{label}</small>
+    {/each}
+  </div>
+{/if}
+
+<style lang="scss">
+  .labels {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.2em;
+    font-size: 1em;
+    small {
+      background-color: var(--acm-light);
+      border-radius: 5px;
+      padding: 0.3em;
+    }
+  }
+</style>
diff --git a/src/routes/blog/[id].svelte b/src/routes/blog/[id].svelte
index 5a6db6e1e..b8cab6a22 100644
--- a/src/routes/blog/[id].svelte
+++ b/src/routes/blog/[id].svelte
@@ -18,6 +18,7 @@
   import Spacing from '$lib/components/sections/spacing.svelte';
   import { readingTime } from '$lib/blog/utils';
   import { Temporal } from '@js-temporal/polyfill';
+  import Labels from '$lib/components/blog/labels.svelte';
 
   export let post: Newsletter;
 </script>
@@ -60,12 +61,7 @@
     <div class="markdown-body">
       {@html post.html}
     </div>
-
-    {#if post.labels.length > 0}
-      <small class="ita">Tags: {post.labels.join(', ')}</small>
-      <br />
-    {/if}
-
+    <Labels data={post.labels} />
     <small class="ita">Read as TXT: <a href={`${post.url}.txt`}>{post.url}.txt</a></small>
   </div>
 
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
index 10d9adad0..473717c99 100644
--- a/src/routes/blog/index.svelte
+++ b/src/routes/blog/index.svelte
@@ -12,6 +12,7 @@
   import Spacing from '$lib/components/sections/spacing.svelte';
   import { Temporal } from '@js-temporal/polyfill';
   import { readingTime } from '$lib/blog/utils';
+  import Labels from '$lib/components/blog/labels.svelte';
 
   export let posts: Newsletter[] = [];
 </script>
@@ -46,28 +47,28 @@
     {#each posts as post (post.id)}
       <li class="blog-post">
         <a href={`/blog/${post.id}`} sveltekit:prefetch>
-          <h2 class="headers">{post.title}</h2>
-          <div class="markdown-body">
-            {@html post.html}
-          </div>
           <div class="author">
             <a href={post.author.url}>
               <img src={post.author.picture} alt="" />
             </a>
             <div>
               <a href={post.author.url}>{post.author.displayname}</a>
-              <p>
-                {Temporal.Instant.from(post.createdAt).toLocaleString('en-US', {
-                  calendar: 'gregory',
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                })} •
-                {readingTime(post.html)} min read
-              </p>
             </div>
           </div>
-          <small class="ita">{post.labels.join(', ')}</small>
+          <h2 class="headers">{post.title}</h2>
+          <div class="markdown-body">
+            {@html post.html}
+          </div>
+          <p class="read-time">
+            {Temporal.Instant.from(post.createdAt).toLocaleString('en-US', {
+              calendar: 'gregory',
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })} •
+            {readingTime(post.html)} min read
+            <Labels data={post.labels} />
+          </p>
         </a>
       </li>
     {/each}
@@ -176,10 +177,6 @@
         flex-direction: column;
       }
 
-      p {
-        font-size: 0.8em;
-      }
-
       a {
         padding: 0;
         font-weight: 600;
@@ -189,6 +186,13 @@
         text-decoration: underline;
       }
     }
+    .read-time {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      font-size: 1em;
+      gap: 1em;
+    }
   }
 
   @media (max-width: 600px) {