diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 25cd933..5217082 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -4,8 +4,8 @@
     {{ end }}
   <article class="card">
     <h2 class="card-title">{{ .Title }}</h2>
-    <p class="card-date post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
     <p class="card-text">{{ .Description }}</p>
+    <p class="card-date post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
     <!-- {{ if .Truncated }}<a class="moretag" href="{{ .Permalink }}">Continue reading</a>{{ end }} -->
   </article>
 </a>
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 5830f2d..9205cad 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,16 +2,18 @@
 <html lang="{{ .Site.LanguageCode }}" dir="ltr">
   {{ partial "head.html" . }}
   <body style="background-color: #f3f3f3;">
-    <div class="content-container">
+    {{ partial "header.html" . }}
+    <div class="card-content-container">
       <main class="card-container">
         {{.Content}}
         <section class="card-columns">
-          {{ range $index, $page := .Paginator.Pages }}
+          {{ range .Paginator.Pages }}
           {{ .Render "li" }}
           {{ end }}
         </section>
       </main>
     </div>
   </body>
+  {{ partial "footer.html" . }}
   {{ partial "scripts.html" . }}  
 </html>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e69de29..aad942d 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -0,0 +1,3 @@
+<footer>
+    <hr />
+</footer>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e69de29..aa964bd 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -0,0 +1,3 @@
+<nav class="nav-bar">
+    <p>MDD</p>
+</nav>
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index fa1f3aa..bc3a40b 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,4 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/core.js"></script>
 <script>
   hljs.initHighlightingOnLoad();
diff --git a/static/css/style.css b/static/css/style.css
index f39161e..ee22ec2 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,7 +3,7 @@ body {
     color: #3A3B3C;
     font-size: 1.1em;
     margin: 0;
-    padding: 0;
+    padding: 4em 0 0 0;
 }
 p {
     margin: 1em 0;
@@ -13,6 +13,20 @@ strong {
     font-family: 'LatoLatinWebHeavy';
     font-weight: normal
 }
+.nav-bar {
+    position: fixed;
+    top: 0;
+    z-index: 3;
+    width: 100%;
+    height: 3em;
+    transition: top 0.2s ease-in-out;
+    background-color: lightseagreen;
+    box-shadow: 0 0.3em 0.6em 0 rgba(0, 0, 0, 0.2), 0 0 0.2em 0 rgba(0, 0, 0, 0.1);
+}
+.nav-bar-up {
+    top: -3em;
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+}
 .post {
     line-height: 1.5;
 }
@@ -50,6 +64,11 @@ img {
     justify-content: center;
     padding: 0 1em;
 }
+.card-content-container {
+    display: flex;
+    justify-content: center;
+    padding: 0 0.5em;
+}
 .content {
     max-width: 700px;
     width: 100%;
@@ -60,7 +79,7 @@ img {
 .card-columns {
     display: grid;
     grid-template-columns: 1fr;
-    grid-gap: 1.5em;
+    grid-gap: 1.2em;
     justify-content: center;
 }
 .card-link-wrapper {
@@ -69,11 +88,11 @@ img {
     background-color: white;
     border-radius: 0.2em;
     transition: transform 0.3s, box-shadow 0.3s;
-    box-shadow: 0 1em 1.6em 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 0.3em 0.6em 0 rgba(0, 0, 0, 0.2), 0 0 0.2em 0 rgba(0, 0, 0, 0.1);
 }
 .card-link-wrapper-active {
     transform: scale(0.95);
-    box-shadow: 0 0.8em 1.4em 0 rgba(0, 0, 0, 0.17);
+    box-shadow: 0 0.23em 0.5em 0 rgba(0, 0, 0, 0.3);
 }
 .card {
     padding: 1em;
@@ -85,16 +104,18 @@ img {
     object-fit: cover;
 }
 .card-title {
-    margin: 0.7em 0 0.7em 0;
+    margin: 0.5em 0 0.7em 0;
+    line-height: 1.2;
     /* text-align: center; */
 }
 .card-date {
+    margin: 0.7em 0 0 0;
     display: block;
     /* text-align: center; */
 }
 .card-text {
     line-height: 1.5;
-    margin: 1em 0 0.5em 0;
+    margin: 0.7em 0;
 }
 blockquote {
     border-left: 0.3em solid #D1D1D1;
@@ -148,6 +169,9 @@ th {
 tr:nth-child(even) td {
     background: #f3f3f3;
 }
+footer {
+    margin: 2em 0;
+}
 
 /* Medium devices (tablets, ~641px and up) */
 @media only screen and (min-width: 40.063em) {
diff --git a/static/js/core.js b/static/js/core.js
index 00c0ee7..2067759 100644
--- a/static/js/core.js
+++ b/static/js/core.js
@@ -1,4 +1,43 @@
 
+// Hide Header on on scroll down
+var didScroll;
+var lastScrollTop = 0;
+var delta = 5;
+var navbarHeight = $('nav-bar').outerHeight();
+
+$(window).scroll(function(event){
+    didScroll = true;
+});
+
+setInterval(function() {
+    if (didScroll) {
+        hasScrolled();
+        didScroll = false;
+    }
+}, 250);
+
+function hasScrolled() {
+    var st = $(this).scrollTop();
+    
+    // Make sure they scroll more than delta
+    if(Math.abs(lastScrollTop - st) <= delta)
+        return;
+    
+    // If they scrolled down and are past the navbar, add class .nav-up.
+    // This is necessary so you never see what is "behind" the navbar.
+    if (st > lastScrollTop && st > navbarHeight){
+        // Scroll Down
+        $('nav').addClass('nav-bar-up');
+    } else {
+        // Scroll Up
+        if(st + $(window).height() < $(document).height()) {
+            $('nav').removeClass('nav-bar-up');
+        }
+    }
+    
+    lastScrollTop = st;
+}
+
 function cardPressed() {
     this.classList.add('card-link-wrapper-active');
 }
