diff --git a/assets/js/search-interactions.js b/assets/js/search-interactions.js
index 6aca60da0..4628111bd 100644
--- a/assets/js/search-interactions.js
+++ b/assets/js/search-interactions.js
@@ -1,10 +1,10 @@
 // Fade content wrapper when focusing on search input
 $('#algolia-search-input').focus(function() {
-  $('.content-wrapper').fadeTo(400, .35);
+  $('.content-wrapper, .group-wrapper').fadeTo(300, .35);
 })
 
 // Hide search dropdown when leaving search input
 $('#algolia-search-input').blur(function() {
-  $('.content-wrapper').fadeTo(200, 1);
+  $('.content-wrapper, .group-wrapper').fadeTo(200, 1);
   $('.ds-dropdown-menu').hide();
 })
diff --git a/assets/styles/layouts/_content-wrapper.scss b/assets/styles/layouts/_content-wrapper.scss
index de7e57a9b..5955680be 100644
--- a/assets/styles/layouts/_content-wrapper.scss
+++ b/assets/styles/layouts/_content-wrapper.scss
@@ -4,6 +4,7 @@
   position: relative;
   border-radius: $radius 0 0 $radius;
   overflow: hidden;
+  z-index: 0;
 
   .copyright {
     padding: .5rem 1rem .5rem .5rem;
diff --git a/assets/styles/layouts/_homepage.scss b/assets/styles/layouts/_homepage.scss
index 86512464d..41a3198f1 100644
--- a/assets/styles/layouts/_homepage.scss
+++ b/assets/styles/layouts/_homepage.scss
@@ -1,36 +1,33 @@
-///  Styles for the placeholder homepage only viewalbe with running locally ///
+//////////////////////////////// HOMEPAGE STYLES ///////////////////////////////
+
 .home {
   display: flex;
   flex-direction: column;
-
-  h2 {font-weight: $medium;}
+  align-items: flex-start;
 
   .section {
     display: flex;
+    width: 100%;
+    padding: 0rem 3rem;
+    flex-grow: 1;
 
-    &.row{
+    .row{
       flex-direction: row;
     }
 
-    .card {
-      padding: 1.5rem;
-    }
-
     .half { width: 50%; }
     .third { width: 33.33%; }
+    .quarter { width: 25%; }
     .two-thirds { width: 66.67%; }
-
-    span.version {
-      font-size: 1.15rem;
-      opacity: .65;
-    }
+    .three-quarters { width: 75%; }
   }
 
   ///////////////////////////// HERO SECTION STYLES ////////////////////////////
 
   .hero {
     position: relative;
-    padding: 3.5rem 3rem 4.5rem;
+    padding-top: 3.5rem;
+    padding-bottom: 4.5rem;
     @include gradient($grad-WarpSpeed)
     color: $g20-white;
     z-index: 0;
@@ -94,7 +91,8 @@
 
   //////////////////////////// SEARCH SECTION STYLES ///////////////////////////
   .search {
-    padding: 2rem 3rem;
+    padding-top: 2rem;
+    padding-bottom: 2.25rem;
 
     .sidebar--search {
       max-width: 55%;
@@ -109,24 +107,203 @@
         top: .35rem;
         right: .45rem;
       }
-      .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
-        top: auto !important;
-        left: auto !important;
-        margin-bottom: 1.5rem;
+      .algolia-autocomplete.algolia-autocomplete-left, .algolia-autocomplete.algolia-autocomplete-right {
+        .ds-dropdown-menu {
+          top: auto !important;
+          left: 0 !important;
+          margin-bottom: 1.5rem;
 
-        &:after {
-          content: "";
-          box-shadow: 2px 2px 10px $sidebar-search-shadow;
-          height: 100%;
-          width: 100%;
-          mix-blend-mode: multiply;
+          &:after {
+            content: "";
+            box-shadow: 2px 2px 10px $sidebar-search-shadow;
+            height: 100%;
+            width: 100%;
+            mix-blend-mode: multiply;
+          }
         }
       }
     }
   }
 
-  .telegraf {@include gradient($telegraf-dropdown-gradient); color: $g20-white;}
-  .influxdb {@include gradient($default-dropdown-gradient); color: $g20-white;}
-  .chronograf {@include gradient($chronograf-dropdown-gradient); color: $g20-white;}
-  .kapacitor {@include gradient($kapacitor-dropdown-gradient); color: $g20-white;}
+  /////////////////////////////// PRODUCT CARDS ////////////////////////////////
+
+  .group-wrapper {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    border-radius: $radius;
+    background-color: $sidebar-search-bg;
+    box-shadow: 2px 2px 10px $sidebar-search-shadow;
+    overflow: hidden;
+    color: $article-text;
+
+    h2 {
+      margin-top: .5rem;
+      font-weight: $medium;
+      color: $article-heading-alt;
+      a {color: inherit; &:hover{color: inherit;}}
+    }
+    p {
+      line-height: 1.45rem;
+      max-width: 700px;
+    }
+    a {
+      color: $article-link;
+      text-decoration: none;
+      font-weight: $medium;
+      &:hover{ color: $article-link-hover; }
+    }
+  }
+
+  .card {
+    padding: 1.5rem 1.5rem 1rem;
+    flex: 1 0;
+
+    span.version {
+      font-size: 1.15rem;
+      opacity: .65;
+    }
+  }
+
+  #tick-cards {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    color: $g20-white;
+    a {
+      display: inline-block;
+      position: relative;
+      color: $g20-white;
+      &:after{
+        content: "";
+        margin-top: .15rem;
+        width: 0;
+        display: block;
+        height: 2px;
+        @include gradient($grad-whiteFade)
+        transition: width .2s;
+      }
+      &:hover{
+        &:after { width: 100%; }
+      }
+    }
+  }
+
+  #platform {
+
+  }
+  .telegraf {@include gradient($telegraf-dropdown-gradient);}
+  .influxdb {@include gradient($default-dropdown-gradient);}
+  .chronograf {@include gradient($chronograf-dropdown-gradient);}
+  .kapacitor {@include gradient($kapacitor-dropdown-gradient);}
+
+  #enterprise {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
+  //////////////////////////// HOMEPAGE MEDIA QUERIES ////////////////////////////
+
+  @include media(large) {
+    overflow-x: hidden;
+    .hero #hero-img{
+      max-height: 130%;
+      max-width: 70%;
+      right: -20%;
+      bottom: -30%;
+    }
+  }
+
+  @media (max-width: 1020px) {
+    #tick-stack #tick-cards .card { width: 50%; flex: none;}
+    .section {
+      .quarter { width: 33.33%; }
+      .three-quarters { width: 66.64%; }
+    }
+  }
+
+  @media (max-width: 920px) {
+    .section {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      &.hero { padding-top: 2rem; padding-bottom: 3rem;}
+      &.search,
+      &#enterprise { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+    }
+    .hero {
+      #hero-img{ display: none; }
+      .half { width: 100%; }
+    }
+    .search {
+      .sidebar--search { max-width: 100%; }
+    }
+  }
+
+  @include media(medium) {
+    .search .algolia-autocomplete.algolia-autocomplete-right, .algolia-autocomplete.algolia-autocomplete-right {
+      .ds-dropdown-menu {
+        width: 100%;
+      }
+    }
+  }
+
+  @include media(small) {
+    .section {
+
+      .quarter, .three-quarters { width: 100%; }
+
+      &.hero {
+        order: 2;
+        padding-top: 1.5rem;
+        padding-bottom: 2rem;
+        h2 { font-size: 2rem; margin-top: .5rem; }
+        p { font-size: 1rem; line-height: 1.5rem; }
+      }
+      &.search {
+        order: 1;
+        padding: 0 1rem .5rem;
+        width: 100%;
+
+        .sidebar--search {
+          max-width: 100%;
+          font-size: 1rem;
+
+          input {
+            padding: .5em 2.15rem .5rem .75rem
+          }
+
+          &:after {
+            top: .15rem;
+            right: .25rem;
+            font-size: 1.75rem;
+          }
+          .algolia-autocomplete.algolia-autocomplete-right, .algolia-autocomplete.algolia-autocomplete-right {
+            .ds-dropdown-menu {
+              width: 100vw;
+              left: -1rem !important;
+              right: inherit;
+            }
+          }
+        }
+      }
+      &#tick-stack {
+        order: 3;
+        padding-left: 0;
+        padding-right: 0;
+        #tick-cards {
+          flex-direction: column;
+          .card { width: 100%; }
+        }
+      }
+      &#enterprise { order: 4; padding-left: 0; padding-right: 0; }
+    }
+    .group-wrapper {flex-direction: column;}
+    .row {
+      flex-direction: column;
+    }
+    .card {
+
+    }
+  }
+
 }
diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss
index 6285aec54..3a5468b9c 100644
--- a/assets/styles/layouts/_top-nav.scss
+++ b/assets/styles/layouts/_top-nav.scss
@@ -52,7 +52,7 @@
   .selector-dropdowns {
     display: flex;
     z-index: 100;
-    right: 5.5rem;
+    padding-right: .25rem;
   }
 
   .dropdown {
diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss
index 6e7a7659c..2d3a44996 100644
--- a/assets/styles/tools/_color-palette.scss
+++ b/assets/styles/tools/_color-palette.scss
@@ -144,5 +144,4 @@ $grad-PurpleFog:          $p-potassium, $cp-munchkin;
 $grad-PurpleRain:         $p-void, $cp-marguerite;
 
 // Transparent gradients
-$grad-purpleFade:         $br-pulsar, rgba($br-pulsar, 0);
-$grad-blueFade:           $b-ocean, rgba($b-ocean, 0);
+$grad-whiteFade:         rgba($g20-white, .75), rgba($g20-white, 0);
diff --git a/layouts/index.html b/layouts/index.html
index 0a738c704..e18bd9459 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,10 +9,9 @@
 {{ partial "topnav.html" . }}
 
 <div class="home">
+
   <div class="section hero">
-
     {{ partial "svgs/homepage-hero.svg" }}
-
     <div class="half">
       <h2>InfluxDB Cloud & <br />InfluxDB {{ $influxdbVersionV2 }} OSS</h2>
       <p>
@@ -36,46 +35,55 @@
               placeholder='Search the docs'>
     </div>
   </div>
-  <div class="section row">
 
-    <div class="card">
-      <h2>InfluxData Platform</h2>
-      <p>Some marketing description about the TICK Stack</p>
-      <a href="/platform/">Learn more about the platform</a>
-    </div>
-    <div class="card telegraf">
-      <h2>Telegraf <span class="version">{{ $telegrafVersion }}</span></h2>
-      <p>Open source server agent to collect metrics from stacks, sensors and systems.</p>
-      <a href="/telegraf/{{ $telegrafVersion }}/"></a>
-    </div>
-    <div class="card influxdb">
-      <h2>InfluxDB <span class="version">{{ $influxdbVersionV1 }}</span></h2>
-      <p>The time series database designed to handle high write and query loads.</p>
-      <a href="/influxdb/{{ $influxdbVersionV1 }}/"></a>
-    </div>
-    <div class="card chronograf">
-      <h2>Chronograf <span class="version">{{ $chronografVersion }}</span></h2>
-      <p>The administrative user interface and visualization engine for InfluxDB.</p>
-      <a href="/chronograf/{{ $chronografVersion }}/"></a>
-    </div>
-    <div class="card kapacitor">
-      <h2>Kapacitor <span class="version">{{ $kapacitorVersion }}</span></h2>
-      <p>Process and alert on stream and batch data from InfluxDB.</p>
-      <a href="/kapacitor/{{ $kapacitorVersion }}/"></a>
+  <div id="tick-stack" class="section row">
+    <div class="group-wrapper">
+      <div id="platform" class="card quarter">
+        <h2><a href="/platform/">InfluxData TICK Stack</a></h2>
+        <p>The leading modern time series platform, built for metrics and events.</p>
+        <p><a href="/platform/">Learn more about the platform</a></p>
+      </div>
+      <div id="tick-cards" class="three-quarters row">
+        <div class="card telegraf">
+          <h2><a href="/telegraf/{{ $telegrafVersion }}/">Telegraf <span class="version">{{ $telegrafVersion }}</span></a></h2>
+          <p>Collect metrics from stacks, sensors and systems.</p>
+          <p><a href="/telegraf/{{ $telegrafVersion }}/">Telegraf documentation</a></p>
+        </div>
+        <div class="card influxdb">
+          <h2><a href="/influxdb/{{ $influxdbVersionV1 }}/">InfluxDB <span class="version">{{ $influxdbVersionV1 }}</span></a></h2>
+          <p>Write and query time series data.</p>
+          <p><a href="/influxdb/{{ $influxdbVersionV1 }}/">InfluxDB  documentation</a></p>
+        </div>
+        <div class="card chronograf">
+          <h2><a href="/chronograf/{{ $chronografVersion }}/">Chronograf <span class="version">{{ $chronografVersion }}</span></a></h2>
+          <p>Visualize and manage time series data.</p>
+          <p><a href="/chronograf/{{ $chronografVersion }}/">Chronograf documentation</a></p>
+        </div>
+        <div class="card kapacitor">
+          <h2><a href="/kapacitor/{{ $kapacitorVersion }}/">Kapacitor <span class="version">{{ $kapacitorVersion }}</span></a></h2>
+          <p>Process and alert on time series data.</p>
+          <p><a href="/kapacitor/{{ $kapacitorVersion }}/">Kapacitor documentation</a></p>
+        </div>
+      </div>
     </div>
   </div>
 
-  <div class="section row">
-    <div class="card">
-      <h2>InfluxData Enterprise offerings</h2>
-      <p>Some marketing description about Enterprise</p>
+  <div id="enterprise" class="section row">
+    <div class="group-wrapper">
+      <div class="card quarter">
+        <h2>Enterprise offerings</h2>
+        <p>Enterprise tools to meet your business needs.</p>
+        <p><a href="https://www.influxdata.com/contact-sales/">Contact Sales</a></p>
+      </div>
+      <div id="tick-cards" class="three-quarters row">
+        <div class="card influxdb">
+          <h2><a href="/enterprise_influxdb/{{ $enterpriseVersion }}/">InfluxDB Enterprise <span class="version">{{ $enterpriseVersion }}</span></a></h2>
+          <p>A scalable InfluxDB cluster designed for heavy workloads. Run InfluxDB Enterprise on your own infrastructure — on-premise, private cloud, public cloud, or on the edge.</p>
+          <p><a href="/enterprise_influxdb/{{ $enterpriseVersion }}/">InfluxDB Enterprise documentation</a></p>
+        </div>
+      </div>
     </div>
-    <div class="card influxdb">
-      <h2>InfluxDB Enterprise <span class="version">{{ $enterpriseVersion }}</span></h2>
-      <p>A production-ready InfluxDB cluster that can run anywhere.</p>
-      <a href="/enterprise_influxdb/{{ $enterpriseVersion }}/"></a>
-    </div>
-  <div>
+  </div>
 </div>
 
 {{ partial "footer.html" . }}