diff --git a/_components/header.tsx b/_components/header.tsx
index 4658c51..ee4285b 100644
--- a/_components/header.tsx
+++ b/_components/header.tsx
@@ -4,14 +4,20 @@ export interface Props {
   author?: {
     name: string;
   };
+  date: Date;
   comp: any;
 }
 
 export default function(props: Props) {
+  const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.date);
   return (
     <header className="page-header">
       <h1>{ props.title }</h1>
-      {props.author && <p>By {props.author.name}</p>}
+      {props.author &&
+        <p style={{ color: "var(--color-brown)" }}>
+          By {props.author.name} on <time datetime={props.date.toISOString()}>{dateFormatted}</time>
+        </p>
+      }
       {props.comp.separator()}
       <p className="subheading">{ props.description }</p>
     </header>
diff --git a/_includes/layouts/base.tsx b/_includes/layouts/base.tsx
index a593603..581e072 100644
--- a/_includes/layouts/base.tsx
+++ b/_includes/layouts/base.tsx
@@ -1,4 +1,4 @@
-export default function({ title, description, children, comp, metas, links, author }) {
+export default function({ title, description, children, comp, metas, links, author, date }) {
   return (
     <html lang="en-CA">
       <head>
@@ -25,7 +25,7 @@ export default function({ title, description, children, comp, metas, links, auth
       </head>
       <body>
         { comp.navbar() }
-        { comp.header({title, description, author}) }
+        { comp.header({title, description, author, date}) }
         <main>{children}</main>
         { comp.footer() }
       </body>
