diff --git a/sass/style.scss b/sass/style.scss
index 44b5c13..d1e20d6 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,8 +1,16 @@
+$dch-color: #09192f;
+
+@font-face {
+  font-family: 'DejaVu Sans';
+  font-weight: 100;
+  src: url("fonts/dejavusans-extralight.woff") format("woff");
+}
+
 /* Global styles */
 
 html,
 body {
-  background-color: #09192f;
+  background-color: #121212;
   color: #ffffff;
   box-sizing: border-box;
 }
@@ -18,6 +26,10 @@ body {
   font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
 }
 
+body.index {
+  background-color: $dch-color;
+}
+
 a:link,
 a:visited {
   color: #ffffff;
@@ -41,6 +53,15 @@ h6 {
   }
 }
 
+header.page-header {
+  background-color: #09192f;
+  box-shadow: 2px 2px 8px 0 #000000;
+  z-index: 100;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+
 svg#dustin-logo {
   margin-bottom: -35px;
 }
@@ -51,21 +72,25 @@ svg#dustin-logo path {
 
 nav.main-nav ul {
   list-style: none;
-  margin-right: 1em;
+  margin: 0;
   padding: 0;
 }
 
 nav.main-nav li {
-  display: inline;
+  display: inline-block;
   margin: 0;
-  padding: 0 1em;
-  border-right: 1px solid #ffffff;
+  padding: 0;
 }
 
 nav.main-nav li:last-child {
   border-right: none;
 }
 
+nav.main-nav li a {
+  display: block;
+  padding: 1em;
+}
+
 nav.main-nav a:link,
 nav.main-nav a:visited,
 nav.main-nav a:active,
@@ -73,6 +98,10 @@ nav.main-nav a:hover {
   text-decoration: none;
 }
 
+nav.main-nav li:hover {
+  background-color: #333f58;
+}
+
 /* Body */
 
 main.main-content {
@@ -84,12 +113,18 @@ main.main-content {
 }
 
 main.main-content div.main-content {
-  margin: auto;
+  margin: 0 auto;
   width: 100%;
   max-width: 10in;
   padding: 0 1em;
 }
 
+@media only screen and (min-height: 1000px) and (min-width: 1000px) {
+  .index main.main-content div.main-content {
+    margin-top: 7rem;
+  }
+}
+
 .home h1.my-name {
   display: flex;
   justify-content: space-around;
@@ -97,6 +132,7 @@ main.main-content div.main-content {
   font-weight: lighter;
   text-align: center;
   margin-bottom: 0;
+  font-family: 'DejaVu Sans';
 }
 
 .home ul.my-attributes {
@@ -125,6 +161,7 @@ main.main-content div.main-content {
 
 .recent-posts h3.post-title {
   margin-bottom: 0;
+  text-decoration: underline;
 }
 
 .recent-posts a {
@@ -135,18 +172,38 @@ main.main-content div.main-content {
   margin-bottom: 2.5em;
 }
 
+.recent-posts a.post-summary {
+  display: block;
+  color: #eeeeee;
+}
+
+.recent-posts a.post-summary:hover {
+  color: #ffffff;
+}
+
 .post-date {
   font-size: 10pt;
 }
 
+.post {
+  background-color: #282828;
+  padding: 1rem;
+  box-shadow: 1px 1px 8px 0 #000000;
+}
+
 article.post .post-title {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 article.post .post-date {
   margin-bottom: 3em;
 }
 
+.post pre {
+  margin: 0 .25em;
+  padding: .25em .5em;
+}
+
 /* Footer */
 footer.page-footer {
   font-size: 9pt;
diff --git a/static/fonts/dejavusans-extralight.woff b/static/fonts/dejavusans-extralight.woff
new file mode 100644
index 0000000..45914b8
Binary files /dev/null and b/static/fonts/dejavusans-extralight.woff differ
diff --git a/templates/base.html b/templates/base.html
index cd4dbee..ffbfb2a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,7 +1,11 @@
+{% block init -%}
+{% set page_class = "" %}
+{% endblock -%}
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       rel="stylesheet"
@@ -11,12 +15,12 @@
       rel="stylesheet"
       href="{{ get_url(path='style.css', trailing_slash=false) }}"
     />
-    <style></style>
     <title>Dustin C. Hatch</title>
     {% block links %}{% endblock %}
   </head>
 
-  <body>
+  <body class="{{ page_class }}">
+  {% block header %}
     <header class="page-header">
       <div class="logo">
         <a href="{{ config.base_url }}">
@@ -25,12 +29,13 @@
       </div>
       <nav class="main-nav">
         <ul>
-          <li><a href="{{ config.base_url }}">Home</a></li>
-          <li><a href="{{ get_url(path='/blog') }}">Blog</a></li>
+          <li><a href="{{ config.base_url }}">Home</a></li
+          ><li><a href="{{ get_url(path='/blog') }}">Blog</a></li
+          >
         </ul>
       </nav>
     </header>
-
+{% endblock header %}
     <main id="content" class="main-content" role="main">
       <div class="main-content">
       {% block content %}{% endblock %}
diff --git a/templates/index.html b/templates/index.html
index 84f13c0..80e1c7c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,8 +1,12 @@
 {% extends "base.html" %}
+{% block init %}
+{% set page_class = "index" %}
+{% endblock%}
 {% block links %}
   <link rel="alternate" type="application/atom+xml" title="Atom Feed"
     href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
 {% endblock %}
+{% block header %}{% endblock %}
 {% block content %}
 <section class="home">
 <h1 class="my-name">Dustin C. Hatch</h1>
@@ -16,18 +20,18 @@
 <h2>Recent Posts</h2>
 {% set blog = get_section(path="blog/_index.md") %}
 {% for page in blog.pages | slice(end=3) %}
-<div class="post-summary">
-<h3 class="post-title"><a href="{{ page.path }}">{{ page.title }}</a></h3>
+<a href="{{ page.path }}" class="post-summary">
+<h3 class="post-title">{{ page.title }}</h3>
 <div class="post-date">
-<time datetime="{{ page.date }}">{{ page.date | date(format="%b %d") }}</time>
+<time datetime="{{ page.date }}">{{ page.date | date(format="%d %b %Y") }}</time>
 </div>
 {% if page.summary %}
 <p>{{ page.summary }}</p>
 {% else %}
 <p>{{ page.content | striptags | split(pat=" ") | slice(end=20) | join(sep=" ") | safe }}{% if page.word_count > 20 %}…{% endif %}</p>
 {% endif %}
-</div>
+</a>
 {% endfor %}
 </div>
 </section>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
