diff --git a/src/components/cards/BlogCard.astro b/src/components/cards/BlogCard.astro
index 5d51baf..7514d8a 100644
--- a/src/components/cards/BlogCard.astro
+++ b/src/components/cards/BlogCard.astro
@@ -1,11 +1,9 @@
 ---
 import { Image } from 'astro:assets';
-import getReadingTime from 'reading-time';
 
 import type { Post } from '@lib/directusTypes';
 
-import Logo from '@components/images/Logo.astro';
-import { formatShortDate } from '@support/time';
+import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
@@ -13,8 +11,6 @@ interface Props {
 }
 
 const { post } = Astro.props;
-
-const readingTime = getReadingTime(post.content || '');
 ---
 
 <div class="smooth-reveal-cards group flex flex-col">
@@ -36,35 +32,15 @@ const readingTime = getReadingTime(post.content || '');
     </div>
     <div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2">
       <div class="flex flex-row items-center mb-8">
-        <h3 class="card-text-title card-hover-text-title text-xl md:text-2xl">
+        <h3 class="card-text-title card-hover-text-title text-2xl">
           {post.title}
         </h3>
       </div>
-      <div class="flex shrink-0 items-center mt-auto gap-x-2 card-text-description text-sm overflow-hidden whitespace-nowrap max-w-full">
-        <div class="inline-flex items-center">
-          <div class="mr-2">
-            <Logo
-              srcLight={getDirectusImageURL(post.category.logoLight)}
-              srcDark={getDirectusImageURL(post.category.logoDark)}
-              alt={`Logo of ${post.category.title}`}
-              width={18}
-              height={18}
-            />
-          </div>
-          {post.category.title}
-        </div>
-        <span>
-          /
-        </span>
-        <p>
-          {formatShortDate(post.published_date)}
-        </p>
-        <span>
-          /
-        </span>
-        <span>
-          {readingTime.minutes.toPrecision(1)} minutes
-        </span>
+      <div class="mt-auto">
+        <PostMetadataSnippet
+          enableCategoryLink={false}
+          post={post}
+        />
       </div>
     </div>
   </a>
diff --git a/src/components/cards/LargeBlogLeftCard.astro b/src/components/cards/LargeBlogLeftCard.astro
index c7d4406..658981e 100644
--- a/src/components/cards/LargeBlogLeftCard.astro
+++ b/src/components/cards/LargeBlogLeftCard.astro
@@ -1,12 +1,10 @@
 ---
 import { Image } from 'astro:assets';
-import getReadingTime from 'reading-time';
 
 import type { Post } from '@lib/directusTypes';
 
 import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
-import Logo from '@components/images/Logo.astro';
-import { formatShortDate } from '@support/time';
+import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
@@ -14,8 +12,6 @@ interface Props {
 }
 
 const { post } = Astro.props;
-
-const readingTime = getReadingTime(post.content || '');
 ---
 
 <div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
@@ -26,51 +22,32 @@ const readingTime = getReadingTime(post.content || '');
   >
     <div>
       <Image
-        class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
+        class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full object-cover"
         src={getDirectusImageURL(post.image)}
         alt={post.image_alt}
         draggable="false"
         loading="lazy"
-        width="850"
-        height="420"
         inferSize={true}
       />
     </div>
-    <div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
-      <h2 class="card-text-header mb-2">
+    <div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
+      <h2 class="card-text-header">
         {post.title}
       </h2>
-      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
+      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose">
         {post.description}
       </p>
-      <div class="card-text-title flex items-center justify-between w-full">
-        <ReadMoreButton/>
-        <div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
-          <div class="inline-flex items-center">
-            <div class="mr-2">
-              <Logo
-                srcLight={getDirectusImageURL(post.category.logoLight)}
-                srcDark={getDirectusImageURL(post.category.logoDark)}
-                alt={`Logo of ${post.category.title}`}
-                width={18}
-                height={18}
-              />
-            </div>
-            {post.category.title}
-          </div>
-          <span>
-            /
-          </span>
-          <p>
-            {formatShortDate(post.published_date)}
-          </p>
-          <span>
-            /
-          </span>
-          <span>
-            {readingTime.minutes.toPrecision(1)} minutes
-          </span>
+      <div class="flex md:flex-col-reverse lg:flex-row items-center md:items-start lg:items-center justify-between w-full md:gap-4">
+        <div class="hidden md:block shrink-0 mt-4">
+          <ReadMoreButton/>
+        </div>
+        <div class="mt-2 lg:mt-4">
+          <PostMetadataSnippet
+            post={post}
+            enableCategoryLink={false}
+          />
         </div>
       </div>
