diff --git a/app/components/article-card.gjs b/app/components/article-card.gjs
index cd2c2ee..3e0ea7f 100644
--- a/app/components/article-card.gjs
+++ b/app/components/article-card.gjs
@@ -1,15 +1,16 @@
 import { LinkTo } from '@ember/routing';
 import IconSvg from './icon-svg';
+import Heading from './x-heading';
 
 <template>
   <div class="blog-item">
-    <h2>
+    <Heading @level={{@level}}>
       <LinkTo class="post-link"
         @route="blog.article"
         @model={{@article}}>
           {{@article.title}}
       </LinkTo>
-    </h2>
+    </Heading>
     <p class="meta"><IconSvg @name="calendar" /> <i>{{@article.date}}</i></p>
     <p class="meta">{{{@article.description}}}</p>
   </div>
diff --git a/app/components/article-header.gjs b/app/components/article-header.gjs
index b8a3e71..45d66a0 100644
--- a/app/components/article-header.gjs
+++ b/app/components/article-header.gjs
@@ -1,10 +1,11 @@
 import { LinkTo } from '@ember/routing';
+import IconSvg from './icon-svg';
 
 <template>
   <div class="blog-item">
     <h1>
       {{@article.title}}
     </h1>
-    <p class="meta"><i>{{@article.date}}</i></p>
+    <p class="meta"><IconSvg @name="calendar" /> <i>{{@article.date}}</i></p>
   </div>
 </template>
diff --git a/app/components/x-heading.gjs b/app/components/x-heading.gjs
new file mode 100644
index 0000000..74fd32c
--- /dev/null
+++ b/app/components/x-heading.gjs
@@ -0,0 +1,13 @@
+import { eq } from 'ember-truth-helpers';
+
+<template>
+  {{#if (eq @level 'h1')}}
+    <h1>{{yield}}</h1>
+  {{else if (eq @level 'h2')}}
+    <h2>{{yield}}</h2>
+  {{else if (eq @level 'h3')}}
+    <h3>{{yield}}</h3>
+  {{else}}
+    <h2>{{yield}}</h2>
+  {{/if}}
+</template>
diff --git a/app/components/youtube-link.gjs b/app/components/youtube-link.gjs
index 950096e..ae9dfb6 100644
--- a/app/components/youtube-link.gjs
+++ b/app/components/youtube-link.gjs
@@ -1,4 +1,5 @@
 import { LinkTo } from '@ember/routing';
+import IconSvg from './icon-svg';
 
 function href(youtubeID) {
   return `https://www.youtube.com/watch?v=${youtubeID}`;
@@ -13,7 +14,7 @@ function thumbnail(youtubeID) {
     <a target="_blank" href={{href @id}}>
       <h2>
         <div class="talk-title">{{@title}}</div>
-        <div class="talk-date">[{{@date}}]</div>
+        <div class="talk-date"><IconSvg @name="calendar" /> {{@date}}</div>
       </h2>
 
       <img src={{thumbnail @id}}>
diff --git a/app/styles/app.css b/app/styles/app.css
index 8ef387b..bc545d1 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -53,17 +53,22 @@
 
 h1, h2, h3 {
   line-height: 1;
+  margin-bottom: 0;
 }
 
-h1 {
+h1:has(+ h2), h2:has(+ h3) {
+  margin-bottom: 0;
+}
+
+h1, h1 a, h1 a:visited {
   color: var(--accent);
 }
 
-h2 {
+h2, h2 a, h2 a:visited {
   color: var(--accent-sub2);
 }
 
-h3 {
+h3, h3 a, h3 a:visited {
   color: var(--accent-sub3);
 }
 
@@ -128,19 +133,13 @@ footer p a[href^="https://"]:after,
   padding-right: 1em; /* sizing */
 }
 
-/*
-  TODO: these h2 styles have to move up to h1 styles because of the markdown rendering
-  TODO: move the title to not an h1, then move these styles to h1
-*/
-
 .blog-item h2 a {
   font-size: 1.6rem;
-  color: var(--accent-sub2);
 }
 
-.blog-item h2 {
-  margin-bottom: 0.4rem;
-  font-size: 2.6rem;
+.blog-item h1, .blog-item h2, .blog-item h3 {
+  margin-bottom: 0;
+  margin-top: 0.7em;
 }
 
 .blog-item p {
@@ -195,6 +194,6 @@ footer p a[href^="https://"]:after,
   text-decoration: none;
 }
 
-.link-list .header .talk-date {
+.link-list h2 .talk-date {
   justify-self: end;
 }
diff --git a/app/templates/index.gjs b/app/templates/index.gjs
index db72e7e..0931a08 100644
--- a/app/templates/index.gjs
+++ b/app/templates/index.gjs
@@ -14,6 +14,7 @@ export default RouteTemplate(
   <h2>Recent Blog Post</h2>
 
   <ArticleCard
+    @level='h3'
     @article={{mostRecentPublishedArticle}}
   />