diff --git a/src/components/Datetime.astro b/src/components/Datetime.astro
new file mode 100644
index 0000000..fe48f41
--- /dev/null
+++ b/src/components/Datetime.astro
@@ -0,0 +1,38 @@
+---
+import formatDatetime from "src/utils/formatDatetime";
+
+export interface Props {
+  datetime: string;
+  size?: "sm" | "lg";
+  className?: string;
+}
+
+const { datetime, size = "sm", className } = Astro.props;
+---
+
+<div class={`date-time-wrapper ${className}`}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class={`${size === "sm" ? "scale-90" : "scale-100"}`}
+    ><path
+      d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"
+    ></path><path
+      d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"
+    ></path>
+  </svg>
+  <span class={`italic ${size === "sm" ? "text-sm" : "text-base"}`}
+    >{formatDatetime(datetime)}
+  </span>
+</div>
+
+<style>
+  .date-time-wrapper {
+    @apply opacity-80 flex items-center space-x-2;
+  }
+  .date-time {
+    @apply italic text-sm;
+  }
+  svg {
+    @apply w-6 h-6 inline-block fill-skin-base;
+  }
+</style>