diff --git a/archetypes/default.md b/archetypes/default.md
index ac36e06..14cfada 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -1,2 +1,5 @@
-+++
-+++
+---
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+date: {{ .Date }}
+description: ""
+---
diff --git a/archetypes/posts.md b/archetypes/posts.md
index ea07ee8..83c5d90 100644
--- a/archetypes/posts.md
+++ b/archetypes/posts.md
@@ -1,7 +1,7 @@
 ---
 title: "{{ replace .TranslationBaseName "-" " " | title }}"
 date: {{ .Date }}
-description: "" 
+description: ""
 categories: []
 featuredImage: ""
 draft: true
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 1a0e1b0..36492e0 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -9,9 +9,8 @@
     <h2 class="card-title">{{ .Title }}</h2>
     <p class="card-text">{{ .Description }}</p>
     <div class="card-subtext muted-text">
-      <p style="margin: 0 1em 0 0;">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
-      <p style="margin: 0 1em 0 0;">|</p>
-      <p style="margin: 0 1em 0 0;">#{{ .Params.categories }}</p>
+      <p>Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
+      <p>{{ range .Params.categories }}#{{ . }} {{ end }}</p>
     </div>
   </article>
 </a>
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index e2e1017..bee1cce 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,10 +2,11 @@
 <html lang="{{ .Site.LanguageCode }}" dir="ltr">
   {{ partial "head.html" . }}
   <body class="list-body">
+    {{ partial "nav-bar.html" . }}
     <main class="card-container side-gutter">
       <header class="list-header">
-        <p class="list-header-subtext">Code It, Break It, Quick, Rewrite It</p>
-        <h1 class="list-header-title">Technologic</h1>
+        <p class="list-header-subtext">{{ .Description }}</p>
+        <h1 class="list-header-title">{{ .Title }}</h1>
       </header>
       {{ range .Paginator.Pages }}
       {{ .Render "li" }}
diff --git a/layouts/_default/single-li.html b/layouts/_default/single-li.html
index 7288dda..a8c9b44 100644
--- a/layouts/_default/single-li.html
+++ b/layouts/_default/single-li.html
@@ -10,9 +10,8 @@
     <h2 class="card-title">{{ .Title }}</h2>
     <p class="card-text">{{ .Description }}</p>
     <div class="card-subtext muted-text">
-      <p style="margin: 0 1em 0 0;">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
-      <p style="margin: 0 1em 0 0;">|</p>
-      <p style="margin: 0 1em 0 0;">#{{ .Params.categories }}</p>
+      <p>Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
+      <p>{{ range .Params.categories }}#{{ . }} {{ end }}</p>
     </div>
   </article>
 </a>
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index a170b81..8eff257 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -6,7 +6,7 @@
     <main class="content side-padding">
       <article class="post">
         <header class="post-header">
-          <h1 class="post-title">{{ .Title }}</h1>
+        	<h1 class="post-title">{{ .Title }}</h1>
           <p class="post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
         </header>
         {{ if isset .Params "featuredimage" }}
