diff --git a/website/source/assets/stylesheets/_columns.scss b/website/source/assets/stylesheets/_columns.scss
index 01d56e4ac..89f380300 100644
--- a/website/source/assets/stylesheets/_columns.scss
+++ b/website/source/assets/stylesheets/_columns.scss
@@ -38,7 +38,7 @@
     }
 
     .docs-content{
-      padding: 40px 0;
+      padding: 40px 0 60px;
     }
   }
 }
diff --git a/website/source/assets/stylesheets/_components.scss b/website/source/assets/stylesheets/_components.scss
index 1b5924d19..c9be03cab 100644
--- a/website/source/assets/stylesheets/_components.scss
+++ b/website/source/assets/stylesheets/_components.scss
@@ -172,7 +172,7 @@ header .header {
 
     .docs-content {
       flex-direction: column;
-      padding: $docs-top-margin 80px;
+      padding: $docs-top-margin 120px;
       display: block;
 
       code {
diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss
index 67594e6fe..168ddcd70 100644
--- a/website/source/assets/stylesheets/_footer.scss
+++ b/website/source/assets/stylesheets/_footer.scss
@@ -1,70 +1,86 @@
-footer {
-  height: $nav-height;
-  max-height: $nav-height;
-  background-color: $black !important;
-  padding: 0;
-  margin: 0;
-  text-transform: uppercase;
-  color: $white;
-  font-family: $sans;
-  @include respond-to(mobile) {
-    margin-right: -20px;
-    margin-left: -20px;
-  }
+#footer{
+  background-color: $black;
+  padding: 20px 0;
 
-  ul {
-    margin-top: 40px;
-    @include respond-to(mobile) {
-      margin-left: $baseline;
-      margin-top: $baseline;
-    }
-
-    li {
-      display: inline;
-      margin-right: 50px;
-      @include respond-to(mobile) {
-        margin-right: 20px;
-        display: list-item;
-      }
-    }
-
-    .hashi-logo {
-      background: image-url('logo_footer.png') no-repeat center top;
-      height: 40px;
-      width: 40px;
-      background-size: 37px 40px;
-      text-indent: -999999px;
-      display: inline-block;
-      margin-top: -10px;
-      margin-right: 0;
-      @include respond-to(mobile) {
-        margin-top: -50px;
-        margin-right: $baseline;
+  &.white{
+    background-color: $black;
+    .footer-links{
+      li > a {
+        @include project-footer-a-subpage-style();
       }
     }
   }
 
-  .active {
-    color: $green;
+  .footer-links{
+    li > a {
+      @include project-footer-a-style();
+    }
   }
 
-  button {
-    margin-top: 20px;
+  .hashicorp-project{
+    margin-top: 24px;
+  }
+
+  .pull-right{
+    padding-right: 15px;
   }
 }
 
-.page-wrap {
-  min-height: 100%;
-  /* equal to footer height */
-  margin-bottom: -($nav-height);
+.edit-page-link{
+  position: absolute;
+  top: -150px;
+  right: 30px;;
+
+  a{
+    text-transform: uppercase;
+    color: $black;
+    font-size: 13px;
+  }
 }
 
-.page-wrap:after {
-  content: "";
-  display: block;
+@media (min-width: 1500px) {
+  .edit-page-link{
+    top: -56px;
+  }
 }
 
-.page-wrap:after {
-  /* .push must be the same height as footer */
-  height: $nav-height;
+@media (max-width: 992px) {
+  .footer-links {
+    display: block;
+    text-align: center;
+
+    ul{
+      display: inline-block;;
+      float: none !important;
+    }
+
+    .footer-hashi{
+      display: block;
+      float: none !important;
+    }
+  }
+}
+
+@media (max-width: 414px) {
+  #footer{
+    ul{
+      display: block;
+      li{
+        display: block;
+        float: none;
+      }
+
+      &.external-links{
+        li{
+          svg{
+            position: relative;
+            left: 0;
+            top: 2px;
+            margin-top: 0;
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index fb399dd05..2beb66540 100644
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -47,6 +47,16 @@
       @include project-a-style();
     }
   }
+
+  .main-links {
+    li > a {
+      color: $white;
+
+      &:hover{
+        color: $green;
+      }
+    }
+  }
 }
 
 @media (max-width: 768px) {
diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb
index 97d440032..4a412bd69 100644
--- a/website/source/layouts/layout.erb
+++ b/website/source/layouts/layout.erb
@@ -57,29 +57,46 @@
 
     <%= yield %>
     <div class="clearfix"></div>
-    <footer id="footer" class="dark-background">
+    <footer id="footer" class="navigation dark-background white">
       <div class="container-fluid">
         <div class="row">
-          <div class="col-md-12">
-            <ul>
-              <li class="packer"><a href="/">Packer</a></li>
-              <li>
-                A <a href="http://www.hashicorp.com/">HashiCorp</a> project.
-              </li>
-              <% # current_page.path does not have an extension, but
-                 # current_page.source_file does. Also, we don't want to show
-                 # this on the homepage.
-                 if current_page.url != "/"
-                   current_page_source = current_page.path + \
-                     current_page.source_file.split(current_page.path)[1] %>
-              <li>
-                <a href="https://github.com/mitchellh/packer/blob/master/website/source/<%= current_page_source %>">Edit this page</a>
-              </li>
+          <div class="col-xs-12">
+            <% # current_page.path does not have an extension, but
+               # current_page.source_file does. Also, we don't want to show
+               # this on the homepage.
+               if current_page.url != "/"
+                 current_page_source = current_page.path + \
+                   current_page.source_file.split(current_page.path)[1] %>
+            <% if current_page.url != '/' %>
+              <div class="edit-page-link"><a href="https://github.com/mitchellh/packer/blob/master/website/source/<%= current_page_source %>">Edit this page</a></div>
             <% end %>
-            <a href="http://www.hashicorp.com">
-              <li class="pull-right hashi-logo">&nbps;</li>
-            </a>
-          </ul>
+            <% end %>
+            <div class="footer-links">
+              <ul class="main-links white nav navbar-nav">
+                <li><a href="/intro/index.html">Intro</a></li>
+                <li><a href="/docs/index.html">Docs</a></li>
+                <li><a href="/community.html">Community</a></li>
+              </ul>
+              <ul class="external-links white nav navbar-nav">
+                <li class="first download">
+                  <a href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a>
+                </li>
+                <li class="github">
+                  <a href="https://github.com/micthellh/packer"><%= partial "layouts/svg/svg-github" %>GitHub</a>
+                </li>
+              </ul>
+            </  div>
+            <div class="footer-hashi pull-right">
+              <div class="">
+                <a class="hashicorp-project white" href="https://www.hashicorp.com">
+                  <span class="project-text">A </span>
+                  <%= partial "layouts/svg/svg-by-hashicorp" %>
+                  <span class="project-text">Project</span>
+                  <%= partial "layouts/svg/svg-hashicorp-logo" %>
+                </a>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>