+    </div>
   </a>
 </div>
diff --git a/src/components/cards/LargeBlogRightCard.astro b/src/components/cards/LargeBlogRightCard.astro
index 1bab72f..91121af 100644
--- a/src/components/cards/LargeBlogRightCard.astro
+++ b/src/components/cards/LargeBlogRightCard.astro
@@ -1,12 +1,10 @@
 ---
 import { Image } from 'astro:assets';
-import getReadingTime from 'reading-time';
 
 import type { Post } from '@lib/directusTypes';
 
 import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
-import Logo from '@components/images/Logo.astro';
-import { formatShortDate } from '@support/time';
+import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
@@ -14,8 +12,6 @@ interface Props {
 }
 
 const { post } = Astro.props;
-
-const readingTime = getReadingTime(post.content || '');
 ---
 
 <div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
@@ -24,40 +20,22 @@ const readingTime = getReadingTime(post.content || '');
     href={`/blog/${post.slug}`}
     data-astro-prefetch
   >
-    <div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
-      <h2 class="card-text-header mb-2">
+    <div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
+      <h2 class="card-text-header">
         {post.title}
       </h2>
-      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
+      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose">
         {post.description}
       </p>
-      <div class="card-text-title flex items-center justify-between w-full">
-        <ReadMoreButton/>
-        <div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
-          <div class="inline-flex items-center">
-            <div class="mr-2">
-              <Logo
-                srcLight={getDirectusImageURL(post.category.logoLight)}
-                srcDark={getDirectusImageURL(post.category.logoDark)}
-                alt={`Logo of ${post.category.title}`}
-                width={18}
-                height={18}
-              />
-            </div>
-            {post.category.title}
-          </div>
-          <span>
-            /
-          </span>
-          <p>
-            {formatShortDate(post.published_date)}
-          </p>
-          <span>
-            /
-          </span>
-          <span>
-            {readingTime.minutes.toPrecision(1)} minutes
-          </span>
+      <div class="flex md:flex-col-reverse lg:flex-row items-center md:items-start lg:items-center justify-between w-full md:gap-4">
+        <div class="hidden md:block shrink-0 mt-4">
+          <ReadMoreButton/>
+        </div>
+        <div class="mt-2 lg:mt-4">
+          <PostMetadataSnippet
+            post={post}
+            enableCategoryLink={false}
+          />
         </div>
       </div>
     </div>
@@ -69,8 +47,6 @@ const readingTime = getReadingTime(post.content || '');
         alt={post.image_alt}
         draggable="false"
         loading="lazy"
-        width="850"
-        height="420"
         inferSize={true}
       />
     </div>
@@ -83,8 +59,6 @@ const readingTime = getReadingTime(post.content || '');
           alt={post.image_alt}
           draggable="false"
           loading="lazy"
-          width="850"
-          height="420"
           inferSize={true}
         />
       </div>
@@ -95,8 +69,6 @@ const readingTime = getReadingTime(post.content || '');
           alt={post.image_alt}
           draggable="false"
           loading="lazy"
-          width="600"
-          height="310"
           inferSize={true}
         />
         <Image
@@ -105,8 +77,6 @@ const readingTime = getReadingTime(post.content || '');
           alt={post.image_second_alt}
           draggable="false"
           loading="lazy"
-          width="600"
-          height="310"
           inferSize={true}
         />
       </div>
diff --git a/src/components/snippets/PostMetadataSnippet.astro b/src/components/snippets/PostMetadataSnippet.astro
index 61173d9..5ea4c81 100644
--- a/src/components/snippets/PostMetadataSnippet.astro
+++ b/src/components/snippets/PostMetadataSnippet.astro
@@ -4,57 +4,78 @@ import getReadingTime from 'reading-time';
 import type { Post } from '@lib/directusTypes';
 
 import Logo from '@components/images/Logo.astro';