diff --git a/layouts/partials/nav-bar.html b/layouts/partials/nav-bar.html
index 38a8012..b95004a 100644
--- a/layouts/partials/nav-bar.html
+++ b/layouts/partials/nav-bar.html
@@ -1,3 +1,13 @@
-<nav class="nav-bar">
-    <h1 class="nav-header"><a href="/" class="nav-text">mdd</a></h1>
+<nav class="nav-bar side-padding">
+  <h1 class="nav-header"><a href="/" class="nav-text">mdd</a></h1>
+  <div class="hamburger-menu">
+		<input type="checkbox" />
+		<span></span>
+		<span></span>
+    <ul class="hamburger-menu-view">
+      {{ range $key, $value := .Site.Taxonomies.categories }}
+			<li><a href="{{ $.Site.BaseURL }}categories/{{ $key | urlize  }}">{{ $key | humanize }}</a></li>
+			{{ end }}
+    </ul>
+  </div>
 </nav>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index cd3e639..a1ff2ca 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -19,8 +19,12 @@ strong {
     font-weight: normal
 }
 .nav-bar {
+    max-width: 48rem;
+    width: 100%;
     padding: 0.7em 0;
-    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 .nav-header {
     margin: 0;
@@ -28,6 +32,70 @@ strong {
 .nav-text {
     text-decoration: none;
 }
+.hamburger-menu {
+    display: block;
+    position: relative;
+    z-index: 1;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.hamburger-menu input {
+  display: block;
+  width: 33px;
+  height: 33px;
+  position: absolute;
+  top: -9px;
+  cursor: pointer;
+  opacity: 0; /* hide this */
+  z-index: 2; /* and place it over the hamburger */
+  -webkit-touch-callout: none;
+}
+.hamburger-menu span {
+  display: block;
+  width: 33px;
+  height: 4px;
+  position: relative;
+  background: #3A3B3C;
+  border-radius: 3px;
+  z-index: 1;
+  transform-origin: center;
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              opacity 0.55s ease;
+}
+.hamburger-menu span:first-of-type {
+  margin-bottom: 5px;
+}
+.hamburger-menu input:checked ~ span {
+    opacity: 1;
+    transform: rotate(45deg) translate(3.2px , 3.2px);
+}
+.hamburger-menu input:checked ~ span:nth-last-child(2) {
+    transform: rotate(-45deg) translate(3.2px , -3.2px);
+}
+.hamburger-menu input ~ ul {
+    display: none;
+    text-align: center;
+    padding: 3em 0 0 0;
+    transition: all 1s cubic-bezier(0.77,0.2,0.05,1.0); 
+}
+.hamburger-menu > ul > li > a {
+    text-decoration: none;
+    font-size: 2em;
+    line-height: 1.7;
+    color: white;
+}
+.hamburger-menu input:checked ~ ul {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+}
 .post {
     margin: 0 0 1em 0;
     line-height: 1.5;
@@ -62,13 +130,13 @@ strong {
     padding: 2em 0;
     margin-bottom: 2em;
     width: 100%;
-    max-width: 46rem;
+    max-width: 48rem;
     border-radius: 0.3rem;
-    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-    box-shadow: 0 0.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
+    transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1);
+    box-shadow: 0 0.7rem 1.4rem 0 rgba(0,0,0,0.25), 0 0.5rem 0.5rem 0 rgba(0,0,0,0.22);
 }
 .list-header {
-    margin: 8em 0 6em 0;
+    margin: 6em 0;
     text-align: center;
 }
 .list-header-title {
@@ -95,7 +163,7 @@ strong {
     border-radius: 0.3rem;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1);
-    box-shadow: 0 0.4rem 0.8rem 0 rgba(0,0,0,0.16), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23);
+    box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.19), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23);
 }
 .home-card {
     padding: 0.8em;
@@ -103,7 +171,7 @@ strong {
     font-weight: bold;
     text-align: center;
     color: white;
-    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(../img/city.jpg) center center no-repeat;
+    background: url(../img/grey-cloud.jpg) center center;
     object-fit: cover;
 }
 .blog-card {
@@ -151,12 +219,21 @@ strong {
     justify-content: flex-start;
     font-size: 0.8em;
 }
+.card-subtext > p {
+    margin: 0;
+}
+.card-subtext > p + p {
+    margin-left: 1em;
+    padding-left: 1em;
+    word-spacing: 0.5em;
+    border-left: thin solid #7A7B7C;
+}
 .end-nav {
     width: 100%;
-    max-width: 46rem;
+    max-width: 47rem;
 }
 .pagination-nav {
-    margin: 3em 0 2em 0;
+    margin: 2em 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -166,10 +243,13 @@ strong {
 .button {
     padding: 0.5em 0.6em;
     background-color: #FFF;
+    text-decoration: none;
     border-radius: 0.3rem;
-    box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.12), 0 0.04rem 0.08rem rgba(0,0,0,0.24);
+    transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1);
+    box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,0.16), 0 0.15rem 0.3rem rgba(0,0,0,0.23);
 }
 .button:hover {
+    box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24);
     transform: scale(0.97);
 }
 .button:active {
@@ -270,9 +350,6 @@ footer {
     body {
         font-size: 1.125rem;
     }
-    .list-header {
-        margin: 8em 0 6em 0;
-    }
     .list-header-title {
         font-weight: normal;
         font-size: 4.2em;
@@ -316,9 +393,6 @@ footer {
     .post-title {
         font-size: 2.5em;
     }
-    .pagination-nav {
-        margin: 4em 0 2em 0;
-    }
     .button {
         border-radius: 0.2rem;
     }
