diff --git a/website/source/assets/stylesheets/consul-connect/_index.scss b/website/source/assets/stylesheets/consul-connect/_index.scss
index 5a78592b0a..f70087169f 100644
--- a/website/source/assets/stylesheets/consul-connect/_index.scss
+++ b/website/source/assets/stylesheets/consul-connect/_index.scss
@@ -5,6 +5,7 @@
 @import 'components/_button';
 @import 'components/_container';
 @import 'components/_cta-section';
+@import 'components/_header';
 @import 'components/_hero';
 @import 'components/_logo-grid';
 @import 'components/_section';
diff --git a/website/source/assets/stylesheets/consul-connect/_typography.scss b/website/source/assets/stylesheets/consul-connect/_typography.scss
index a894e6cf09..203eee02cc 100644
--- a/website/source/assets/stylesheets/consul-connect/_typography.scss
+++ b/website/source/assets/stylesheets/consul-connect/_typography.scss
@@ -31,9 +31,17 @@
 
   h1,
   .h1 {
-    font-size: 3.5em;
+    font-size: 3.2rem;
     font-weight: 600;
     line-height: 1.2em;
+
+    @media (min-width: 768px) {
+      font-size: 4rem;
+    }
+    
+    @media (min-width: 992px) {
+      font-size: 5.6rem;
+    }
   }
 
   h2,
diff --git a/website/source/assets/stylesheets/consul-connect/components/_header.scss b/website/source/assets/stylesheets/consul-connect/components/_header.scss
new file mode 100644
index 0000000000..cafc5d0e82
--- /dev/null
+++ b/website/source/assets/stylesheets/consul-connect/components/_header.scss
@@ -0,0 +1,62 @@
+// TODO - currently overriding the main header
+// this will affect docs as well.  is that ok?
+#header {
+  background: transparent;
+
+  .navbar-toggle {
+    .icon-bar {
+      border: 1px solid $consul-black;
+    }
+  }
+
+  .navbar-brand {
+    a {
+      svg.logo {
+        opacity: 1;
+
+        path.text {
+          fill: $black;
+          opacity: 1;
+        }
+
+        path.center-c {
+          fill: $consul-red-dark;
+          opacity: 1;
+        }
+
+        path.circles {
+          fill: $consul-red;
+          opacity: 1;
+        }
+
+        path.c {
+          fill: $consul-red;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  ul.nav {
+    li {
+      a {
+        color: $consul-black;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: transparent;
+          color: $black;
+
+          svg {
+            fill: $black;
+          }
+        }
+
+        svg {
+          fill: $consul-black;
+        }
+      }
+    }
+  }
+}
diff --git a/website/source/assets/stylesheets/consul-connect/components/_hero.scss b/website/source/assets/stylesheets/consul-connect/components/_hero.scss
index c638e32f5d..cfbe947d35 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_hero.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_hero.scss
@@ -1,18 +1,36 @@
 .g-hero {
-  background: url("/assets/images/consul-connect/hero-bg.png") no-repeat center
+  background: url("/assets/images/consul-connect/hero-bg.png") no-repeat top
     center;
   background-size: cover;
-  padding: 121px 0;
+  margin-top: -94px;
+  padding: 126px 40px 56px;
   text-align: center;
 
+  @media (min-width: 768px) {
+    padding: 154px 56px 96px;
+  }
+
+  @media (min-width: 992px) {
+    padding-top: 214px;
+    padding-bottom: 120px;
+  }
+
   h1 {
     margin: 0 0 16px;
   }
 
   p {
-    font-size: 1.5em;
+    font-size: 1.8rem;
     max-width: 848px;
     margin: 0 auto 40px;
+
+    @media (min-width: 768px) {
+      font-size: 2rem;
+    }
+    
+    @media (min-width: 992px) {
+      font-size: 2.4rem;
+    }
   }
 
   span {
@@ -23,9 +41,13 @@
     font-weight: 700;
     letter-spacing: 0.5px;
     line-height: 20px;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
     padding: 2px 9px;
     text-transform: uppercase;
+
+    @media (min-width: 992px) {
+      margin-bottom: 16px;
+    }
   }
 
   .g-btn {
diff --git a/website/source/configuration.html.erb b/website/source/configuration.html.erb
index 39355f58df..82650051b9 100644
--- a/website/source/configuration.html.erb
+++ b/website/source/configuration.html.erb
@@ -8,17 +8,15 @@ description: |-
 <div class='consul-connect'>
 
   <section class='g-hero'>
-    <div class='g-container'>
-      <h1>Service configuration made easy.</h1>
-      <p>Feature rich key/value store lets you easily configure services.</p>
-      <a href="#" class="g-btn download">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
-          <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
-        </svg>
-        Download
-      </a>
-      <a href="#" class="g-btn dark-outline">Explore Docs</a>
-    </div>
+    <h1>Service configuration made easy.</h1>
+    <p>Feature rich key/value store lets you easily configure services.</p>
+    <a href="#" class="g-btn download">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+        <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
+      </svg>
+      Download
+    </a>
+    <a href="#" class="g-btn dark-outline">Explore Docs</a>
   </section>
 
   <section class='g-section'>
diff --git a/website/source/discovery.html.erb b/website/source/discovery.html.erb
index 021845fceb..ad98eb71cf 100644
--- a/website/source/discovery.html.erb
+++ b/website/source/discovery.html.erb
@@ -8,17 +8,15 @@ description: |-
 <div class='consul-connect'>
 
   <section class='g-hero'>
-    <div class='g-container'>
-      <h1>Service discovery made easy.</h1>
-      <p>Service Registry enables services to register and discover each other in dymanic infrastructure.</p>
-      <a href="#" class="g-btn download">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
-          <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
-        </svg>
-        Download
-      </a>
-      <a href="#" class="g-btn dark-outline">Explore Docs</a>
-    </div>
+    <h1>Service discovery made easy.</h1>
+    <p>Service Registry enables services to register and discover each other in dymanic infrastructure.</p>
+    <a href="#" class="g-btn download">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+        <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
+      </svg>
+      Download
+    </a>
+    <a href="#" class="g-btn dark-outline">Explore Docs</a>
   </section>
 
   <section class='g-section'>
diff --git a/website/source/segmentation.html.erb b/website/source/segmentation.html.erb
index d47cb1adbd..a1c5a7f425 100644
--- a/website/source/segmentation.html.erb
+++ b/website/source/segmentation.html.erb
@@ -8,18 +8,16 @@ description: |-
 <div class='consul-connect'>
 
   <section class='g-hero'>
-    <div class='g-container'>
-      <span>New Feature</span>
-      <h1>Service segmentation made easy.</h1>
-      <p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p>
-      <a href="#" class="g-btn download">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
-          <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
-        </svg>
-        Download
-      </a>
-      <a href="#" class="g-btn dark-outline">Explore Docs</a>
-    </div>
+    <span>New Feature</span>
+    <h1>Service segmentation made easy.</h1>
+    <p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p>
+    <a href="#" class="g-btn download">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+        <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
+      </svg>
+      Download
+    </a>
+    <a href="#" class="g-btn dark-outline">Explore Docs</a>
   </section>
 
   <section class='g-section'>