diff --git a/_includes/article_list.html b/_includes/article_list.html
index 732c492..ad439fa 100644
--- a/_includes/article_list.html
+++ b/_includes/article_list.html
@@ -1,4 +1,4 @@
-<article class="list">
-  <time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
-  <a href="{{ post.url }}">{{post.title}}</a>
+<article class="h-entry">
+  <time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
+  <a href="{{ post.url }}" class="u-url p-name">{{post.title}}</a>
 </article>
diff --git a/_includes/post.html b/_includes/post.html
index c1180c2..a1e6460 100644
--- a/_includes/post.html
+++ b/_includes/post.html
@@ -1,22 +1,22 @@
-<article class="hentry" role="article">
+<article class="h-entry prose lg:prose-lg" role="article">
   <header>
-    <h1 class="entry-title">{{ post.title }}</h1>
-    <time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
-    {% if post.image %}
-      <figure>
-        <img class="feature-image" src="{{ post.image }}" alt="{{ post.title }}">
-        {% if post.image_source %}
-          <figcaption>
-            <cite><a href="{{ post.image_source }}">{{ post.image_source }}</a></cite>
-          </figcaption>
-        {% endif %}
-      </figure>
-    {% endif %}
+    <h1 class="p-name">{{ post.title }}</h1>
+    <time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url" href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
   </header>
-  <div class="entry-content">
-    {{ content }}
-  </div>
-  <footer class="meta">
-    <p><i class="fa fa-tags"></i> {{ post.tags | tag_links }}</p>
+  {% if post.image %}
+  <figure class="-mx-12">
+    <img class="u-featured rounded-md shadow-md w-full" src="{{ post.image }}" alt="{{ post.title }}">
+    {% if post.image_source %}
+    <figcaption>
+      <cite><a href="{{ post.image_source }}">{{ post.image_source }}</a></cite>
+    </figcaption>
+  {% endif %}
+  </figure>
+  {% endif %}
+  <section class="e-content">
+    {{content}}
+  </section>
+  <footer>
+    <p>{{ post.tags | tag_links }}</p>
   </footer>
 </article>
diff --git a/_includes/vcard.html b/_includes/vcard.html
index 3c65d1e..d47c031 100644
--- a/_includes/vcard.html
+++ b/_includes/vcard.html
@@ -1,5 +1,5 @@
 <div class="vcard">
-  <img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="photo left" alt="James Walker" >
-  <p><a href="/about" class="fn n">James Walker</a> (a.k.a. <a href="https://walkah.net/" rel="me" class="url nickname uid">walkah</a>) is an independent developer and hacker. He is a long time <a href="http://drupal.org/user/1531" rel="me">Drupal</a> developer, but these days spends more time in Python, Ruby and Javascript.</p>
+  <p>  <img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="inline-block" alt="James Walker" >
+    <a href="/about" class="fn n">James Walker</a> (a.k.a. <a href="https://walkah.net/" rel="me" class="url nickname uid">walkah</a>) is an independent developer and hacker. He is a long time <a href="http://drupal.org/user/1531" rel="me">Drupal</a> developer, but these days spends more time in Python, Ruby and Javascript.</p>
   <p>You can follow him on <a href="https://twitter.com/walkah" rel="me">twitter</a> or <a href="https://github.com/walkah">github</a>.</p>
 </div>
diff --git a/_layouts/default.html b/_layouts/default.html
index e4dbac5..c485411 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -3,35 +3,16 @@
 <head>
   <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
   {% include meta.html %}
-
-  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
-  <link href='//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
-  <link href="//netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.css" rel="stylesheet">
-
+  <link href="/css/main.css" media="screen, projection" rel="stylesheet" type="text/css">
   <link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml">
 </head>
-<body>
-  <div class="container">
-    <div id="header">
-      <header>
-        <h1 id="title"><a href="/">{{ site.title }}</a></h1>
-      </header>
-      <nav role="navigation">
-        <ul class="navigation">
-          <li><a href="/about">About</a></li>
-          <li><a href="/blog/">Blog</a></li>
-          <li><a href="/contact">Contact</a></li>
-          <li><a href="/atom.xml">Feed <i class="fa fa-rss"></i></a></li>
-        </ul>
-      </nav>
+<body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+  <div class="container max-w-2xl mb-24 mt-8 mx-auto">
+    <div class="px-5 md:px-8">
+      <main id="main">
+          {{ content }}
+      </main>  
     </div>
-    <section id="main">
-      {{ content }}
-    </section>
-    <footer>
-      &copy; 2002-{{ site.time | date:"%Y" }} {{ site.author }}
-    </footer>
   </div>
-  {% include google_analytics.html %}
 </body>
 </html>
diff --git a/_layouts/page.html b/_layouts/page.html
index 7ed067a..3a4e64b 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,8 +1,10 @@
 ---
 layout: default
 ---
