diff --git a/src/components/HeroCard.astro b/src/components/HeroCard.astro
index a051e55..b407f8c 100644
--- a/src/components/HeroCard.astro
+++ b/src/components/HeroCard.astro
@@ -15,7 +15,7 @@ interface Props {
 }
 
 const {
-  data: { title, cover, icon },
+  data: { title, cover, icon, date },
   collection,
   body,
   id,
@@ -30,6 +30,7 @@ const link = translatePath(`/${collection}/${id.split("/")[0]}`);
 <Card
   classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
+    {date && (<Card.Metadata date={date} />)}
     <Card.Title classes="text-4xl flex items-center gap-2">
       {
         icon &&
diff --git a/src/components/card/Metadata.svelte b/src/components/card/Metadata.svelte
new file mode 100644
index 0000000..2de7705
--- /dev/null
+++ b/src/components/card/Metadata.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let date: string | Date;
+
+  const toDate = (d: string | Date) =>
+    typeof d === "string" ? new Date(d) : d;
+
+  const iso = (d: string | Date) => {
+    const v = toDate(d);
+    return isNaN(v.getTime()) ? "" : v.toISOString();
+  };
+
+  const formatDate = (d: string | Date) =>
+    new Intl.DateTimeFormat("de-DE", {
+      day: "2-digit",
+      month: "long",
+      year: "numeric",
+    }).format(toDate(d));
+</script>
+
+<div class="flex gap-5">
+  {#if date}
+    <time class="text-sm text-neutral" datetime={iso(date)}
+      >{formatDate(date)}</time>
+  {/if}
+</div>
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
index 5b4df07..86295eb 100644
--- a/src/components/card/index.ts
+++ b/src/components/card/index.ts
@@ -1,19 +1,22 @@
-import Wrapper from './Wrapper.svelte';
-import Image from './Image.svelte';
-import Content from './Content.svelte';
-import Title from './Title.svelte';
-import Description from './Description.svelte';
-import ReadMoreButton from './ReadMoreButton.svelte';
+import Wrapper from "./Wrapper.svelte";
+import Image from "./Image.svelte";
+import Content from "./Content.svelte";
+import Title from "./Title.svelte";
+import Description from "./Description.svelte";
+import ReadMoreButton from "./ReadMoreButton.svelte";
+import Metadata from "./Metadata.svelte";
 
 const Card = Wrapper as typeof Wrapper & {
   Image: typeof Image;
+  Metadata: typeof Metadata;
   Content: typeof Content;
   Title: typeof Title;
   Description: typeof Description;
   ReadMoreButton: typeof ReadMoreButton;
-}
+};
 
 Card.Image = Image;
+Card.Metadata = Metadata;
 Card.Content = Content;
 Card.Title = Title;
 Card.Description = Description;