diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index c708b29..2831105 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -10,29 +10,40 @@ type Props = CollectionEntry<'blog'>['data'];
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 ---
 
+<style>
+  .byline {
+    color: var(--color-gray);
+    margin-bottom: 1em;
+  }
+</style>
 <RootLayout title={title} description={description}>
 		<main>
       <NotchedBox fillNotches="left">
-			<article>
+			<article class="h-entry">
 				<div class="hero-image">
 					{heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
 				</div>
 				<div class="prose">
+          <div class="byline">
+            <time class="dt-published">{ pubDate && <FormattedDate date={pubDate} /> }</time>
+            <div>
+              by <span class="p-author">Periodic</span>
+            </div>
+            {
+              updatedDate && (
+                <div class="last-updated-on dt-updated">
+                  Last updated on <FormattedDate date={updatedDate} />
+                </div>
+              )
+            }
+          </div>
 					<div class="title">
-						<div class="date">
-              { pubDate && <FormattedDate date={pubDate} /> }
-							{
-								updatedDate && (
-									<div class="last-updated-on">
-										Last updated on <FormattedDate date={updatedDate} />
-									</div>
-								)
-							}
-						</div>
-						<h1>{title}</h1>
+						<h1 class="p-name">{title}</h1>
 						<hr />
 					</div>
-					<slot />
+          <div class="e-content">
+					  <slot />
+          </div>
 				</div>
       </article>
     </NotchedBox>