diff --git a/assets/styles/layouts/_error-page.scss b/assets/styles/layouts/_error-page.scss
index 36778828b..0743af4d8 100644
--- a/assets/styles/layouts/_error-page.scss
+++ b/assets/styles/layouts/_error-page.scss
@@ -7,7 +7,7 @@
 
   .error-content {
     margin-top: 10vh;
-    max-width: 310px;
+    max-width: 380px;
   }
 
   .error-code {
@@ -56,24 +56,50 @@
     margin: 2rem 0 1.5rem;
 
     .btn {
-      display: block;
+      display: flex;
+      position: relative;
       flex-grow: 1;
       margin-right: 4px;
       padding: .75rem 1rem;
       border-radius: $radius;
       text-align: center;
+      justify-content: center;
+      align-items: center;
       color: $error-page-btn-text;
       transition: background-color .2s;
+      z-index: 1;
       @include gradient($article-btn-gradient);
-      &:hover {
-        @include gradient($article-btn-gradient-hover);
-      }
+
       &.back:before {
         content: "\e90a";
         font-family: "icomoon";
         margin-right: .35rem;
         vertical-align: text-top;
       }
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: $radius;
+        @include gradient($article-btn-gradient-hover);
+        opacity: 0;
+        transition: opacity .2s;
+        z-index: -1;
+      }
+
+      &:hover {
+        cursor: pointer;
+
+        &:after {
+          opacity: 1;
+        }
+      }
+
     }
   }
 
diff --git a/layouts/404.html b/layouts/404.html
index bc45ee189..75992c0da 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,34 +1,70 @@
-{{ partial "header.html" . }}
+<!doctype html>
+<html lang="en">
+  <head>
+    {{ partial "header/google-analytics-head.html" }}
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Page not found</title>
+    <meta name="description" content="Whoops! Looks like this page doesn't exist.">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="shortcut icon" href="/img/favicon.png" type="image/png" sizes="32x32">
 
-<div class="error-page">
-    <div class="error-content">
-      <div class="error-code">
-        <div class="error-code-border">
-          <h1>404</h1>
+    {{ partial "header/stylesheets.html" }}
+    {{ partial "header/google-fonts.html" }}
+    {{ partial "header/javascript.html" }}
+
+    <meta name="Copyright" content="InfluxData Inc." />
+  </head>
+  <body>
+
+    {{ partial "header/google-analytics-body.html" }}
+
+    <div class="error-page">
+        <div class="error-content">
+          <div class="error-code">
+            <div class="error-code-border">
+              <h1>404</h1>
+            </div>
+          </div>
+          <div class="wayfinding">
+            <a class="btn back" href="javascript:history.back()">Back</a>
+            <a class="btn version"></a>
+          </div>
+        	<p>Whoops! Looks like this page doesn't exist. If a link brought you here, <a href="https://github.com/influxdata/docs-v2/issues/new" target="_blank">let us know</a>. We'd like to fix it.</p>
         </div>
-      </div>
-      <div class="wayfinding">
-        <a class="btn back" href="javascript:history.back()">Back</a>
-        <a class="btn version">InfluxDB</a>
-      </div>
-    	<p>Whoops! Looks like this page doesn't exist. If a link brought you here, <a href="https://github.com/influxdata/docs-v2/issues/new" target="_blank">let us know</a>. We'd like to fix it.</p>
     </div>
-</div>
 
-<script>
-  function getProjectVersion(urlPath) {
-    if (/v[0-9][.][0-9]*/.test(urlPath)) { return urlPath.match(/v[0-9][.][0-9]*/)[0] }
-    else { return undefined  }
-  }
+    <script>
+      function getProject(urlPath) {
+        if      (/^\/influxdb\//.test(urlPath)) { return {name: 'InfluxDB', path: '/influxdb'} }
+        else if (/^\/telegraf\//.test(urlPath)) { return {name: 'Telegraf', path: '/telegraf'} }
+        else if (/^\/chronograf\//.test(urlPath)) { return {name: 'Chronograf', path: '/chronograf'} }
+        else if (/^\/kapacitor\//.test(urlPath)) { return {name: 'Kapacitor', path: '/kapacitor'} }
+        else if (/^\/enterprise_influxdb\//.test(urlPath)) { return {name: 'InfluxDB Enterprise', path: '/enterprise_influxdb'} }
+        else if (/^\/platform\//.test(urlPath)) { return {name: 'InfluxData Platform', path: '/platform'} }
+        else { return undefined  }
+      }
+      function getProjectVersion(urlPath) {
+        if (/v[0-9][.][0-9]*/.test(urlPath)) { return urlPath.match(/v[0-9][.][0-9]*/)[0] }
+        else { return undefined  }
+      }
 
-  var path = window.location.pathname
-  var projectVersion = getProjectVersion(path)
+      var path = window.location.pathname
+      var project = getProject(path)
+      var projectVersion = getProjectVersion(path)
 
-  if ( projectVersion != undefined ) {
-    $('.btn.version').append(' ' + projectVersion).attr('href', '/' + projectVersion + '/');
-  } else {
-    $('.btn.version').hide()
-  }
-</script>
+      if ( project != undefined && project.path === '/platform') {
+        $('.btn.version').append(`${project.name}`).attr('href', `${project.path}/`);
+      } else if ( project != undefined && projectVersion != undefined ) {
+        $('.btn.version').append(`${project.name} ${projectVersion}`).attr('href', `${project.path}/${projectVersion}/`);
+      } else if ( project != undefined && projectVersion == undefined ){
+        $('.btn.version').append(`${project.name}`).attr('href', `${project.path}/`);
+      } else {
+        $('.btn.version').hide()
+      }
+    </script>
+
+  </body>
+{{ partial "footer/javascript.html" . }}
+</html>
 
-{{ partial "footer.html" . }}