-<header>
-  <h1>{{ page.title }}</h1>
-</header>
-
-{{ content }}
+<section class="prose dark:prose-invert my-8">
+  <header>
+    <h1>{{ page.title }}</h1>
+  </header>
+  
+  {{ content }}
+</section>
diff --git a/_layouts/post.html b/_layouts/post.html
index d4d9d3c..317e1da 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,13 +1,30 @@
 ---
 layout: default
 ---
-{% assign post=page %}
-{% include post.html %}
-
-{% include vcard.html %}
-
-<h3>related posts</h3>
-{% for post in site.related_posts limit:5 %}
-  {% include article_list.html %}
-{% endfor %}
+<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
+  <header>
+    <h1 class="p-name">{{ page.title }}</h1>
+    <time class="dt-published" datetime="{{ page.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url text-gray-500 text-sm" href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
+  </header>
+  {% if page.image %}
+  <figure class="md:-mx-12">
+    <img class="u-featured rounded-md shadow-md w-full" src="{{ page.image }}" alt="{{ page.title }}">
+    {% if page.image_source %}
+    <figcaption>
+      <cite><a href="{{ page.image_source }}">{{ page.image_source }}</a></cite>
+    </figcaption>
+  {% endif %}
+  </figure>
+  {% endif %}
+  <section class="e-content">
+    {{content}}
+  </section>
+  <footer class="flex flex-row not-prose">
+    <div rel="author" class="p-author h-card basis-1/2">
+      <img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" >
+      <a href="/">walkah</a>
+    </div>
+    <div class="text-right basis-1/2">{{ page.tags | tag_links }}</div>
+  </footer>
+</article>
 
diff --git a/_plugins/tag_index.rb b/_plugins/tag_index.rb
index d825cb4..f0ca9a5 100644
--- a/_plugins/tag_index.rb
+++ b/_plugins/tag_index.rb
@@ -75,7 +75,7 @@ module Jekyll
     def tag_links(tags)
       tags = tags.sort!.map do |item|
         item.tr!(' ', '-')
-        "<a class='tag' href='/tag/#{item}/'>#{item}</a>"
+        "<a class='p-category' href='/tag/#{item}/'>#{item}</a>"
       end
       tags.join(', ')
     end
diff --git a/blog/index.html b/blog/index.html
index 0026aa8..1e7e2ed 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -1,8 +1,9 @@
 ---
 layout: page
-title: Blog Archive
+title: Archive
 ---
-{% for post in site.posts %}
+<section class="h-feed">
+  {% for post in site.posts %}
   {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
   {% unless year == this_year %}
     {% assign year = this_year %}
@@ -10,3 +11,4 @@ title: Blog Archive
   {% endunless %}
   {% include article_list.html %}
 {% endfor %}
+</section>
diff --git a/stylesheets/Typewriter.otf b/css/Typewriter.otf
similarity index 100%
rename from stylesheets/Typewriter.otf
rename to css/Typewriter.otf
diff --git a/stylesheets/main.css b/css/main.css
similarity index 100%
rename from stylesheets/main.css
rename to css/main.css
diff --git a/images/walkah-avatar.png b/images/walkah-avatar.png
new file mode 100644
index 0000000..fb71c81
Binary files /dev/null and b/images/walkah-avatar.png differ
diff --git a/index.html b/index.html
index b928714..083193f 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,12 @@ layout: default
 title: James Walker
 ---
 
-{% include vcard.html %}
-
-<h3>recent posts:</h3>
-{% for post in site.posts limit: 5 %}
-{% include article_list.html %}
-{% endfor %}
-
+<section class="h-card prose lg:prose-2xl dark:prose-invert">
+  <img src="/images/walkah-avatar.png" alt="James Walker" class="u-photo rounded-full w-48 mx-auto">
+  <p class="lead text-center">👋 I'm <span class="p-name"><span class="p-given-name">James</span> <span class="p-family-name">Walker</span></span> aka <a href="https://walkah.net/" class="u-url u-uid p-nickname">walkah</a>.</p>
+  <p class="p-note">
+    I am a free software developer in <span class="p-locality">Toronto</span>, <span class="p-country-name">Canada</span>.
+    I'm currently the <span class="p-role">VP of Engineering</span> at <a class="p-org" href="https://fission.codes/">Fission</a> where we're building tools for a <span class="p-category">decentralized</span>, <span class="p-category">open web</span>.
+  </p>
+  <p>You can follow my work on <a href="https://github.com/walkah" rel="me">github</a> and <a href="https://twitter.com/walkah" rel="me">twitter</a>, but I prefer the <a href="https://walkah.social" rel="me">fediverse</a> and <a href="https://matrix.to/#/@walkah:walkah.chat" rel="me">matrix</a>.</p>
+</section>
\ No newline at end of file
