diff --git a/website/source/assets/stylesheets/consul-connect/components/_button.scss b/website/source/assets/stylesheets/consul-connect/components/_button.scss
index 815967887e..46d126e9a8 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_button.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_button.scss
@@ -1,5 +1,6 @@
 .g-btn {
   background-color: $consul-red;
+  border: 2px solid $consul-red;
   border-radius: 3px;
   box-sizing: border-box;
   color: $white;
@@ -9,7 +10,7 @@
   letter-spacing: 0;
   line-height: 24px;
   outline: 0;
-  padding: 12px 30px;
+  padding: 10px 28px;
   position: relative;
   text-align: center;
   transition: all 0.25s ease;
@@ -17,6 +18,7 @@
   &:focus,
   &:hover {
     background-color: #ce4a86;
+    border-color: #ce4a86;
     color: $white;
     text-decoration: none;
     transform: translateY(-1px);
@@ -30,7 +32,6 @@
     background: $white;
     border: 2px solid $white;
     color: $consul-black;
-    padding: 10px 28px; /* subtracting the border, so sizes are even */
 
     &:hover {
       background: $consul-black;
@@ -50,7 +51,6 @@
   &.dark-outline {
     background: none;
     border: 2px solid $consul-black;
-    padding: 10px 28px; /* subtracting the border, so sizes are even */
     color: $consul-black;
 
     &:hover {
@@ -62,7 +62,6 @@
   &.white-outline {
     background: none;
     border: 2px solid $white;
-    padding: 10px 28px; /* subtracting the border, so sizes are even */
     color: $white;
 
     &:hover {
diff --git a/website/source/assets/stylesheets/consul-connect/components/_hero.scss b/website/source/assets/stylesheets/consul-connect/components/_hero.scss
index 4aabe5c20f..c638e32f5d 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_hero.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_hero.scss
@@ -28,7 +28,12 @@
     text-transform: uppercase;
   }
 
-  .g-btn + .g-btn {
-    margin-left: 20px;
+  .g-btn {
+    min-width: 144px;
+    padding: 10px;
+
+    & + .g-btn {
+      margin-left: 20px;
+    }
   }
 }
diff --git a/website/source/assets/stylesheets/consul-connect/components/_section.scss b/website/source/assets/stylesheets/consul-connect/components/_section.scss
index 9b461337ae..d66eba4e97 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_section.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_section.scss
@@ -2,17 +2,6 @@
   overflow: hidden;
   padding: 96px 0;
 
-  & .intro {
-    margin: 0 auto 64px;
-    max-width: 784px;
-    text-align: center;
-
-    & h2,
-    & h3 {
-      margin: 0 0 24px;
-    }
-  }
-
   &.bg-light {
     background: #f7f8fa !important; //TODO - !important is to override the `#page-home section` #fff background;
   }
@@ -26,6 +15,17 @@
     border-top: 1px solid #e5e6eb;
   }
 
+  & .intro {
+    margin: 0 auto 64px;
+    max-width: 784px;
+    text-align: center;
+
+    & h2,
+    & h3 {
+      margin: 0 0 24px;
+    }
+  }
+
   li {
     list-style-type: none;
     margin: 16px 0;
diff --git a/website/source/assets/stylesheets/consul-connect/pages/_home.scss b/website/source/assets/stylesheets/consul-connect/pages/_home.scss
index 9b723366e6..c1dfbd32dd 100644
--- a/website/source/assets/stylesheets/consul-connect/pages/_home.scss
+++ b/website/source/assets/stylesheets/consul-connect/pages/_home.scss
@@ -1,4 +1,73 @@
 #page-home {
+  .home-hero {
+    overflow: hidden;
+    padding-top: 96px;
+
+    .g-container > div {
+      display: flex;
+      margin: 0 (-$site-gutter-padding);
+
+      & > div {
+        padding: 0 ($site-gutter-padding);
+        width: 50%;
+
+        &:first-child {
+          align-items: center;
+          display: flex;
+          justify-content: center;
+        }
+
+        .notification {
+          background: #fce2ee;
+          border-radius: 3px;
+          color: #650d34;
+          display: inline-block;
+          font-size: 1.4rem;
+          padding: 12px;
+
+          span {
+            background: $consul-red;
+            border-radius: 3px;
+            color: #fff;
+            font-size: 1.2rem;
+            font-weight: 700; // TODO - don't have access to this weight yet
+            margin-right: 8px;
+            padding: 2px 9px;
+            text-transform: uppercase;
+          }
+
+          svg {
+            margin-left: 4px;
+          }
+        }
+
+        h1 {
+          font-size: 4.8rem;
+          margin: 40px 0 16px;
+        }
+
+        p {
+          font-size: 2.4rem;
+          font-weight: 100; // TODO - don't have access to this weight yet
+          margin: 16px 0 40px;
+        }
+
+        img {
+          box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4);
+        }
+
+        .g-btn {
+          min-width: 144px;
+          padding: 10px;
+
+          & + .g-btn {
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+  }
+
   .home-cta-section {
     color: $white;
     display: flex;
@@ -22,6 +91,7 @@
         max-width: 564px;
         padding: 96px 0;
         text-align: center;
+        width: 100%;
 
         div:first-child {
           height: 50px;
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 584e62a28c..d14caea0c1 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -7,6 +7,32 @@ description: |-
 
 <div class='consul-connect'>
 
+  <section class='home-hero'>
+    <div class='g-container'>
+      <div>
+        <div>
+          <div>
+            <a class='notification' href='#'>
+              <span>New</span> Consul 1.0 release. Get the details <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><path fill="#650D34" d="M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></svg>
+            </a>
+            <h1>Service Mesh Made Easy</h1>
+            <p>Connect, configure, and secure services in dynamic 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'>Get Started</a>
+          </div>
+        </div>
+        <div>
+          <img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section class='g-section bg-light'>
     <div class='g-container'>
       <div class='intro'>
@@ -22,8 +48,8 @@ description: |-
         </div>
         <div>
           <span class='line'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
-                <path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
+            <svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'>
+                <path fill='#CA2171' d='M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z'/>
             </svg>
           </span>
           <span class='dot'></span>
@@ -90,7 +116,7 @@ description: |-
         <div class='code-sample'>
           <div>
             <span>Code Sample</span>
-            <div class="code">
+            <div class='code'>
               <code>$ curl \
   --request POST \
   --data \
@@ -180,9 +206,9 @@ description: |-
         </div>
         <p>Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
         <div>
-          <a href="#" class="g-btn white 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"/>
+          <a href='#' class='g-btn white 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>
@@ -196,7 +222,7 @@ description: |-
         </div>
         <p>Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.</p>
         <div>
-          <a href="https://www.hashicorp.com/products/consul" class="g-btn white-outline">Learn More</a>
+          <a href='https://www.hashicorp.com/products/consul' class='g-btn white-outline'>Learn More</a>
         </div>
       </div>
     </div>