diff --git a/website/source/assets/images/logo-header-gradient@2x.png b/website/source/assets/images/logo-header-gradient@2x.png
new file mode 100644
index 0000000000..dd1a896fdc
Binary files /dev/null and b/website/source/assets/images/logo-header-gradient@2x.png differ
diff --git a/website/source/assets/images/consul-header-logo.png b/website/source/assets/images/logo-header.png
similarity index 100%
rename from website/source/assets/images/consul-header-logo.png
rename to website/source/assets/images/logo-header.png
diff --git a/website/source/assets/images/consul-header-logo@2x.png b/website/source/assets/images/logo-header@2x.png
similarity index 100%
rename from website/source/assets/images/consul-header-logo@2x.png
rename to website/source/assets/images/logo-header@2x.png
diff --git a/website/source/assets/images/wordtype@2x.png b/website/source/assets/images/wordtype@2x.png
new file mode 100644
index 0000000000..6767493e81
Binary files /dev/null and b/website/source/assets/images/wordtype@2x.png differ
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index 6c60e2a9a4..13860a090c 100755
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -14,15 +14,6 @@ body.page-sub{
           color: $black;
         }
       }
-      .by{
-        &:hover{
-          svg{
-            line{
-              stroke: $black;
-            }
-          }
-        }
-      }
     }
   }
 }
@@ -30,14 +21,14 @@ body.page-sub{
 #header {
   .navbar-brand {
     .logo{
-      font-size: 20px;
+      font-size: 0;
       text-transform: uppercase;
-      background: image-url('../images/logo-header.png') 0 0 no-repeat;
-      @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
-      background-position: 0 45%;
+      background: image-url('../images/consul-hero-logo.png') 0 0 no-repeat;
+      @include img-retina("../images/consul-hero-logo.png", "../images/consul-hero-logo@2x.png", $project-logo-width, $project-logo-height);
+      background-position: 0 center;
 
       &:hover{
-        color: $purple;
+        opacity: .4;
       }
     }
 
@@ -46,7 +37,7 @@ body.page-sub{
       &:hover{
         svg{
           line{
-            stroke: $purple;
+            opacity: .4;
           }
         }
       }
@@ -84,7 +75,7 @@ body.page-sub{
     .navbar-brand {
       .logo{
         padding-left: 37px;
-        font-size: 18px;
+        //font-size: 18px;
         @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75);
         //background-position: 0 45%;
       }
@@ -97,7 +88,7 @@ body.page-sub{
   #header {
     .navbar-brand {
       .logo{
-        font-size: 0 !important; //hide terraform text
+        
       }
     }
   }
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index de09ab0b6d..ab3c41d994 100644
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -18,8 +18,8 @@
 @import "_global";
 
 // Hashicorp Shared Project Styles
-@import 'hashicorp-shared/_project-utility';
 @import 'hashicorp-shared/_hashicorp-utility';
+@import 'hashicorp-shared/_project-utility';
 @import 'hashicorp-shared/_hashicorp-header';
 @import 'hashicorp-shared/_hashicorp-sidebar';
 
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
index 1635523698..f475f518af 100755
--- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
@@ -4,8 +4,8 @@
 // --------------------------------------------------
 
 // Variables
-$project-logo-width: 40px;
-$project-logo-height: $project-logo-width;
+$project-logo-width: 50px;
+$project-logo-height: 50px;
 $project-logo-pad-left: 8px;
 
 // Mixins
diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb
index b07505bf8b..080473f178 100644
--- a/website/source/layouts/_header.erb
+++ b/website/source/layouts/_header.erb
@@ -31,7 +31,7 @@
     			<div class="col-xs-12">
     				<div class="navbar-header">
     					<div class="navbar-brand">
-    						<a class="logo" href="/">Consul</a>
+    						<a class="logo" href="/"><img src="<%= image_path('wordtype@2x.png') %>" width="96px" height="18px">Consul</a>
     						<a class="by" href="https://hashicorp.com/"><span class="svg-wrap">by</span><%= partial "layouts/svg/svg-by-hashicorp" %><%= partial "layouts/svg/svg-hashicorp-logo" %>Hashicorp</a>
     					</div>
     					<button class="navbar-toggle" type="button">
diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb
index 5afb77e947..0576dd877f 100644
--- a/website/source/layouts/_sidebar.erb
+++ b/website/source/layouts/_sidebar.erb
@@ -7,7 +7,7 @@
     <div class="sidebar-header header-cover">
         <!-- Sidebar brand image -->
         <div class="sidebar-image">
-            <img src="<%= image_path('logo-header@2x.png') %>" width="50px" height="50px">
+            <img src="<%= image_path('logo-header-gradient@2x.png') %>" width="50px" height="50px">
         </div>
     </div>