-import { formatShortDate } from '@support/time';
+import { formatShortDate, formatDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
   post: Post;
+  enableCategoryLink?: boolean;
+  dateFormat?: 'short' | 'long';
 }
 
-const { post } = Astro.props;
+const { post, enableCategoryLink = true, dateFormat = 'short' } = Astro.props;
 
 const readingTime = getReadingTime(post.content || '');
 ---
 
-<div>
-  <ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4">
-    {post.category && (
-    <li class="inline-flex items-center">
-      <a
-        class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
-        href={`/categories/${post.category.slug}`}
-        data-astro-prefetch
-      >
-        <div class="flex flex-row items-center shrink-0">
-          <div class="mr-2">
-            <Logo
-              srcLight={getDirectusImageURL(post.category.logoLight)}
-              srcDark={getDirectusImageURL(post.category.logoDark)}
-              alt={`Logo of ${post.category.title}`}
-              width = 18,
-              height = 18,
-            />
-          </div>
-          {post.category.title}
+<ol class="flex items-center justify-start card-text-description text-sm whitespace-nowrap gap-2 sm:gap-0 overflow-hidden">
+  {post.category && (
+  <li class="inline-flex items-center">
+    {enableCategoryLink ? (
+    <a
+      class="inline-flex items-center hover:card-hover-text-description overflow-hidden"
+      href={`/categories/${post.category.slug}`}
+      data-astro-prefetch
+    >
+      <div class="flex flex-row items-center shrink-0">
+        <div class="mr-2">
+          <Logo
+            srcLight={getDirectusImageURL(post.category.logoLight)}
+            srcDark={getDirectusImageURL(post.category.logoDark)}
+            alt={`Logo of ${post.category.title}`}
+            width={18}
+            height={18}
+          />
         </div>
-      </a>
-      <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
-        /
-      </span>
-    </li>
+        {post.category.title}
+      </div>
+    </a>
+    ) : (
+    <div class="inline-flex items-center overflow-hidden">
+      <div class="flex flex-row items-center shrink-0">
+        <div class="mr-2">
+          <Logo
+            srcLight={getDirectusImageURL(post.category.logoLight)}
+            srcDark={getDirectusImageURL(post.category.logoDark)}
+            alt={`Logo of ${post.category.title}`}
+            width={18}
+            height={18}
+          />
+        </div>
+        {post.category.title}
+      </div>
+    </div>
     )}
-    <li class="inline-flex items-center">
-      <span class="shrink-0 text-secondary text-sm">
-        {formatShortDate(post.published_date)}
-      </span>
-      <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
-        /
-      </span>
-    </li>
-    <li class="inline-flex items-center">
-      <span class="shrink-0 text-secondary text-sm">
-        {readingTime.minutes.toPrecision(1)} minutes
-      </span>
-    </li>
-  </ol>
-</div>
\ No newline at end of file
+  </li>
+  )}
+  <li class="inline-flex items-center">
+    <span class="shrink-0 mx-2">
+      /
+    </span>
+  </li>
+  <li class="inline-flex items-center">
+    <span class="shrink-0 overflow-hidden">
+      {dateFormat === 'short' ? formatShortDate(post.published_date) : formatDate(post.published_date)}
+    </span>
+  </li>
+  <li class="inline-flex items-center">
+    <span class="shrink-0 mx-2">
+      /
+    </span>
+  </li>
+  <li class="inline-flex items-center">
+    <span class="shrink-0 overflow-hidden">
+      {readingTime.minutes.toPrecision(1)} minutes
+    </span>
+  </li>
+</ol>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 5c28972..ac2e6fd 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -96,7 +96,12 @@ const content = marked.parse(post.content || '');
             <h2 class="card-text-header block">
               {post.title}
             </h2>
-            <PostMetadataSnippet post={post}/>
+            <div class="mt-4 sm:mt-6">
+              <PostMetadataSnippet
+                post={post}
+                dateFormat='long'
+              />
+            </div>
           </div>
           <div class="border-t border-divider mt-10 mb-10"/>
 
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 2fd2b84..52a97b5 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -127,6 +127,11 @@
   @apply text-secondary
 }
 
+@utility card-hover-text-description {
+  @apply transition-all duration-300
+       text-secondary-hover
+}
+
 /* Misc */
 @utility nav-base {
   @apply border border-neutral-100 dark:border-stone-500/20