diff --git a/_includes/footer.html b/_includes/footer.html
index 6d9823c711..d87370f647 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,28 +1,76 @@
-<footer>
-  <div class="wrapper">
-    <ul>
-      <li><a href="https://rocket.chat/download">Download</a></li>
-      <li><a href="https://rocket.chat/support">Support</a></li>
-      <li><a href="https://rocket.chat/cloud">Cloud</a></li>
-      <li><a href="https://rocket.chat/docs/">Docs</a></li>
-    </ul>
-    <ul>
-      <li><a href="https://rocket.chat/team">Team</a></li>
-      <li><a href="https://rocketchat.recruitee.com/">Jobs</a></li>
-      <li><a href="https://rocket.chat/partners">Partners</a></li>
-      <li><a href="https://rocket.chat/terms">Terms of Service</a></li>
-    </ul>
-    <ul>
-      <li><a href="https://rocket.chat/community">Community</a></li>
-      <li><a href="https://forums.rocket.chat">Forums</a></li>
-      <li><a href="https://rocket.chat/blog/">Blog</a></li>
-      <li><a href="https://rocket.chat/contact">Contact</a></li>
-    </ul>
-    <ul>
-      <li><a href="https://shop.spreadshirt.com/rocketchat" target="_blank">Swag Store</a></li>
-      <li><a href="https://www.stickermule.com/user/1070688638/stickers" target="_blank">Stickers</a></li>
-      <li><a href="https://rocket.chat/press">Press</a></li>
-    </ul>
+<footer class="app-footer {% if page.theme == 'light' %}app-footer--light{% else %}app-footer--black{% endif %}">
+  <div class="container">
+
+    <div class="app-footer_col">
+      <input id="menu1" type="checkbox" />
+      <label for="menu1" class="app-footer_pre-menu">Product</label>
+      <ul class="app-footer_nav">
+        <li><a href="/">Rocket.Chat</a></li>
+        <li><a href="/support">Support</a></li>
+        <li><a href="/cloud">Cloud</a></li>
+        <li><a href="/community">Community</a></li>
+        <li><a target="_blank" rel="noopener noreferrer" href="//rocket.chat/docs/">Documentation</a></li rel='noopener noreferrer'>
+      </ul>
+    </div>
+
+    <div class="app-footer_col">
+      <input id="menu2" type="checkbox" />
+      <label for="menu2" class="app-footer_pre-menu">Company</label>
+      <ul class="app-footer_nav">
+        <li><a href="/team">Team</a></li>
+        <li><a target="_blank" rel="noopener noreferrer"href="//rocketchat.recruitee.com/">Jobs</a></li rel='noopener noreferrer'>
+        <li><a href="/contact">Contact</a></li>
+        <li><a href="/partners">Partners</a></li>
+        <li><a href="/press">Press</a></li>
+        <li><a href="/blog/">Blog</a></li>
+        <li><a href="/bots/">Bots</a></li>
+        <li><a href="/pt/webinars/">Webinars</a></li>
+        <li><a href="//shop.spreadshirt.com/rocketchat" target="_blank" rel="noopener noreferrer">Gift shop</a></li>
+      </ul>
+    </div>
+
+    <div class="app-footer_col">
+      <input id="menu3" type="checkbox" />
+      <label for="menu3" class="app-footer_pre-menu">Legal</label>
+      <ul class="app-footer_nav">
+        <li><a href="/terms">Terms of Service</a></li>
+        <li><a href="/privacy">Privacy</a></li>
+        <li><a href="/dmca">DMCA Policy</a></li>
+      </ul>
+    </div>
+
+    <div class="app-footer_col">
+      <input id="menu4" type="checkbox" />
+      <label for="menu4" class="app-footer_pre-menu">Get started</label>
+      <ul class="app-footer_nav">
+        <li><a class="app-footer_install" target="_blank" rel="noopener noreferrer" href="//cloud.rocket.chat/trial/small"><span><img src="/images/default/cloud.svg" alt="Free trial"></span> Cloud trial</a></li>
+        <li><a class="app-footer_install" href="/install" title="install"><span style="margin-top: -0.1em;"><img src="/images/default/install.svg" alt="Install"></span> Install server</a></li>
+      </ul>
+    </div>
+
+     <div class="app-footer_wrap-logo">
+      <h1 class="app-footer_logo">
+        <a href="/">
+            <img src="/images/default/logo.svg" alt="Rocket.Chat">
+        </a>
+      </h1>
+
+      <a class="app-footer_github" target="_blank" href="//github.com/RocketChat/Rocket.Chat" rel="noopener noreferrer">
+          <span><img src="/images/default/star.svg" alt="GitHub Stars"></span>
+        <span class="star-count">{{site.stars}}K</span>
+      </a>
+      <a class="app-footer_github" target="_blank" href="//github.com/RocketChat/Rocket.Chat/fork" rel="noopener noreferrer">
+          <span><img src="/images/default/fork.svg" alt="GitHub forks"></span>
+        <span class="fork-count">{{site.forks}}K</span>
+      </a>
+      <a class="app-footer_github-link" target="_blank" href="//github.com/RocketChat/Rocket.Chat" rel="noopener noreferrer">
+          <span><img src="/images/default/github.svg" alt="GitHub"></span>
+        Open on GitHub
+      </a>
+
+      <a href="//keycdn.com" target="_blank" rel="noopener noreferrer" class="app-footer_partner">
+          <img src="/images/default/keycdnlogo.png" alt="KeyCDN">
+      </a>
+    </div>
   </div>
-  <div class="clear"></div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000000..1fdc0a1bfc
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,57 @@
+<div class="app-header app-header--black">
+    <header class="app-header_wrap headroom--top">
+      <div class="container">
+        <h1 class="app-header_logo">
+          <a href="/">
+            <img class="normal" src="/images/default/logo.svg" alt="Rocket.Chat">
+          </a>
+        </h1>
+
+        <input type="checkbox" id="handle-menu" />
+        <label class="app-header_handle-menu" for="handle-menu"><span /></label>
+
+        <nav class="app-header_menu">
+          <ul>
+            <li><a href="//rocket.chat/cloud">Cloud</a></li>
+            <li><a href="//rocket.chat/install">Install</a></li>
+            <li><a href="//rocket.chat/support">Support</a></li>
+            <li><a href="//rocket.chat/community">Community</a></li>
+            <li><a href="//rocket.chat/docs/">Docs</a></li>
+            <li><a href="//rocket.chat/blog/">Blog</a></li>
+            <li><a href="//rocket.chat/contact">Contact</a></li>
+          </ul>
+          <a class="app-header_install" href="/cloud"><span><img src="/images/default/cloud.svg" alt="Install"></span> Try now</a>
+        </nav>
+
+      </div>
+    </header>
+  </div>
+
+<!--
+  <div class="pusher">
+  <header>
+    <div class="wrapper">
+      <div class="burger">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <a class="logo" href="/">
+        <img src="{{ site.url }}/images/default/logo.svg" alt="Rocket.Chat">
+      </a>
+      <a class="logo mobile" href="/">
+        <img src="{{ site.url }}/images/default/icon.svg" alt="Rocket.Chat">
+      </a>
+      <div class="header-items">
+        <ul>
+          <li><a href="https://rocket.chat/download">Download</a></li>
+          <li><a href="https://rocket.chat/cloud">Cloud</a></li>
+          <li><a href="https://rocket.chat/community">Community</a></li>
+          <li><a href="https://rocket.chat/docs/">Docs</a></li>
+          <li><a href="https://rocket.chat/blog/">Blog</a></li>
+          <li><a href="https://rocket.chat/contact">Contact</a></li>
+        </ul>
+      </div>
+    </div>
+  </header>
+-->
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 443c8f6525..1fe407f783 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -46,32 +46,8 @@
     </div>
   </div>
 
-<div class="pusher">
-  <header>
-    <div class="wrapper">
-      <div class="burger">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
-      <a class="logo" href="/">
-        <img src="{{ site.url }}/images/default/logo.svg" alt="Rocket.Chat">
-      </a>
-      <a class="logo mobile" href="/">
-        <img src="{{ site.url }}/images/default/icon.svg" alt="Rocket.Chat">
-      </a>
-      <div class="header-items">
-        <ul>
-          <li><a href="https://rocket.chat/download">Download</a></li>
-          <li><a href="https://rocket.chat/cloud">Cloud</a></li>
-          <li><a href="https://rocket.chat/community">Community</a></li>
-          <li><a href="https://rocket.chat/docs/">Docs</a></li>
-          <li><a href="https://rocket.chat/blog/">Blog</a></li>
-          <li><a href="https://rocket.chat/contact">Contact</a></li>
-        </ul>
-      </div>
-    </div>
-  </header>
+  {% include header.html %}
+
   <main>
     <div class="wrapper main">
       <div class="toc-wrapper">
@@ -96,29 +72,7 @@
     </div>
   </main>
 </div>
-<footer>
-  <div class="wrapper">
-    <ul>
-      <li><a href="https://rocket.chat/download">Download</a></li>
-      <li><a href="https://rocket.chat/cloud">Cloud</a></li>
-      <li><a href="https://rocket.chat/docs/">Docs</a></li>
-    </ul>
-    <ul>
-      <li><a href="https://rocket.chat/team">Team</a></li>
-      <li><a href="https://rocketchat.recruitee.com/">Jobs</a></li>
-      <li><a href="https://rocket.chat/partners">Partners</a></li>
-    </ul>
-    <ul>
-      <li><a href="https://rocket.chat/contact">Contact</a></li>
-      <li><a href="https://rocket.chat/press">Press</a></li>
-      <li><a href="https://rocket.chat/blog/">Blog</a></li>
-    </ul>
-    <ul>
-      <li><a href="https://shop.spreadshirt.com/rocketchat" target="_blank" data-proofer-ignore>Store</a></li>
-      <li><a href="https://www.stickermule.com/user/1070688638/stickers" target="_blank">Stickers</a></li>
-    </ul>
-  </div>
-</footer>
+  {% include footer.html %}
 <script src="{{ site.url }}/public/js/responsiveControl.js"></script>
 <script type="text/javascript">
   window.jekyll = { site: { url: '{{ site.url }}' } };
@@ -133,6 +87,7 @@
     inputSelector: '#search'
   });
 </script>
+<script src="/main.js"></script>
 
 <!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MLJ76N"
diff --git a/_layouts/home.html b/_layouts/home.html
index 6c7609f292..dc02d2a6af 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -28,29 +28,9 @@
 
 
 <body>
-  <header>
-    <div class="wrapper">
-      <a class="logo" href="/">
-        <img src="{{ site.url }}/images/default/logo.svg" alt="Rocket.Chat">
-      </a>
-      <a class="logo mobile" href="/">
-        <img src="{{ site.url }}/images/default/icon.svg" alt="Rocket.Chat">
-      </a>
-      <div class="header-items">
-        <ul>
-          <li><a href="https://rocket.chat/download">Download</a></li>
-          <li><a href="https://rocket.chat/cloud">Cloud</a></li>
-          <li><a href="https://rocket.chat/community">Community</a></li>
-          <li><a href="https://rocket.chat/docs/">Docs</a></li>
-          <li><a href="https://rocket.chat/blog/">Blog</a></li>
-          <li><a href="https://rocket.chat/contact">Contact</a></li>
-        </ul>
-      </div>
-    </div>
-  </header>
-
+  {% include header.html %}
 
-  <main style="margin-top: 0">
+  <main style="margin-top: 0; padding-top: 0;">
     <div class="search-wrapper">
       <h1 class="title">Rocket.Chat Documentation</h1>
       <p class="description">Welcome to Rocket.Chat! Get familiar with Rocket.Chat and explore our features:</p>
diff --git a/_sass/footer.scss b/_sass/footer.scss
new file mode 100644
index 0000000000..b358e8aa26
--- /dev/null
+++ b/_sass/footer.scss
@@ -0,0 +1,302 @@
+.app-footer {
+    .container {
+      padding-bottom: 4em;
+
+      @media screen and (min-width: $tablet) {
+        padding-top: 5em;
+        padding-bottom: 5em;
+        @include flexbox();
+        @include justify-content(space-between);
+      }
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1.5px;
+    }
+  }
+
+  .app-footer_wrap-logo {
+    width: 50%;
+    margin-top: 2em;
+
+    @media screen and (min-width: $tablet) {
+      margin-top: 0;
+      max-width: 13em;
+      @include order(-1);
+    }
+
+    // only IE
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-right: 3em;
+    }
+  }
+
+  .app-footer_logo {
+    display: none;
+
+    @media screen and (min-width: $tablet) {
+      @include flexbox();
+      margin-bottom: 3em;
+      @include flex(1);
+    }
+
+    img {
+      width: 7.5em;
+    }
+  }
+
+  .app-footer_github {
+    display: inline-block;
+    border-radius: 2px;
+    width: 48%;
+    text-align: center;
+    font-size: 0.8em;
+    line-height: 3.4;
+    transition: all 0.3s ease;
+
+    img {
+      display: inline-block;
+      position: relative;
+      top: 0.2em;
+      margin-right: 0.5em;
+      transition: all 0.3s ease;
+    }
+
+    &:hover {
+      img {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .app-footer_github-link {
+    display: inline-flex;
+    width: 100%;
+    margin-top: 1em;
+    transition: all 0.3s ease;
+
+    img {
+      display: inline-block;
+      position: relative;
+      top: 0.17em;
+      margin-right: 0.5em;
+      transition: all 0.3s ease;
+    }
+
+    &:hover {
+      img {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .app-footer_col {
+    // only IE
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      width: 20%;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1.5px;
+
+      @media screen and (min-width: $tablet) {
+        display: none;
+      }
+    }
+  }
+
+  .app-footer_pre-menu {
+    font-size: 0.8em;
+    font-weight: bold;
+    line-height: 1;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    display: block;
+    padding: 1.7em 0;
+    position: relative;
+
+    &:after {
+      content: "+";
+      display: block;
+      color: $brand;
+      font-size: 1.7em;
+      font-weight: 300;
+      line-height: 0.4;
+      position: absolute;
+      right: 1em;
+      top: 0.95em;
+      height: 0.6em;
+      width: 0.6em;
+      transition: all 0.3s ease;
+      transform-origin: 50%;
+    }
+
+    @media screen and (min-width: $tablet) {
+      margin-bottom: 1.3em;
+      padding: 0;
+      line-height: 1.6;
+
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  .app-footer_nav {
+    max-height: 0;
+    transition: all 0.3s ease;
+    overflow: hidden;
+    padding-left: 1.5em;
+
+    @media screen and (min-width: $tablet) {
+      padding-left: 0;
+      max-height: 100%;
+    }
+
+    a {
+      margin-bottom: 0.5em;
+      line-height: 2;
+      font-weight: 500;
+      transition: all 0.3s ease;
+
+      @media screen and (min-width: $tablet) {
+        line-height: 1.7;
+      }
+    }
+
+    @media screen and (min-width: $tablet) {
+      + .app-footer_nav {
+        margin-top: 2em;
+      }
+    }
+  }
+
+  .app-footer_col input {
+    display: none;
+  }
+
+  input:checked + .app-footer_pre-menu + .app-footer_nav,
+  input:checked + .app-footer_pre-menu + .app-footer_nav + .app-footer_nav {
+    max-height: 50vh;
+    padding-top: 0.5em;
+    padding-bottom: 1.5em;
+  }
+
+  input:checked + .app-footer_pre-menu:after {
+    transform: rotate(135deg);
+    top: 0.9em;
+  }
+
+  .app-footer_install {
+    @include flexbox();
+    transition: color 0.3s ease;
+
+    span {
+      display: inline-block;
+      width: 2em;
+    }
+
+    img {
+      margin-top: 0.2em;
+      margin-right: 0.5em;
+    }
+  }
+
+  // Dark version
+  .app-footer--black {
+    background: $space;
+
+    .app-footer_col:after,
+    &:before {
+      background-image: linear-gradient(
+        -90deg,
+        #030c1a 0%,
+        #121f33 28%,
+        #121f33 74%,
+        #030c1a 100%
+      );
+    }
+
+    .app-footer_github-link {
+      color: #fff;
+
+      &:hover {
+        color: $grey-light;
+      }
+    }
+
+    .app-footer_github {
+      color: #fff;
+      background: $space-grey;
+
+      &:hover {
+        color: $grey-light;
+      }
+    }
+
+    .app-footer_pre-menu {
+      color: $grey-light;
+    }
+
+    .app-footer_nav a {
+      color: #fff;
+
+      &:hover {
+        color: $grey-light;
+      }
+    }
+  }
+
+  // Light version
+  .app-footer--light {
+    .app-footer_col:after,
+    &:before {
+      background-image: linear-gradient(
+        -90deg,
+        #ffffff 0%,
+        #e7ebf2 26%,
+        #e7ebf2 74%,
+        #ffffff 100%
+      );
+    }
+
+    .app-footer_github-link {
+      color: $space;
+
+      &:hover {
+        color: $grey-dark;
+      }
+    }
+
+    .app-footer_github {
+      color: $space;
+      background: $grey-smoke;
+
+      &:hover {
+        color: $grey-dark;
+      }
+    }
+
+    .app-footer_pre-menu {
+      color: $grey-light;
+    }
+
+    .app-footer_nav a {
+      color: $space;
+
+      &:hover {
+        color: $grey-dark;
+      }
+    }
+  }
+
+  .app-footer_partner {
+    margin: 3em auto;
+    width: 6em;
+  }
\ No newline at end of file
diff --git a/_sass/grid.scss b/_sass/grid.scss
new file mode 100644
index 0000000000..af359c634b
--- /dev/null
+++ b/_sass/grid.scss
@@ -0,0 +1,215 @@
+.container {
+    max-width: $container;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: $gutter;
+    padding-right: $gutter;
+
+    @media screen and (min-width: $tablet) {
+      padding-left: $gutter-larger;
+      padding-right: $gutter-larger;
+    }
+  }
+
+  .container--full {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: $gutter;
+    padding-right: $gutter;
+
+    @media screen and (min-width: $tablet) {
+      padding-left: $gutter-larger;
+      padding-right: $gutter-larger;
+    }
+  }
+
+  .flex-grid {
+    display: block;
+    margin-left: -$gutter / 2;
+    margin-right: -$gutter / 2;
+
+    @media (min-width: $tablet) {
+      @include flexbox();
+      margin-left: -$gutter-larger / 2;
+      margin-right: -$gutter-larger / 2;
+    }
+
+    &.grid--center {
+      @include align-items(center);
+    }
+
+    &.grid--justify-around {
+      @include justify-content(space-around);
+    }
+
+    &.grid--justify-end {
+      @include justify-content(flex-end);
+    }
+
+    &.grid--reverse {
+      @media screen and (min-width: $tablet) {
+        @include flex-direction(row-reverse);
+      }
+    }
+
+    &.grid--wrap {
+      @include flex-wrap(wrap);
+    }
+
+    @mixin column {
+      padding-left: $gutter / 2;
+      padding-right: $gutter / 2;
+      margin-bottom: $gutter;
+      width: 100%;
+
+      @media (min-width: $tablet) {
+        @include flex(1);
+        margin-bottom: $gutter-larger;
+        padding-left: $gutter-larger / 2;
+        padding-right: $gutter-larger / 2;
+      }
+
+      &.no-gutter {
+        margin-bottom: 0;
+      }
+
+      &.mini-gutter {
+        @media (min-width: $tablet) {
+          @include flex(1);
+          margin-bottom: $gutter;
+          padding-left: $gutter / 2;
+          padding-right: $gutter / 2;
+        }
+      }
+    }
+
+    > .col--free {
+      @include column;
+
+      @media (min-width: $tablet) {
+        flex: 0;
+      }
+    }
+
+    > .col {
+      @include column;
+    }
+
+    > .col--haft {
+      @include column;
+
+      @media (min-width: $tablet) {
+        max-width: 50%;
+        @include flex-basis(50%);
+      }
+    }
+
+    > .col--third {
+      @include column;
+
+      @media (min-width: $tablet) {
+        max-width: 33%;
+        @include flex-basis(33%);
+      }
+    }
+
+    > .col--fourth {
+      @include column;
+
+      @media (min-width: $tablet) {
+        max-width: 25%;
+        @include flex-basis(25%);
+      }
+    }
+
+    > .col--fifth {
+      @include column;
+
+      @media (min-width: $tablet) {
+        max-width: 20%;
+        @include flex-basis(20%);
+      }
+    }
+
+    > .col--three-quarter {
+      @include column;
+
+      @media (min-width: $tablet) {
+        max-width: 75%;
+        @include flex-basis(75%);
+      }
+    }
+  }
+
+  .flex-grid--nobreak {
+    @include flexbox();
+    margin-left: -$gutter / 2;
+    margin-right: -$gutter / 2;
+
+    @media (min-width: $tablet) {
+      margin-left: -$gutter-larger / 2;
+      margin-right: -$gutter-larger / 2;
+    }
+
+    @mixin column {
+      @include flex(1);
+      padding-left: $gutter / 2;
+      padding-right: $gutter / 2;
+      margin-bottom: $gutter;
+      width: 100%;
+
+      @media (min-width: $tablet) {
+        margin-bottom: $gutter-larger;
+        padding-left: $gutter-larger / 2;
+        padding-right: $gutter-larger / 2;
+      }
+
+      &.mini-gutter {
+        @media (min-width: $tablet) {
+          @include flex(1);
+          margin-bottom: $gutter;
+          padding-left: $gutter / 2;
+          padding-right: $gutter / 2;
+        }
+      }
+
+      &.no-gutter {
+        margin-bottom: 0;
+      }
+    }
+
+    > .col--free {
+      @include column;
+
+      flex: 0;
+    }
+
+    > .col {
+      @include column;
+    }
+
+    > .col--haft {
+      @include column;
+      max-width: 50%;
+      @include flex-basis(50%);
+    }
+
+    > .col--third {
+      @include column;
+      max-width: 33%;
+      @include flex-basis(33%);
+    }
+
+    > .col--fourth {
+      @include column;
+      max-width: 25%;
+      @include flex-basis(25%);
+    }
+
+    > .col--fifth {
+      @include column;
+
+      max-width: 20%;
+      @include flex-basis(20%);
+    }
+  }
diff --git a/_sass/header.scss b/_sass/header.scss
new file mode 100644
index 0000000000..e9c615a823
--- /dev/null
+++ b/_sass/header.scss
@@ -0,0 +1,284 @@
+.app-header {
+    height: 4.3em;
+  }
+
+  .app-header_wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    transition: all 0.4s ease;
+    z-index: 9999;
+    background-color: $space;
+
+    &.headroom--unpinned {
+      transform: translateY(-100%);
+    }
+
+    .container {
+      @include flexbox();
+      @include justify-content(space-between);
+      @include align-items(center);
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1.5px;
+    }
+  }
+
+  .app-header_logo {
+    @include flexbox();
+    padding: 1.5em 0;
+
+    @media screen and (min-width: 60em) {
+      @include flex(1);
+    }
+
+    img {
+      width: 7.5em;
+      transition: all .3s ease;
+    }
+
+    .dark {
+      position: absolute;
+      opacity: 0;
+      z-index: 2;
+    }
+  }
+
+  .app-header_menu {
+    position: absolute;
+    top: 4.5em;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    height: 0;
+    overflow: hidden;
+    padding: 0 3em 0;
+    transition: all 0.3s ease;
+
+    @media screen and (min-width: $tablet) {
+      @include flexbox();
+      @include justify-content(space-between);
+      @include flex(3);
+      position: static;
+      padding: 0 !important;
+      height: auto !important;
+    }
+
+    li {
+      color: #fff;
+      margin-bottom: 1em;
+      display: block;
+
+      @media screen and (min-width: $tablet) {
+        margin-left: 2em;
+        margin-bottom: 0;
+        display: inline-block;
+      }
+
+      // only IE
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        margin-top: 1.2em;
+      }
+    }
+
+    a {
+      display: inline-flex;
+      transition: color 0.3s ease;
+    }
+
+    .app-header_install {
+      margin-top: 1em;
+      margin-bottom: 1em;
+      padding-top: 1em;
+      @include flexbox();
+      transition: color 0.3s ease;
+
+      @media screen and (min-width: $tablet) {
+        margin: 0;
+        padding: 0;
+      }
+
+      img {
+        margin-top: 0.02em;
+        margin-right: 0.5em;
+      }
+
+      // only IE
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        float: right;
+        margin-top: 1.2em;
+        margin-left: 4em;
+
+        img,
+        span {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  .app-header_handle-menu {
+    display: block;
+    margin-top: 3px;
+
+    @media screen and (min-width: $tablet) {
+      display: none;
+    }
+
+    &:before,
+    &:after,
+    span {
+      content: "";
+      display: block;
+      height: 2px;
+      width: 1.3em;
+      margin-bottom: 5px;
+      transition: all 0.3s ease;
+      position: relative;
+    }
+  }
+
+  #handle-menu {
+    display: none;
+  }
+
+  #handle-menu:checked ~ .app-header_menu {
+    height: 100vh;
+    padding: 1em 3em 0;
+  }
+
+  #handle-menu:checked ~ .app-header_handle-menu {
+    &:before {
+      opacity: 0;
+      transition: all 0.3s ease;
+    }
+    span {
+      transform: rotate(45deg);
+      transform: transform-origin(50%);
+    }
+    &:after {
+      transform: rotate(-45deg);
+      transform: transform-origin(50%);
+      top: -7px;
+    }
+  }
+
+  // Dark version
+  .app-header--black {
+    .headroom--not-top {
+      background: $space;
+
+      .app-header_wrap,
+      .app-header_menu {
+        background: $space;
+      }
+    }
+
+    .app-header_menu {
+      @media screen and (max-width: $tablet) {
+        background: $space;
+      }
+    }
+
+    .app-header_wrap:after {
+      background-image: linear-gradient(
+        -90deg,
+        #030c1a 0%,
+        #121f33 28%,
+        #121f33 74%,
+        #030c1a 100%
+      );
+    }
+
+    .app-header_install,
+    .app-header_menu li {
+      color: #fff;
+
+      &:hover {
+        color: $grey-light;
+      }
+    }
+
+    .app-header_install {
+      border-top: 1px solid #121f33;
+
+      @media screen and (min-width: $tablet) {
+        border: 0;
+      }
+    }
+
+    .current-page {
+      color: $grey;
+    }
+
+    .app-header_handle-menu {
+      &:before,
+      &:after,
+      span {
+        background: #fff;
+      }
+    }
+  }
+
+  // Light version
+  .app-header--light {
+    background: #fff;
+
+    .app-header_wrap,
+    .app-header_menu {
+      background: #fff;
+    }
+
+    .app-header_logo  {
+      margin: 0;
+      .dark {
+        opacity: 1;
+      }
+    }
+
+    .app-header_wrap:after {
+      background-image: linear-gradient(
+        -90deg,
+        #ffffff 0%,
+        #e7ebf2 26%,
+        #e7ebf2 74%,
+        #ffffff 100%
+      );
+    }
+
+    .app-header_install,
+    .app-header_menu li {
+      color: $space;
+
+      &:hover {
+        color: $grey-dark;
+      }
+    }
+
+    .app-header_install {
+      border-top: 1px solid #e7ebf2;
+
+      @media screen and (min-width: $tablet) {
+        border: 0;
+      }
+    }
+
+    .current-page {
+      color: $grey;
+    }
+
+    .app-header_handle-menu {
+      &:before,
+      &:after,
+      span {
+        background: $space;
+      }
+    }
+  }
+
+
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 13e5de78a9..7251687aac 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -8,23 +8,12 @@
 // typography
 
 body, label, input, textarea, select {
-  font-family: $ui-font-family;
+  font-family: $font-family;
   font-size: $font-size;
   line-height: $line-height;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
-
-a, a:visited {
-  color: $color-primary;
-  text-decoration: none;
-}
-
-a:hover {
-  color: $color-secondary;
-  text-decoration: underline;
-}
-
 // structure
 
 .clear {
@@ -38,20 +27,69 @@ body {
   margin: 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  margin: 0 0 1em;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: -0.02em;
-  line-height: 1.2em;
-  margin: 0 0 1rem 0;
-  display: flex;
-  align-items: center;
+.wrapper{
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    line-height: 1.28571429em;
+    margin: calc(2rem -  0.14285714em ) 0em 1rem;
+    font-weight: bold;
+    padding: 0em;
+    display: flex;
+  }
+  h1 {
+    min-height: 1rem;
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.71428571rem;
+  }
+  h3 {
+    font-size: 1.28571429rem;
+  }
+  h4 {
+    font-size: 1.07142857rem;
+  }
+  h5 {
+    font-size: 1rem;
+  }
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h5:first-child {
+    margin-top: 0em;
+  }
+  h1:last-child,
+  h2:last-child,
+  h3:last-child,
+  h4:last-child,
+  h5:last-child {
+    margin-bottom: 0em;
+  }
 
-  a, a:visited {
+  p {
+    margin: 0em 0em 1em;
+    line-height: 1.4285em;
+  }
+  p:first-child {
+    margin-top: 0em;
+  }
+  p:last-child {
+    margin-bottom: 0em;
+  }
+
+  a {
+    color: #4183C4;
+    text-decoration: none;
+  }
+  a:hover {
+    color: #1e70bf;
     text-decoration: none;
-    color: $color-dark;
   }
+
 }
 
 hr {
@@ -84,12 +122,7 @@ a.button, input[type=submit], input[type=button] {
   }
 }
 
-ul, ol {
-  padding: 0 0 0 1.5em;
-}
-
 code, pre{
-  font-family: $code-font-family;
   color: $color-light;
   max-width: max-content;
   overflow: auto;
@@ -147,61 +180,61 @@ blockquote {
   }
 }
 
-header {
-  padding: 1em 0;
-  background-color: $color-dark;
-  color: #fff;
-  font-weight: 600;
-  text-transform: uppercase;
-  top: 0;
-  width: 100%;
-  z-index: 10;
-
-  .wrapper {
-    line-height: 28px;
-    height: 28px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .logo {
-    display: inline-block;
-    height: 28px;
-
-    img {
-      display: inline-block;
-      color: #fff;
-      height: 100%;
-    }
-  }
-  .logo.mobile {
-    display: none;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    li {
-      display: inline-block;
-      padding-right: 14px;
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-  }
-
-  a, a:visited {
-    color: #fff;
-  }
-
-  a:hover, a.active {
-    color: $color-light;
-  }
-}
+// header {
+//   padding: 1em 0;
+//   background-color: $color-dark;
+//   color: #fff;
+//   font-weight: 600;
+//   text-transform: uppercase;
+//   top: 0;
+//   width: 100%;
+//   z-index: 10;
+
+//   .wrapper {
+//     line-height: 28px;
+//     height: 28px;
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+//   }
+
+//   .logo {
+//     display: inline-block;
+//     height: 28px;
+
+//     img {
+//       display: inline-block;
+//       color: #fff;
+//       height: 100%;
+//     }
+//   }
+//   .logo.mobile {
+//     display: none;
+//   }
+
+//   ul {
+//     margin: 0;
+//     padding: 0;
+//     list-style: none;
+
+//     li {
+//       display: inline-block;
+//       padding-right: 14px;
+
+//       &:last-child {
+//         padding-right: 0;
+//       }
+//     }
+//   }
+
+//   a, a:visited {
+//     color: #fff;
+//   }
+
+//   a:hover, a.active {
+//     color: $color-light;
+//   }
+// }
 
 .edit-github{
   display: flex;
@@ -315,7 +348,7 @@ header {
 main {
   background-color: #fff;
   margin: 15px auto 0;
-  padding: 20px 0;
+  padding:  20px 0;
   min-width: 100vw;
 }
 
@@ -364,46 +397,13 @@ main {
   min-height: 100vh;
 }
 
-footer {
-  padding: 4em 0 3em;
-  background-color: $color-dark;
-  color: #fff;
-
-  .wrapper{
-    display: flex;
-
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 0 1em;
-  }
-
-  ul {
-    width: 25%;
-    float: left;
-    padding: 0;
-    list-style: none;
-
-    li {
-      line-height: 2;
-    }
-  }
-
-  a, a:visited {
-    color: #fff;
-  }
-
-  a:hover {
-    color: #fff;
-  }
-}
-
 .burger {
   display: none;
 }
 
-.header-items {
-  display: flex;
-}
+// .header-items {
+//   display: flex;
+// }
 
 .search-button {
   display: none;
@@ -429,13 +429,12 @@ footer {
 }
 
 .search-wrapper{
-  background-color: #1f2329;
+  background-color: $space;
   color: white;
   padding: 9em 0;
   text-align: center;
 }
 
-
 .home-header {
   display: flex;
   flex-direction: column;
@@ -454,6 +453,8 @@ footer {
 .title{
   margin: 0;
   display: block;
+  font-weight: 600;
+  font-size: 2.5em;
 
   &.card {
     font-size: 1.15em;
@@ -495,13 +496,6 @@ footer {
 // mobile
 
 @media all and (max-width: 1000px) {
-  footer {
-    ul {
-      width: 50%;
-      padding-left: 0;
-    }
-  }
-
   .toc {
     max-height: unset;
     max-width: fit-content;
@@ -555,16 +549,16 @@ footer {
   }
 
 
-  header {
-    .logo {
-      display: none;
-    }
-    .logo.mobile {
-      height: 40px;
-      display: block;
-    }
+//   header {
+//     .logo {
+//       display: none;
+//     }
+//     .logo.mobile {
+//       height: 40px;
+//       display: block;
+//     }
 
-  }
+//   }
   .wrapper {
       &.main{
         padding: 0px;
diff --git a/_sass/mixins.scss b/_sass/mixins.scss
new file mode 100644
index 0000000000..1546cc6df1
--- /dev/null
+++ b/_sass/mixins.scss
@@ -0,0 +1,140 @@
+@mixin transform-origin($origin) {
+    moz-transform-origin: $origin;
+    -o-transform-origin: $origin;
+    -ms-transform-origin: $origin;
+    -webkit-transform-origin: $origin;
+    transform-origin: $origin;
+  }
+
+  @mixin keyframes($name) {
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+    @-ms-keyframes #{$name} {
+      @content;
+    }
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+
+  @mixin transform($transforms) {
+    -moz-transform: $transforms;
+    -o-transform: $transforms;
+    -ms-transform: $transforms;
+    -webkit-transform: $transforms;
+    transform: $transforms;
+  }
+
+  @mixin flexbox() {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  @mixin flex($values) {
+    -webkit-box-flex: $values;
+    -moz-box-flex: $values;
+    -webkit-flex: $values;
+    -ms-flex: $values;
+    flex: $values;
+  }
+
+  @mixin flex-direction($direction) {
+    -webkit-flex-direction: $direction;
+    -moz-flex-direction: $direction;
+    -ms-flex-direction: $direction;
+    flex-direction: $direction;
+  }
+
+  @mixin flex-wrap($wrap) {
+    -webkit-flex-wrap: $wrap;
+    -moz-flex-wrap: $wrap;
+    -ms-flex-wrap: $wrap;
+    flex-wrap: $wrap;
+  }
+
+  @mixin flex-flow($flow) {
+    -webkit-flex-flow: $flow;
+    -moz-flex-flow: $flow;
+    -ms-flex-flow: $flow;
+    flex-flow: $flow;
+  }
+
+  @mixin order($val) {
+    -webkit-box-ordinal-group: $val;
+    -moz-box-ordinal-group: $val;
+    -ms-flex-order: $val;
+    -webkit-order: $val;
+    order: $val;
+  }
+
+  @mixin flex-grow($grow) {
+    -webkit-flex-grow: $grow;
+    -moz-flex-grow: $grow;
+    -ms-flex-grow: $grow;
+    flex-grow: $grow;
+  }
+
+  @mixin flex-shrink($shrink) {
+    -webkit-flex-shrink: $shrink;
+    -moz-flex-shrink: $shrink;
+    -ms-flex-shrink: $shrink;
+    flex-shrink: $shrink;
+  }
+
+  @mixin flex-basis($width) {
+    -webkit-flex-basis: $width;
+    -moz-flex-basis: $width;
+    -ms-flex-basis: $width;
+    flex-basis: $width;
+  }
+
+  @mixin justify-content($justify) {
+    -webkit-justify-content: $justify;
+    -moz-justify-content: $justify;
+    -ms-justify-content: $justify;
+    justify-content: $justify;
+    -ms-flex-pack: center;
+  }
+
+  @mixin align-content($align) {
+    -webkit-align-content: $align;
+    -moz-align-content: $align;
+    -ms-align-content: $align;
+    align-content: $align;
+  }
+
+  @mixin align-items($align) {
+    -webkit-align-items: $align;
+    -moz-align-items: $align;
+    -ms-align-items: $align;
+    align-items: $align;
+  }
+
+  @mixin align-self($align) {
+    -webkit-align-self: $align;
+    -moz-align-self: $align;
+    -ms-align-self: $align;
+    align-self: $align;
+  }
+
+  @mixin placeholder($color) {
+    &::-webkit-input-placeholder {
+      color: $color;
+    }
+    &::-moz-placeholder {
+      color: $color;
+    }
+    &:-ms-input-placeholder {
+      color: $color;
+    }
+    &:-moz-placeholder {
+      color: $color;
+    }
+  }
diff --git a/_sass/reset.scss b/_sass/reset.scss
new file mode 100644
index 0000000000..d345377abd
--- /dev/null
+++ b/_sass/reset.scss
@@ -0,0 +1,172 @@
+/**
+ * 1. Reset something everytime is a suck
+ * 2. Inherit from default setting
+ */
+
+ * {
+	margin: 0; /* 1 */
+	padding: 0; /* 1 */
+	background-repeat: no-repeat; /* 1 */
+	box-sizing: inherit; /* 2 */
+	border: 0;
+}
+
+/**
+ * 1. Prevent certain mobile browsers from automatically zooming fonts.
+ * 2. Border box sizing
+ * 3. Smooth scroll
+ */
+
+html {
+	-ms-text-size-adjust: 100%; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 1 */
+	box-sizing: border-box; /* 2 */
+	scroll-behavior: smooth; /* 3 */
+}
+
+/**
+ * 1. Set default font styles
+ * 2. Beautiful fonts again
+ * 3. Prevent vertical scroll
+ */
+
+body {
+	font: 16px/1.6 sans-serif; /* 1 */
+	-moz-osx-font-smoothing: grayscale; /* 2 */
+	-webkit-font-smoothing: antialiased; /* 2 */
+	overflow-x: hidden; /* 3 */
+}
+
+/**
+ * All Headings looks the same
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+	font-size: 1em;
+	font-weight: normal;
+}
+
+/**
+ * 1. Reset link styles
+ * 2. Links are more dynamic now
+ * 3. Remove the gray background on active links in IE 10.
+ */
+
+a {
+	text-decoration: none; /* 1 */
+	color: inherit; /* 1 */
+	display: inline-block; /* 2 */
+	background-color: transparent; /* 3 */
+}
+
+/**
+ * No bullets anymore
+ */
+
+ol,
+ul {
+	list-style: none;
+}
+
+/**
+ * Remove all default styles and all elements looks the same
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	overflow: visible;
+	border: 0;
+	outline: 0;
+	font: inherit;
+	-webkit-font-smoothing: inherit;
+	letter-spacing: inherit;
+	background: none;
+	vertical-align: top;
+}
+
+/**
+ * Prevent chrome autofill style
+ */
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+	-webkit-transition: 'color 9999s ease-out, background-color 9999s ease-out';
+	-webkit-transition-delay: 9999s;
+}
+
+/**
+ * You should define size for textarea
+ */
+
+textarea {
+	resize: none;
+}
+
+/**
+ * Pointer cursor for buttons
+ */
+
+input[type='button'],
+button {
+	cursor: pointer;
+}
+
+/**
+ * Pointer cursor for buttons
+ */
+
+button[disabled],
+html input[disabled] {
+	cursor: default;
+}
+
+/**
+ * 1. Remove space after each image
+ * 2. Ensure responsive images
+ * 3. Remove the border on images inside links in IE 10.
+ */
+
+img {
+	display: block; /* 1 */
+	max-width: 100%; /* 2 */
+	height: auto; /* 2 */
+	border-style: none; /* 3 */
+}
+
+/**
+ * If a SVG doesn't have fill, it'll give one
+ */
+
+svg {
+	fill: currentColor;
+}
+
+/**
+ * Collapse border spacing
+ */
+
+table {
+	border-spacing: 0;
+}
+
+::-moz-selection {
+	color: $grey-smoke;
+	background: $brand;
+}
+
+::selection {
+	color: $grey-smoke;
+	background: $brand;
+}
diff --git a/_sass/theme.scss b/_sass/theme.scss
new file mode 100644
index 0000000000..2b62716331
--- /dev/null
+++ b/_sass/theme.scss
@@ -0,0 +1,199 @@
+// Body
+body.dark {
+	background: $space;
+}
+
+body.light {
+	background: #fff;
+}
+
+// Type
+.theme_type--brand {
+	color: $brand;
+}
+
+.theme_type--dark {
+	color: #fff;
+}
+
+.theme_type--grey {
+	color: $grey-light;
+}
+
+.theme_type--kinda-white {
+	color: rgba(255, 255, 255, 0.7);
+}
+
+.theme_type--light {
+	color: $grey;
+}
+
+.theme_type--space {
+	color: $space;
+}
+
+// Box
+.theme_box--brand {
+	background-color: $brand;
+}
+
+.theme_box--space {
+	background-color: $space;
+}
+
+.theme_box--dark-strong {
+	background-color: $space-b;
+}
+
+.theme_box--dark {
+	background-color: $space-grey;
+}
+
+.theme_box--dark-medium {
+	background-color: $grey-dark;
+}
+
+.theme_box--light {
+	background-color: $grey-bg;
+}
+
+.theme_box--white {
+	background-color: #fff;
+}
+
+.code--light {
+	border: 1px solid $grey-smoke;
+}
+
+.code--dark {
+	border: 1px solid $grey-dark;
+	color: #fff;
+	background: $space-b;
+}
+
+// Forms
+
+// Selects
+.select--theme-light {
+	border: 1px solid $grey-smoke;
+
+	&:after {
+		border-top: 1.5px solid $space;
+		border-right: 1.5px solid $space;
+	}
+}
+
+.select--theme-dark {
+	border: 1.5px solid $grey-dark;
+	background-color: $space-b;
+
+	&:hover {
+		border-color: $grey;
+	}
+
+	&:after {
+		border-top: 1.5px solid #fff;
+		border-right: 1.5px solid #fff;
+	}
+
+	select {
+		color: #fff;
+	}
+}
+
+// Inputs
+.input--dark,
+.input-child--dark input {
+	color: #fff;
+	border: 1.5px solid $grey-dark;
+	background-color: $space-b;
+	@include placeholder($grey-light);
+
+	input {
+		@include placeholder($grey-light);
+	}
+
+	&[disabled],
+	&.disabled {
+		background: $grey-bg;
+		color: $grey-smoke-dark;
+		@include placeholder($grey-smoke-dark);
+	}
+
+	&:hover,
+	&:focus {
+		border-color: $grey;
+	}
+}
+
+.input-child--dark[data-prefix] {
+	&:before {
+		background: $space-grey;
+		color: #fff;
+		border-right: 1.5px solid $grey-dark;
+	}
+}
+
+// Table
+.table--dark {
+	td {
+		border: 1px solid $space-grey;
+	}
+
+	table {
+		background: $space;
+		color: $grey-light;
+	}
+
+	th {
+		background: $space-grey;
+		color: $grey-light;
+	}
+
+	strong {
+		color: #fff !important;
+	}
+}
+
+.table--light {
+	table {
+		background: #fff;
+		color: $grey;
+
+		&:first-child {
+			th {
+				border-left: 1px solid $grey-smoke;
+			}
+		}
+
+		&:last-child {
+			th {
+				border-right: 1px solid $grey-smoke;
+			}
+		}
+	}
+
+	td {
+		border: 1px solid $grey-smoke;
+		color: $grey;
+
+		p {
+			color: $space;
+		}
+	}
+
+	th {
+		background: $grey-bg;
+		color: $grey-dark;
+		border-left: 1px solid $grey-smoke;
+		border-right: 1px solid $grey-smoke;
+
+		@media screen and (min-width: $tablet) {
+			border: 0;
+		}
+	}
+
+	strong {
+		color: $space !important;
+	}
+}
diff --git a/_sass/typography.scss b/_sass/typography.scss
new file mode 100644
index 0000000000..c5337297a7
--- /dev/null
+++ b/_sass/typography.scss
@@ -0,0 +1,131 @@
+body,
+input,
+button,
+pre {
+  font-size: $font-size;
+  font-family: $font-family;
+  color: $grey;
+}
+
+.display--big {
+  line-height: 1.2;
+  font-size: 2em;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: $space;
+
+  @media screen and (min-width: $tablet) {
+    font-size: 2.75em;
+  }
+
+  margin-bottom: 0.4em;
+}
+
+.display {
+  font-size: 2em;
+  line-height: 1.3;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: $space;
+
+  margin-bottom: 0.5em;
+}
+
+.display--small {
+  font-size: 1em;
+  line-height: 1.4;
+  letter-spacing: 0.5px;
+  color: $space;
+
+  @media screen and (min-width: $tablet) {
+    font-size: 1.25em;
+  }
+
+  margin-bottom: 0.4em;
+}
+
+.text,
+p {
+  font-size: $font-size;
+  line-height: $font-leading;
+
+  margin-bottom: 2em;
+}
+
+strong {
+  font-weight: 700;
+}
+
+.text--small {
+  font-size: 0.85em;
+  font-weight: 500;
+
+  margin-bottom: 2em;
+}
+
+.label {
+  font-size: 0.75em;
+  line-height: 1.5;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  font-weight: 700;
+
+  margin-bottom: 1em;
+}
+
+.label--small {
+  font-size: 0.6rem;
+  line-height: 1.6;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-weight: 500;
+
+  margin-bottom: 1em;
+}
+
+.tag {
+  font-size: 0.6em;
+  line-height: 1.6;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  border-radius: 2px;
+  display: inline-block;
+  padding: 0.2em 0.85em;
+  vertical-align: middle;
+  margin-left: 0.8em;
+  margin-right: 0.8em;
+}
+
+.code {
+  font-size: 0.8em;
+  border-radius: 2px;
+  padding: 0.72em 1em;
+}
+
+// Space rules
+.display--small + .button {
+  margin-top: 2.5em;
+}
+
+// Helpers
+.align--center {
+  text-align: center;
+}
+
+.type--nomargin {
+  margin-bottom: 0 !important;
+}
+
+.list {
+  padding-left: 1em;
+
+  ul {
+    padding-left: 1.2em;
+  }
+
+  li {
+    list-style: disc;
+    margin-bottom: .5em;
+  }
+}
\ No newline at end of file
diff --git a/_sass/variables.scss b/_sass/variables.scss
index ed03193b59..6a9ec68ff2 100644
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@@ -1,16 +1,4 @@
-
-$ui-font-family:
-  medium-ui-sans-serif-text-font,-apple-system,BlinkMacSystemFont,"Segoe UI",
-  oboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;
-
-$post-font-family:
-   medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode",
-   "Lucida Sans",Geneva,Arial,sans-serif!important;
-
-$code-font-family:
-  "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  
-$content-width: 1300px;
+$content-width: 1150px;
 
 $line-height: 1.58;
 $font-size: 16px;
@@ -24,3 +12,34 @@ $color-light: #929db3;
 $padding: 2em;
 
 $toc-width: 340px;
+
+// 1. Fonts
+$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-size: 1em;
+$font-leading: 1.5;
+
+// 2. Colors
+$brand: #1d74f5;
+$brand-dark: #0e59c7;
+$warning: #ff5050;
+$space: #030c1a;
+$space-b: #0b182b;
+$space-grey: #121f33;
+
+// 2.1 Grayscale
+$grey-dark: #384a66;
+$grey: #6b7d99;
+$grey-light: #a3b4cc;
+$grey-smoke-dark: #cfd8e6;
+$grey-smoke: #e7ebf2;
+$grey-bg: #f3f5f8;
+
+// 3. Helpers
+$tranitions: 0.3s ease;
+
+// 4. Breackpoints
+$gutter: 1em; // 32px;
+$gutter-larger: 2em; // 16px;
+$container: 74em; // 1184px;
+$tablet: 48.1em; // 768px;
diff --git a/images/default/cloud.svg b/images/default/cloud.svg
new file mode 100644
index 0000000000..8603988370
--- /dev/null
+++ b/images/default/cloud.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="🏠-home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="24x24/installs--dark">
+            <rect id="Rectangle-3" x="0" y="0" width="24" height="24"></rect>
+            <path d="M14.9937744,18 L18,18 C20.209139,18 22,16.209139 22,14 C22,11.790861 20.209139,10 18,10 C18,8.34314575 16.6568542,7 15,7 C14.2524033,7 13.5686759,7.27345718 13.0433869,7.72580245 C12.2196198,6.6751084 10.9386499,6 9.5,6 C7.01471863,6 5,8.01471863 5,10.5 C5,11.0259531 5.09023133,11.5308316 5.25605856,12 L5,12 C3.34314575,12 2,13.3431458 2,15 C2,16.6568542 3.34314575,18 5,18 L8.49377441,18 L14.9937744,18 Z" id="Combined-Shape" stroke="#1D74F5" stroke-width="1.5"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/images/default/fork.svg b/images/default/fork.svg
new file mode 100644
index 0000000000..7074d5e701
--- /dev/null
+++ b/images/default/fork.svg
@@ -0,0 +1 @@
+<svg width="12" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.6 0C8.269 0 7.2 1.018 7.2 2.286c0 .839.487 1.571 1.2 1.964v1.082c0 .244-.1.478-.277.646L6 8 3.877 5.978a.893.893 0 0 1-.277-.646V4.25c.712-.393 1.2-1.125 1.2-1.964C4.8 1.018 3.731 0 2.4 0S0 1.018 0 2.286c0 .839.487 1.571 1.2 1.964v1.653c0 .244.1.478.277.647L4.8 9.714v2.036c-.712.393-1.2 1.125-1.2 1.964C3.6 14.982 4.669 16 6 16s2.4-1.018 2.4-2.286c0-.839-.488-1.571-1.2-1.964V9.714l3.323-3.164a.893.893 0 0 0 .277-.647V4.25c.712-.393 1.2-1.125 1.2-1.964C12 1.018 10.931 0 9.6 0zM2.4 3.66c-.788 0-1.444-.624-1.444-1.374C.956 1.536 1.612.91 2.4.91c.788 0 1.444.625 1.444 1.375S3.188 3.66 2.4 3.66zM6 15.09c-.787 0-1.444-.626-1.444-1.376 0-.75.657-1.375 1.444-1.375.787 0 1.444.625 1.444 1.375S6.787 15.09 6 15.09zM9.6 3.66c-.787 0-1.444-.624-1.444-1.374 0-.75.656-1.375 1.444-1.375.787 0 1.444.625 1.444 1.375S10.387 3.66 9.6 3.66z" fill="#F3F5F8" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/images/default/github.svg b/images/default/github.svg
new file mode 100644
index 0000000000..d35ccaab38
--- /dev/null
+++ b/images/default/github.svg
@@ -0,0 +1 @@
+<svg width="20" height="19" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.477 0 0 4.36 0 9.74c0 4.304 2.865 7.955 6.839 9.243.5.09.682-.211.682-.47 0-.231-.008-.843-.013-1.656-2.782.588-3.369-1.306-3.369-1.306-.454-1.125-1.11-1.425-1.11-1.425-.908-.604.069-.592.069-.592 1.003.069 1.531 1.004 1.531 1.004.892 1.488 2.341 1.059 2.91.81.092-.63.35-1.06.636-1.303-2.22-.245-4.555-1.081-4.555-4.814 0-1.063.39-1.933 1.029-2.613-.103-.247-.446-1.238.098-2.578 0 0 .84-.262 2.75.998A9.818 9.818 0 0 1 10 4.71c.85.004 1.705.112 2.504.328 1.909-1.26 2.747-.998 2.747-.998.546 1.34.203 2.331.1 2.578.64.68 1.028 1.55 1.028 2.613 0 3.742-2.339 4.566-4.566 4.807.359.3.678.895.678 1.803 0 1.302-.012 2.353-.012 2.672 0 .261.18.564.688.47C17.137 17.69 20 14.042 20 9.74 20 4.36 15.522 0 10 0" fill="#FFF" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/images/default/install.svg b/images/default/install.svg
new file mode 100644
index 0000000000..f7bdf083a2
--- /dev/null
+++ b/images/default/install.svg
@@ -0,0 +1 @@
+<svg width="22" height="20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M2.821 6.666C2.534 3.668 2 1 2 1s3.54.209 5.586 3.419m-.077 11.28C5.453 18.797 2 19 2 19s.527-2.633.815-5.605M11 16c5.523 0 10-3 10-6s-4.477-6-10-6S1 7 1 10s4.477 6 10 6z" stroke="#1D74F5" stroke-width="1.5"/><path d="M-1-2h24v24H-1z"/></g></svg>
\ No newline at end of file
diff --git a/images/default/keycdn.svg b/images/default/keycdn.svg
new file mode 100644
index 0000000000..9a555e5c75
--- /dev/null
+++ b/images/default/keycdn.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="2200" height="640" viewBox="0, 0, 2200, 640">
+  <g id="Background">
+    <rect x="0" y="0" width="2200" height="640" fill="#000000" fill-opacity="0"/>
+  </g>
+  <g id="Background"/>
+  <g id="Logo">
+    <path d="M66.571,515.077 C72.793,515.335 79.101,516.208 84.979,518.361 L84.978,518.306 L85.866,518.625 L163.341,443.045 L166.184,446.836 C170.213,452.285 174.477,457.261 178.978,462.237 L180.637,464.132 C181.822,465.316 182.769,466.501 183.954,467.686 L185.849,469.582 L187.745,471.477 L189.403,473.136 L191.299,475.031 L192.957,476.69 L195.09,478.585 L196.985,480.244 C232.999,510.807 278.015,528.102 325.401,529.287 C364.494,530.235 402.638,520.284 436.046,500.619 L441.969,506.779 C448.839,514.124 455.947,521.469 462.819,528.814 C421.593,555.349 373.734,568.617 324.452,567.433 C269.011,566.011 216.177,546.109 173.767,510.57 L174.002,510.096 L124.292,559.097 C126.133,564.892 126.866,570.967 126.943,577.028 C126.943,611.254 99.198,639 64.972,639 C30.746,639 3,611.254 3,577.028 C3,542.802 30.746,515.057 64.972,515.057 L66.571,515.077 z" fill="#FFFFFF"/>
+    <path d="M540.294,195.455 C564.699,235.496 576.781,281.697 575.596,328.61 C574.176,385.945 552.615,440.676 514.706,483.56 L514.944,483.798 L545.507,516.256 C557.826,514.598 570.147,518.862 578.677,527.865 C593.13,543.266 592.655,567.433 577.255,582.123 C561.855,596.575 537.688,596.101 522.999,580.701 C514.469,571.697 510.915,559.14 513.284,547.057 C499.069,531.893 473.954,505.121 459.501,489.957 L456.422,486.64 L459.976,483.798 C469.215,476.453 477.745,468.397 485.563,459.393 C518.023,422.906 536.267,376.468 537.452,327.661 C538.399,290.701 529.632,254.45 511.863,222.465 L540.294,195.455 z" fill="#FFFFFF"/>
+    <path d="M108.579,50.632 C119.471,50.471 129.679,54.769 137.279,62.538 C145.808,71.542 149.362,84.099 146.993,96.183 L205.752,157.784 L202.198,160.626 C192.957,167.971 184.428,176.027 176.609,185.031 C144.151,221.517 125.907,267.956 124.485,316.763 C123.537,353.723 132.304,389.974 150.074,422.196 L121.878,449.679 C97.238,409.401 84.919,363.2 86.339,315.815 C87.562,258.775 109.795,203.678 147.122,160.751 L114.77,126.983 C102.451,128.641 90.13,124.377 81.6,115.374 C67.149,99.974 67.622,75.806 83.022,61.117 C89.016,55.494 96.742,51.867 104.909,50.893 C106.127,50.748 107.355,50.719 108.579,50.632 z" fill="#FFFFFF"/>
+    <path d="M603.003,1.416 C637.229,1.416 664.974,29.161 664.974,63.387 C664.974,97.613 637.229,125.359 603.003,125.359 C596.417,125.432 589.936,124.22 583.671,122.272 L583.653,122.34 L582.704,122.007 L498.594,201.853 L495.752,198.062 C491.251,192.139 486.275,186.215 481.062,180.765 L480.114,179.581 L477.508,176.975 L477.035,176.501 L475.376,174.842 L474.901,174.369 L472.769,172.237 L471.112,170.815 L469.453,169.393 L467.321,167.498 L465.661,166.076 L463.529,164.18 C427.753,134.091 382.974,117.032 336.063,115.847 C296.969,114.9 258.824,124.614 225.654,144.516 L198.644,116.321 C239.869,89.785 287.728,76.517 337.01,77.702 C392.451,79.123 445.285,99.025 487.697,134.801 L488.17,134.801 L543.87,81.922 C541.907,75.941 541.111,69.662 541.031,63.387 C541.031,29.161 568.777,1.416 603.003,1.416 z" fill="#FFFFFF"/>
+    <path d="M332.896,139.756 C339.898,139.787 346.882,140.328 353.832,141.14 C453.815,153.697 524.656,244.914 512.337,344.898 C499.779,444.881 408.562,515.723 308.579,503.403 C208.594,490.845 137.753,399.628 150.074,299.645 C162.001,206.895 239.931,140.08 332.896,139.756 z M330.147,218.06 C289.672,221.299 260.383,251.917 259.355,292.596 C260.088,321.612 274.948,346.105 300.861,359.451 L286.779,425.667 L381.195,425.667 L367.132,359.44 C392.898,345.446 408.21,322.301 408.62,292.596 C408.071,250.616 375.585,219.015 333.987,217.963 L330.147,218.06 z M331.56,217.667 L331.324,217.667 L331.442,217.669 L331.56,217.667 z" fill="#FFFFFF"/>
+  </g>
+  <g id="Font">
+    <path d="M818.88,233.646 C814.28,233.646 811.06,234.566 805.54,241.926 L729.18,341.286 L762.3,154.986 C763.68,148.086 760,145.786 754.48,145.786 L685.48,145.786 C677.2,145.786 674.9,149.926 673.98,154.986 L614.64,491.246 C613.26,498.606 617.86,501.366 622.92,501.366 L691.92,501.366 C696.98,501.366 702.04,496.306 702.96,491.246 L721.36,386.366 L761.38,491.246 C764.14,498.606 767.82,501.366 772.88,501.366 L855.68,501.366 C861.66,501.366 863.96,495.846 861.66,491.246 L802.78,362.446 L907.66,243.306 C911.34,239.626 910.88,233.646 904.44,233.646 z M1139.1,328.406 C1139.1,273.666 1107.82,229.506 1041.12,229.506 C964.3,229.506 911.86,263.546 896.68,354.626 L891.62,384.986 C890.24,393.266 889.78,401.086 889.78,408.446 C889.78,473.766 940.38,505.506 991.44,505.506 C1030.08,505.506 1061.36,500.906 1092.18,491.246 C1100,488.946 1102.3,485.726 1103.68,478.366 L1111.04,436.966 C1111.04,436.046 1111.04,435.586 1111.04,435.126 C1111.04,430.986 1108.28,429.146 1104.14,429.146 C1103.22,429.146 1102.76,429.146 1102.3,429.146 C1084.82,430.986 1038.36,432.826 1013.98,432.826 C990.98,432.826 976.26,429.606 976.26,406.606 C976.26,402.466 976.72,397.866 977.64,392.346 L1120.7,392.346 C1126.22,392.346 1131.28,388.206 1132.2,382.226 L1136.8,354.626 C1138.18,345.886 1139.1,337.146 1139.1,328.406 z M1056.3,325.186 C1056.3,330.706 1055.38,337.146 1054,343.586 L985.92,343.586 C991.44,317.366 1002.48,298.046 1028.24,298.046 C1048.94,298.046 1056.3,309.086 1056.3,325.186 z M1448.74,240.546 C1448.74,236.866 1444.6,233.646 1440.46,233.646 L1364.56,233.646 C1359.5,233.646 1354.9,237.326 1353.06,242.386 L1287.28,408.906 L1283.6,408.906 C1280.84,408.906 1280.38,406.606 1279.92,401.086 L1271.64,242.846 C1271.18,237.786 1269.34,233.646 1264.28,233.646 L1190.22,233.646 C1182.4,233.646 1178.72,237.326 1178.72,242.386 C1178.72,242.846 1178.72,243.306 1178.72,243.766 L1205.4,462.726 C1208.16,486.186 1220.12,494.466 1241.74,494.466 L1247.72,494.466 L1241.28,509.646 C1235.76,522.986 1226.1,527.126 1213.22,527.126 C1195.74,527.126 1168.14,524.366 1151.12,523.446 L1150.66,523.446 C1145.14,523.446 1139.62,528.046 1138.7,533.106 L1130.88,577.726 C1130.88,578.186 1130.88,578.646 1130.88,579.106 C1130.88,583.246 1135.02,584.626 1139.62,586.466 C1151.58,591.066 1181.94,594.746 1200.34,594.746 C1272.56,594.746 1298.78,566.226 1321.32,517.006 L1447.82,243.766 C1448.28,242.846 1448.74,241.466 1448.74,240.546 z" fill="#FFFFFF"/>
+    <path d="M1653.14,244.226 C1653.14,239.626 1650.38,238.246 1645.32,236.866 C1632.9,233.646 1610.82,229.506 1583.68,229.506 C1512.84,229.506 1467.3,264.926 1452.58,350.486 L1446.6,384.986 C1445.22,394.186 1444.3,402.926 1444.3,411.206 C1444.3,465.026 1475.58,505.506 1534.92,505.506 C1562.06,505.506 1583.22,501.826 1599.32,498.146 C1605.76,496.766 1609.44,494.466 1610.36,488.486 L1619.56,436.966 C1619.56,436.506 1619.56,436.046 1619.56,435.126 C1619.56,430.986 1616.34,428.226 1612.2,428.226 C1611.74,428.226 1611.74,428.226 1611.28,428.226 C1595.18,429.146 1580.46,430.986 1557.92,430.986 C1542.28,430.986 1533.08,425.466 1533.08,404.766 C1533.08,399.246 1533.54,392.806 1534.92,384.986 L1540.9,350.486 C1547.34,312.306 1560.68,304.026 1580.46,304.026 C1603,304.026 1616.8,306.326 1632.44,307.246 C1632.9,307.246 1632.9,307.246 1633.36,307.246 C1638.42,307.246 1643.02,303.566 1643.94,298.506 L1653.14,246.526 C1653.14,245.606 1653.14,245.146 1653.14,244.226 z M1940.24,153.606 C1940.24,149.006 1936.1,145.786 1931.5,145.786 L1862.96,145.786 C1857.9,145.786 1853.3,149.926 1852.38,154.986 L1838.58,232.726 C1829.38,231.346 1813.74,229.506 1806.38,229.506 C1722.66,229.506 1680.8,264.466 1665.62,349.566 L1659.18,385.446 C1657.8,393.726 1656.88,401.546 1656.88,408.906 C1656.88,465.486 1695.98,505.506 1759,505.506 C1800.4,505.506 1839.5,499.066 1864.34,494.006 C1879.06,490.786 1881.36,488.026 1882.74,479.286 L1940.24,154.986 C1940.24,154.526 1940.24,154.066 1940.24,153.606 z M1825.7,304.486 L1803.62,430.526 C1794.88,431.906 1785.22,432.826 1771.88,432.826 C1752.1,432.826 1745.2,421.326 1745.2,403.386 C1745.2,397.866 1745.66,391.886 1747.04,385.446 L1753.48,349.566 C1758.08,322.886 1769.12,302.646 1794.88,302.646 C1805.92,302.646 1816.5,303.566 1825.7,304.486 z M2196.52,307.706 C2196.52,256.186 2175.36,229.506 2124.3,229.506 C2107.28,229.506 2081.98,233.646 2049.78,254.806 L2052.08,242.846 C2053.46,235.946 2050.24,233.646 2044.26,233.646 L1981.24,233.646 C1976.18,233.646 1971.58,237.786 1970.66,242.846 L1926.5,491.246 C1925.58,497.686 1930.64,501.366 1937.08,501.366 L2002.86,501.366 C2009.76,501.366 2014.36,496.766 2015.28,491.246 L2046.56,313.226 C2054.84,308.626 2071.86,303.106 2085.66,303.106 C2101.3,303.106 2107.28,306.786 2107.28,321.046 C2107.28,328.866 2105.44,336.686 2104.06,344.506 L2078.3,491.246 C2077.38,495.846 2078.3,501.366 2086.12,501.366 L2155.12,501.366 C2160.64,501.366 2165.7,496.306 2166.62,491.246 L2191.92,347.726 C2194.22,334.846 2196.52,319.666 2196.52,307.706 z" fill="#FFFFFF"/>
+    <path d="M1826.663,596.957 C1826.663,595.706 1825.829,594.872 1824.439,594.872 L1812.068,594.872 C1810.539,594.872 1809.01,595.984 1808.732,597.513 L1806.091,613.22 C1806.091,613.359 1806.091,613.498 1806.091,613.776 C1806.091,615.027 1806.925,616 1808.315,616 L1820.686,616 C1822.215,616 1823.744,614.749 1824.022,613.22 L1826.663,597.513 C1826.663,597.374 1826.663,597.235 1826.663,596.957 z M1905.182,536.631 C1887.112,536.631 1872.378,544.137 1867.513,570.408 L1865.15,583.335 C1864.733,585.837 1864.455,588.2 1864.455,590.424 C1864.455,606.27 1875.158,617.112 1891.004,617.112 C1899.483,617.112 1905.877,616.139 1909.213,615.305 C1911.993,614.749 1912.271,613.915 1912.688,611.691 L1914.356,602.656 C1914.634,600.849 1913.939,600.293 1911.854,600.571 C1906.85,601.127 1902.68,601.544 1893.645,601.544 C1887.946,601.544 1882.803,599.737 1882.803,590.285 C1882.803,588.339 1882.942,585.976 1883.498,583.335 L1885.861,570.408 C1888.502,555.952 1895.869,552.199 1902.402,552.199 C1911.437,552.199 1915.746,552.616 1920.194,553.172 C1922.418,553.589 1923.113,552.616 1923.391,551.087 L1925.059,542.052 C1925.476,539.689 1924.92,538.994 1922.696,538.438 C1919.638,537.604 1913.661,536.631 1905.182,536.631 z M2017.2,564.014 C2017.2,549.419 2008.443,536.631 1989.4,536.631 C1967.577,536.631 1954.233,548.446 1950.063,571.242 L1947.978,582.501 C1947.561,584.725 1947.422,586.949 1947.422,589.173 C1947.422,603.768 1956.318,617.112 1975.222,617.112 C1997.045,617.112 2010.111,605.436 2014.42,582.501 L2016.505,571.242 C2016.922,568.879 2017.2,566.377 2017.2,564.014 z M1998.713,565.126 C1998.713,566.933 1998.574,569.018 1998.157,571.242 L1996.072,582.501 C1993.709,595.428 1987.732,601.266 1978.002,601.266 C1969.801,601.266 1965.77,596.818 1965.77,588.617 C1965.77,586.81 1965.909,584.725 1966.326,582.501 L1968.411,571.242 C1970.913,557.481 1978.141,552.477 1986.62,552.477 C1994.821,552.477 1998.713,556.925 1998.713,565.126 z M2153.821,556.925 C2153.821,544.415 2147.844,536.631 2134.639,536.631 C2125.048,536.631 2117.264,538.855 2110.175,543.442 C2107.812,539.828 2103.225,536.631 2095.302,536.631 C2087.101,536.631 2081.124,539.55 2074.73,543.303 L2075.286,540.384 C2075.564,538.855 2074.73,537.604 2072.923,537.604 L2060.83,537.604 C2059.301,537.604 2057.911,538.855 2057.633,540.384 L2044.845,613.081 C2044.567,614.888 2045.401,616 2047.069,616 L2059.857,616 C2062.359,616 2062.915,614.61 2063.193,613.081 L2073.062,556.925 C2079.317,553.867 2083.765,552.338 2086.684,552.338 C2092.383,552.338 2094.607,553.867 2094.607,559.01 C2094.607,560.817 2094.468,563.041 2093.912,565.821 L2085.572,613.081 C2085.155,615.166 2086.128,616 2087.796,616 L2100.584,616 C2103.086,616 2103.642,614.61 2103.92,613.081 L2112.26,565.821 C2112.816,562.346 2113.094,558.732 2112.955,555.813 C2118.515,553.172 2124.353,552.338 2126.994,552.338 C2132.971,552.338 2135.334,554.006 2135.334,559.427 C2135.334,561.095 2135.056,563.18 2134.639,565.821 L2126.299,613.081 C2126.021,614.888 2126.855,616 2128.523,616 L2141.311,616 C2143.952,616 2144.369,614.61 2144.647,613.081 L2152.987,565.821 C2153.543,562.624 2153.821,559.705 2153.821,556.925 z" fill="#FFFFFF"/>
+  </g>
+</svg>
diff --git a/images/default/keycdnlogo.png b/images/default/keycdnlogo.png
new file mode 100644
index 0000000000..905c466fe5
Binary files /dev/null and b/images/default/keycdnlogo.png differ
diff --git a/images/default/logo.svg b/images/default/logo.svg
index 33663753be..2df597a967 100644
--- a/images/default/logo.svg
+++ b/images/default/logo.svg
@@ -1,77 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="435.721px" height="85.242px" viewBox="62.402 -18.766 435.721 85.242"
-	 enable-background="new 62.402 -18.766 435.721 85.242" xml:space="preserve">
-<g>
-	<path fill="#F4F4F4" d="M205.456,22.207c0,4.297-1.603,7.119-4.681,8.465l4.425,16.803c0.192,0.771-0.192,1.154-0.898,1.154h-6.67
-		c-0.641,0-0.961-0.32-1.09-0.898l-4.297-16.289h-4.425v16.162c0,0.642-0.384,1.025-1.026,1.025h-6.67
-		c-0.641,0-1.026-0.385-1.026-1.025V-1.651c0-0.641,0.385-1.026,1.026-1.026h16.097c6.028,0,9.235,3.207,9.235,9.235V22.207
-		L205.456,22.207z M194.169,22.976c1.667,0,2.565-0.898,2.565-2.565V8.354c0-1.667-0.898-2.564-2.565-2.564h-6.349v17.187
-		L194.169,22.976L194.169,22.976z"/>
-	<path fill="#F4F4F4" d="M210.583,6.558c0-6.028,3.206-9.235,9.235-9.235h7.183c6.028,0,9.235,3.207,9.235,9.235v32.836
-		c0,6.027-3.207,9.234-9.235,9.234h-7.183c-6.029,0-9.235-3.207-9.235-9.234V6.558z M225.397,40.355
-		c1.667,0,2.565-0.834,2.565-2.565V8.162c0-1.667-0.898-2.565-2.565-2.565h-3.719c-1.667,0-2.565,0.898-2.565,2.565v29.629
-		c0,1.73,0.898,2.564,2.565,2.564H225.397L225.397,40.355z"/>
-	<path fill="#F4F4F4" d="M268.362,13.484c0,0.642-0.385,1.026-1.025,1.026h-6.413c-0.706,0-1.026-0.384-1.026-1.026v-5.13
-		c0-1.667-0.897-2.564-2.564-2.564h-3.335c-1.731,0-2.565,0.897-2.565,2.564V37.6c0,1.731,0.897,2.563,2.565,2.563h3.335
-		c1.667,0,2.564-0.833,2.564-2.563v-5.132c0-0.642,0.32-1.026,1.026-1.026h6.413c0.643,0,1.025,0.384,1.025,1.026v6.927
-		c0,6.027-3.271,9.234-9.234,9.234h-7.183c-6.028,0-9.299-3.207-9.299-9.234V6.558c0-6.028,3.271-9.235,9.299-9.235h7.183
-		c5.964,0,9.234,3.207,9.234,9.235V13.484z"/>
-	<path fill="#F4F4F4" d="M295.422,48.629c-0.771,0-1.218-0.32-1.476-0.961l-8.079-19.048l-2.374,4.554v14.172
-		c0,0.834-0.448,1.283-1.282,1.283h-6.157c-0.834,0-1.283-0.449-1.283-1.283v-48.74c0-0.833,0.449-1.283,1.283-1.283h6.157
-		c0.833,0,1.282,0.449,1.282,1.283v19.881l9.876-20.202c0.321-0.641,0.771-0.962,1.476-0.962h6.733c0.962,0,1.347,0.642,0.897,1.539
-		l-10.901,22.382l11.606,25.91c0.449,0.834,0.064,1.475-0.961,1.475H295.422z"/>
-	<path fill="#F4F4F4" d="M333.45,4.763c0,0.641-0.257,1.09-1.026,1.09h-16.033v12.826h12.249c0.643,0,1.026,0.385,1.026,1.09v6.349
-		c0,0.706-0.385,1.091-1.026,1.091h-12.249v12.954h16.033c0.771,0,1.026,0.321,1.026,1.026v6.414c0,0.641-0.257,1.024-1.026,1.024
-		h-23.6c-0.578,0-0.963-0.385-0.963-1.024V-1.651c0-0.641,0.385-1.026,0.963-1.026h23.6c0.771,0,1.026,0.385,1.026,1.026V4.763z"/>
-	<path fill="#F4F4F4" d="M363.204-2.677c0.705,0,1.026,0.385,1.026,1.026v6.414c0,0.641-0.321,1.026-1.026,1.026h-7.439v41.814
-		c0,0.705-0.32,1.024-1.025,1.024h-6.67c-0.643,0-1.026-0.319-1.026-1.024V5.789h-7.438c-0.643,0-1.026-0.385-1.026-1.026v-6.414
-		c0-0.641,0.385-1.026,1.026-1.026H363.204z"/>
-	<path fill="#F4F4F4" d="M363.585,41.445c0-0.834,0.449-1.282,1.283-1.282h5.836c0.834,0,1.282,0.448,1.282,1.282v5.899
-		c0,0.835-0.448,1.283-1.282,1.283h-5.836c-0.834,0-1.283-0.448-1.283-1.283V41.445z"/>
-	<path fill="#F4F4F4" d="M404.114,13.484c0,0.642-0.386,1.026-1.026,1.026h-6.413c-0.705,0-1.025-0.384-1.025-1.026v-5.13
-		c0-1.667-0.897-2.564-2.564-2.564h-3.335c-1.732,0-2.565,0.897-2.565,2.564V37.6c0,1.731,0.897,2.563,2.565,2.563h3.335
-		c1.667,0,2.564-0.833,2.564-2.563v-5.132c0-0.642,0.32-1.026,1.025-1.026h6.413c0.643,0,1.026,0.384,1.026,1.026v6.927
-		c0,6.027-3.271,9.234-9.235,9.234h-7.183c-6.028,0-9.299-3.207-9.299-9.234V6.558c0-6.028,3.271-9.235,9.299-9.235h7.183
-		c5.965,0,9.235,3.207,9.235,9.235V13.484z"/>
-	<path fill="#F4F4F4" d="M427.455-1.651c0-0.641,0.384-1.026,1.025-1.026h6.605c0.77,0,1.089,0.385,1.089,1.026v49.254
-		c0,0.641-0.32,1.024-1.089,1.024h-6.605c-0.643,0-1.025-0.385-1.025-1.024V27.209h-8.209v20.395c0,0.642-0.385,1.025-1.026,1.025
-		h-6.604c-0.771,0-1.091-0.385-1.091-1.025V-1.651c0-0.641,0.32-1.026,1.091-1.026h6.604c0.643,0,1.026,0.385,1.026,1.026v20.394
-		h8.209V-1.651L427.455-1.651z"/>
-	<path fill="#F4F4F4" d="M465.419,48.629c-0.577,0-0.897-0.32-1.026-0.898l-1.795-9.362h-11.416l-1.73,9.362
-		c-0.129,0.578-0.449,0.898-1.026,0.898h-6.861c-0.705,0-1.026-0.385-0.835-1.09l10.646-49.318c0.129-0.641,0.513-0.898,1.09-0.898
-		h8.915c0.577,0,0.962,0.257,1.09,0.898l10.646,49.318c0.129,0.705-0.128,1.09-0.897,1.09H465.419z M456.889,8.546l-4.104,22.382
-		h8.209L456.889,8.546z"/>
-	<path fill="#F4F4F4" d="M497.097-2.677c0.705,0,1.026,0.385,1.026,1.026v6.414c0,0.641-0.321,1.026-1.026,1.026h-7.438v41.814
-		c0,0.705-0.321,1.024-1.026,1.024h-6.67c-0.641,0-1.025-0.319-1.025-1.024V5.789h-7.438c-0.642,0-1.025-0.385-1.025-1.026v-6.414
-		c0-0.641,0.385-1.026,1.025-1.026H497.097z"/>
-</g>
-<path fill="#C1272D" d="M162.586,23.788c0-5.031-1.505-9.854-4.474-14.339c-2.666-4.025-6.401-7.588-11.1-10.591
-	c-9.074-5.796-21-8.989-33.579-8.989c-4.202,0-8.344,0.355-12.361,1.059c-2.492-2.333-5.41-4.432-8.497-6.091
-	c-16.494-7.994-30.172-0.188-30.172-0.188S75.12-4.904,73.052,4.253c-5.689,5.644-8.773,12.45-8.773,19.535
-	c0,0.022,0.001,0.045,0.001,0.068c0,0.022-0.001,0.044-0.001,0.068c0,7.085,3.083,13.891,8.773,19.534
-	c2.068,9.158-10.649,19.605-10.649,19.605s13.678,7.805,30.172-0.188c3.087-1.659,6.004-3.759,8.497-6.091
-	c4.018,0.703,8.159,1.058,12.361,1.058c12.58,0,24.505-3.191,33.579-8.987c4.699-3.003,8.434-6.565,11.1-10.592
-	c2.969-4.484,4.474-9.309,4.474-14.338c0-0.023-0.001-0.045-0.001-0.068S162.586,23.81,162.586,23.788z"/>
-<path fill="#FFFFFF" d="M113.433-3.018c23.293,0,42.177,12.062,42.177,26.941c0,14.878-18.884,26.941-42.177,26.941
-	c-5.187,0-10.154-0.6-14.743-1.693c-4.664,5.61-14.924,13.411-24.891,10.89c3.242-3.482,8.045-9.366,7.017-19.058
-	c-5.974-4.648-9.56-10.597-9.56-17.08C71.255,9.043,90.139-3.018,113.433-3.018"/>
-<g>
-	<g>
-		<circle fill="#C1272D" cx="113.433" cy="24.79" r="5.603"/>
-	</g>
-	<g>
-		<circle fill="#C1272D" cx="132.913" cy="24.79" r="5.603"/>
-	</g>
-	<g>
-		<circle fill="#C1272D" cx="93.952" cy="24.79" r="5.602"/>
-	</g>
-</g>
-<g>
-	<path fill="#CCCCCC" d="M113.433,47.319c-5.187,0-10.154-0.52-14.743-1.468c-4.118,4.294-12.6,10.066-21.39,9.854
-		c-1.158,1.755-2.417,3.19-3.501,4.355c9.967,2.521,20.227-5.279,24.891-10.89c4.589,1.094,9.557,1.693,14.743,1.693
-		c23.106,0,41.87-11.871,42.169-26.585C155.303,37.032,136.539,47.319,113.433,47.319z"/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="435.721" height="85.242" viewBox="62.402 -18.766 435.721 85.242"><g fill="#F4F4F4"><path d="M205.456 22.207c0 4.297-1.603 7.119-4.681 8.465l4.425 16.803c.192.771-.192 1.154-.898 1.154h-6.67c-.641 0-.961-.32-1.09-.898l-4.297-16.289h-4.425v16.162c0 .642-.384 1.025-1.026 1.025h-6.67c-.641 0-1.026-.385-1.026-1.025V-1.651c0-.641.385-1.026 1.026-1.026h16.097c6.028 0 9.235 3.207 9.235 9.235v15.649zm-11.287.769c1.667 0 2.565-.898 2.565-2.565V8.354c0-1.667-.898-2.564-2.565-2.564h-6.349v17.187l6.349-.001zM210.583 6.558c0-6.028 3.206-9.235 9.235-9.235h7.183c6.028 0 9.235 3.207 9.235 9.235v32.836c0 6.027-3.207 9.234-9.235 9.234h-7.183c-6.029 0-9.235-3.207-9.235-9.234V6.558zm14.814 33.797c1.667 0 2.565-.834 2.565-2.565V8.162c0-1.667-.898-2.565-2.565-2.565h-3.719c-1.667 0-2.565.898-2.565 2.565v29.629c0 1.73.898 2.564 2.565 2.564h3.719zM268.362 13.484c0 .642-.385 1.026-1.025 1.026h-6.413c-.706 0-1.026-.384-1.026-1.026v-5.13c0-1.667-.897-2.564-2.564-2.564h-3.335c-1.731 0-2.565.897-2.565 2.564V37.6c0 1.731.897 2.563 2.565 2.563h3.335c1.667 0 2.564-.833 2.564-2.563v-5.132c0-.642.32-1.026 1.026-1.026h6.413c.643 0 1.025.384 1.025 1.026v6.927c0 6.027-3.271 9.234-9.234 9.234h-7.183c-6.028 0-9.299-3.207-9.299-9.234V6.558c0-6.028 3.271-9.235 9.299-9.235h7.183c5.964 0 9.234 3.207 9.234 9.235v6.926zM295.422 48.629c-.771 0-1.218-.32-1.476-.961l-8.079-19.048-2.374 4.554v14.172c0 .834-.448 1.283-1.282 1.283h-6.157c-.834 0-1.283-.449-1.283-1.283v-48.74c0-.833.449-1.283 1.283-1.283h6.157c.833 0 1.282.449 1.282 1.283v19.881l9.876-20.202c.321-.641.771-.962 1.476-.962h6.733c.962 0 1.347.642.897 1.539l-10.901 22.382 11.606 25.91c.449.834.064 1.475-.961 1.475h-6.797zM333.45 4.763c0 .641-.257 1.09-1.026 1.09h-16.033v12.826h12.249c.643 0 1.026.385 1.026 1.09v6.349c0 .706-.385 1.091-1.026 1.091h-12.249v12.954h16.033c.771 0 1.026.321 1.026 1.026v6.414c0 .641-.257 1.024-1.026 1.024h-23.6c-.578 0-.963-.385-.963-1.024V-1.651c0-.641.385-1.026.963-1.026h23.6c.771 0 1.026.385 1.026 1.026v6.414zM363.204-2.677c.705 0 1.026.385 1.026 1.026v6.414c0 .641-.321 1.026-1.026 1.026h-7.439v41.814c0 .705-.32 1.024-1.025 1.024h-6.67c-.643 0-1.026-.319-1.026-1.024V5.789h-7.438c-.643 0-1.026-.385-1.026-1.026v-6.414c0-.641.385-1.026 1.026-1.026h23.598zM363.585 41.445c0-.834.449-1.282 1.283-1.282h5.836c.834 0 1.282.448 1.282 1.282v5.899c0 .835-.448 1.283-1.282 1.283h-5.836c-.834 0-1.283-.448-1.283-1.283v-5.899zM404.114 13.484c0 .642-.386 1.026-1.026 1.026h-6.413c-.705 0-1.025-.384-1.025-1.026v-5.13c0-1.667-.897-2.564-2.564-2.564h-3.335c-1.732 0-2.565.897-2.565 2.564V37.6c0 1.731.897 2.563 2.565 2.563h3.335c1.667 0 2.564-.833 2.564-2.563v-5.132c0-.642.32-1.026 1.025-1.026h6.413c.643 0 1.026.384 1.026 1.026v6.927c0 6.027-3.271 9.234-9.235 9.234h-7.183c-6.028 0-9.299-3.207-9.299-9.234V6.558c0-6.028 3.271-9.235 9.299-9.235h7.183c5.965 0 9.235 3.207 9.235 9.235v6.926zM427.455-1.651c0-.641.384-1.026 1.025-1.026h6.605c.77 0 1.089.385 1.089 1.026v49.254c0 .641-.32 1.024-1.089 1.024h-6.605c-.643 0-1.025-.385-1.025-1.024V27.209h-8.209v20.395c0 .642-.385 1.025-1.026 1.025h-6.604c-.771 0-1.091-.385-1.091-1.025V-1.651c0-.641.32-1.026 1.091-1.026h6.604c.643 0 1.026.385 1.026 1.026v20.394h8.209V-1.651zM465.419 48.629c-.577 0-.897-.32-1.026-.898l-1.795-9.362h-11.416l-1.73 9.362c-.129.578-.449.898-1.026.898h-6.861c-.705 0-1.026-.385-.835-1.09l10.646-49.318c.129-.641.513-.898 1.09-.898h8.915c.577 0 .962.257 1.09.898l10.646 49.318c.129.705-.128 1.09-.897 1.09h-6.801zm-8.53-40.083l-4.104 22.382h8.209l-4.105-22.382zM497.097-2.677c.705 0 1.026.385 1.026 1.026v6.414c0 .641-.321 1.026-1.026 1.026h-7.438v41.814c0 .705-.321 1.024-1.026 1.024h-6.67c-.641 0-1.025-.319-1.025-1.024V5.789H473.5c-.642 0-1.025-.385-1.025-1.026v-6.414c0-.641.385-1.026 1.025-1.026h23.597z"/></g><path fill="#C1272D" d="M162.586 23.788c0-5.031-1.505-9.854-4.474-14.339-2.666-4.025-6.401-7.588-11.1-10.591-9.074-5.796-21-8.989-33.579-8.989-4.202 0-8.344.355-12.361 1.059a40.898 40.898 0 0 0-8.497-6.091c-16.494-7.994-30.172-.188-30.172-.188S75.12-4.904 73.052 4.253c-5.689 5.644-8.773 12.45-8.773 19.535l.001.068-.001.068c0 7.085 3.083 13.891 8.773 19.534 2.068 9.158-10.649 19.605-10.649 19.605s13.678 7.805 30.172-.188a40.962 40.962 0 0 0 8.497-6.091 71.772 71.772 0 0 0 12.361 1.058c12.58 0 24.505-3.191 33.579-8.987 4.699-3.003 8.434-6.565 11.1-10.592 2.969-4.484 4.474-9.309 4.474-14.338l-.001-.068.001-.069z"/><path fill="#FFF" d="M113.433-3.018c23.293 0 42.177 12.062 42.177 26.941 0 14.878-18.884 26.941-42.177 26.941-5.187 0-10.154-.6-14.743-1.693-4.664 5.61-14.924 13.411-24.891 10.89 3.242-3.482 8.045-9.366 7.017-19.058-5.974-4.648-9.56-10.597-9.56-17.08-.001-14.88 18.883-26.941 42.177-26.941"/><circle fill="#C1272D" cx="113.433" cy="24.79" r="5.603"/><circle fill="#C1272D" cx="132.913" cy="24.79" r="5.603"/><circle fill="#C1272D" cx="93.952" cy="24.79" r="5.602"/><g><path fill="#CCC" d="M113.433 47.319c-5.187 0-10.154-.52-14.743-1.468-4.118 4.294-12.6 10.066-21.39 9.854-1.158 1.755-2.417 3.19-3.501 4.355 9.967 2.521 20.227-5.279 24.891-10.89 4.589 1.094 9.557 1.693 14.743 1.693 23.106 0 41.87-11.871 42.169-26.585-.299 12.754-19.063 23.041-42.169 23.041z"/></g></svg>
\ No newline at end of file
diff --git a/images/default/star.svg b/images/default/star.svg
new file mode 100644
index 0000000000..41be3c6238
--- /dev/null
+++ b/images/default/star.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 13.267L3.056 16 4 10.211l-4-4.1 5.528-.844L8 0l2.472 5.267L16 6.11l-4 4.1.944 5.789z" fill="#F3F5F8" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000000..29da9bcdcb
--- /dev/null
+++ b/main.js
@@ -0,0 +1,308 @@
+/*!
+ * headroom.js v0.9.4 - Give your page some headroom. Hide your header until you need it
+ * Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/headroom.js
+ * License: MIT
+ */
+
+!(function(a, b) {
+    "use strict";
+    "function" == typeof define && define.amd
+      ? define([], b)
+      : "object" == typeof exports ? (module.exports = b()) : (a.Headroom = b());
+  })(this, function() {
+    "use strict";
+    function a(a) {
+      (this.callback = a), (this.ticking = !1);
+    }
+    function b(a) {
+      return a && "undefined" != typeof window && (a === window || a.nodeType);
+    }
+    function c(a) {
+      if (arguments.length <= 0)
+        throw new Error("Missing arguments in extend function");
+      var d,
+        e,
+        f = a || {};
+      for (e = 1; e < arguments.length; e++) {
+        var g = arguments[e] || {};
+        for (d in g)
+          "object" != typeof f[d] || b(f[d])
+            ? (f[d] = f[d] || g[d])
+            : (f[d] = c(f[d], g[d]));
+      }
+      return f;
+    }
+    function d(a) {
+      return a === Object(a) ? a : { down: a, up: a };
+    }
+    function e(a, b) {
+      (b = c(b, e.options)),
+        (this.lastKnownScrollY = 0),
+        (this.elem = a),
+        (this.tolerance = d(b.tolerance)),
+        (this.classes = b.classes),
+        (this.offset = b.offset),
+        (this.scroller = b.scroller),
+        (this.initialised = !1),
+        (this.onPin = b.onPin),
+        (this.onUnpin = b.onUnpin),
+        (this.onTop = b.onTop),
+        (this.onNotTop = b.onNotTop),
+        (this.onBottom = b.onBottom),
+        (this.onNotBottom = b.onNotBottom);
+    }
+    var f = {
+      bind: !!function() {}.bind,
+      classList: "classList" in document.documentElement,
+      rAF: !!(
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame
+      )
+    };
+    return (
+      (window.requestAnimationFrame =
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame),
+      (a.prototype = {
+        constructor: a,
+        update: function() {
+          this.callback && this.callback(), (this.ticking = !1);
+        },
+        requestTick: function() {
+          this.ticking ||
+            (requestAnimationFrame(
+              this.rafCallback || (this.rafCallback = this.update.bind(this))
+            ),
+            (this.ticking = !0));
+        },
+        handleEvent: function() {
+          this.requestTick();
+        }
+      }),
+      (e.prototype = {
+        constructor: e,
+        init: function() {
+          if (e.cutsTheMustard)
+            return (
+              (this.debouncer = new a(this.update.bind(this))),
+              this.elem.classList.add(this.classes.initial),
+              setTimeout(this.attachEvent.bind(this), 100),
+              this
+            );
+        },
+        destroy: function() {
+          var a = this.classes;
+          this.initialised = !1;
+          for (var b in a)
+            a.hasOwnProperty(b) && this.elem.classList.remove(a[b]);
+          this.scroller.removeEventListener("scroll", this.debouncer, !1);
+        },
+        attachEvent: function() {
+          this.initialised ||
+            ((this.lastKnownScrollY = this.getScrollY()),
+            (this.initialised = !0),
+            this.scroller.addEventListener("scroll", this.debouncer, !1),
+            this.debouncer.handleEvent());
+        },
+        unpin: function() {
+          var a = this.elem.classList,
+            b = this.classes;
+          (!a.contains(b.pinned) && a.contains(b.unpinned)) ||
+            (a.add(b.unpinned),
+            a.remove(b.pinned),
+            this.onUnpin && this.onUnpin.call(this));
+        },
+        pin: function() {
+          var a = this.elem.classList,
+            b = this.classes;
+          a.contains(b.unpinned) &&
+            (a.remove(b.unpinned),
+            a.add(b.pinned),
+            this.onPin && this.onPin.call(this));
+        },
+        top: function() {
+          var a = this.elem.classList,
+            b = this.classes;
+          a.contains(b.top) ||
+            (a.add(b.top),
+            a.remove(b.notTop),
+            this.onTop && this.onTop.call(this));
+        },
+        notTop: function() {
+          var a = this.elem.classList,
+            b = this.classes;
+          a.contains(b.notTop) ||
+            (a.add(b.notTop),
+            a.remove(b.top),
+            this.onNotTop && this.onNotTop.call(this));
+        },
+        bottom: function() {
+          var a = this.elem.classList,
+            b = this.classes;
+          a.contains(b.bottom) ||
+            (a.add(b.bottom),
+            a.remove(b.notBottom),
+            this.onBottom && this.onBottom.call(this));
+        },
+        notBottom: function() {
+          var a = this.elem.classList,
+            b = this.classes;
+          a.contains(b.notBottom) ||
+            (a.add(b.notBottom),
+            a.remove(b.bottom),
+            this.onNotBottom && this.onNotBottom.call(this));
+        },
+        getScrollY: function() {
+          return void 0 !== this.scroller.pageYOffset
+            ? this.scroller.pageYOffset
+            : void 0 !== this.scroller.scrollTop
+              ? this.scroller.scrollTop
+              : (
+                  document.documentElement ||
+                  document.body.parentNode ||
+                  document.body
+                ).scrollTop;
+        },
+        getViewportHeight: function() {
+          return (
+            window.innerHeight ||
+            document.documentElement.clientHeight ||
+            document.body.clientHeight
+          );
+        },
+        getElementPhysicalHeight: function(a) {
+          return Math.max(a.offsetHeight, a.clientHeight);
+        },
+        getScrollerPhysicalHeight: function() {
+          return this.scroller === window || this.scroller === document.body
+            ? this.getViewportHeight()
+            : this.getElementPhysicalHeight(this.scroller);
+        },
+        getDocumentHeight: function() {
+          var a = document.body,
+            b = document.documentElement;
+          return Math.max(
+            a.scrollHeight,
+            b.scrollHeight,
+            a.offsetHeight,
+            b.offsetHeight,
+            a.clientHeight,
+            b.clientHeight
+          );
+        },
+        getElementHeight: function(a) {
+          return Math.max(a.scrollHeight, a.offsetHeight, a.clientHeight);
+        },
+        getScrollerHeight: function() {
+          return this.scroller === window || this.scroller === document.body
+            ? this.getDocumentHeight()
+            : this.getElementHeight(this.scroller);
+        },
+        isOutOfBounds: function(a) {
+          var b = a < 0,
+            c = a + this.getScrollerPhysicalHeight() > this.getScrollerHeight();
+          return b || c;
+        },
+        toleranceExceeded: function(a, b) {
+          return Math.abs(a - this.lastKnownScrollY) >= this.tolerance[b];
+        },
+        shouldUnpin: function(a, b) {
+          var c = a > this.lastKnownScrollY,
+            d = a >= this.offset;
+          return c && d && b;
+        },
+        shouldPin: function(a, b) {
+          var c = a < this.lastKnownScrollY,
+            d = a <= this.offset;
+          return (c && b) || d;
+        },
+        update: function() {
+          var a = this.getScrollY(),
+            b = a > this.lastKnownScrollY ? "down" : "up",
+            c = this.toleranceExceeded(a, b);
+          this.isOutOfBounds(a) ||
+            (a <= this.offset ? this.top() : this.notTop(),
+            a + this.getViewportHeight() >= this.getScrollerHeight()
+              ? this.bottom()
+              : this.notBottom(),
+            this.shouldUnpin(a, c)
+              ? this.unpin()
+              : this.shouldPin(a, c) && this.pin(),
+            (this.lastKnownScrollY = a));
+        }
+      }),
+      (e.options = {
+        tolerance: { up: 0, down: 0 },
+        offset: 0,
+        scroller: window,
+        classes: {
+          pinned: "headroom--pinned",
+          unpinned: "headroom--unpinned",
+          top: "headroom--top",
+          notTop: "headroom--not-top",
+          bottom: "headroom--bottom",
+          notBottom: "headroom--not-bottom",
+          initial: "headroom"
+        }
+      }),
+      (e.cutsTheMustard =
+        "undefined" != typeof f && f.rAF && f.bind && f.classList),
+      e
+    );
+  });
+
+  (function () {
+    var header = document.querySelector(".app-header_wrap");
+    if (header) {
+      var headroom = new Headroom(header);
+      headroom.init();
+    }
+  }());
+
+  if (document.querySelector(".js-download")) {
+    var selects = document.querySelectorAll(".js-select-download");
+
+    var setDownload = function(element) {
+      element = element || {};
+      var target = element.dataset && element.dataset.target;
+      var value = element.value;
+      var selector = document.querySelector("[data-download='" + target + "']");
+
+      if (selector) {
+        selector.href = value;
+        selector.download = value;
+      }
+    };
+
+    if (selects && selects.length > 0) {
+      selects.forEach(element => {
+        setDownload(element);
+        element.addEventListener("change", setDownload.bind(this, element));
+      });
+    }
+  }
+
+  (function () {
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+       var data = JSON.parse(this.responseText);
+       var stars = Math.round( (data["stargazers_count"] / 1000) * 10 ) / 10;
+       var forks = Math.round( (data["forks_count"] / 1000) * 10 ) / 10;
+       var starsElements = document.getElementsByClassName("star-count")
+       var forksElements = document.getElementsByClassName("fork-count")
+
+       for (let i = 0; i < starsElements.length; i++) {
+         starsElements[i].innerHTML = stars + "k";
+       }
+
+       for (let i = 0; i < forksElements.length; i++) {
+         forksElements[i].innerHTML = forks + "k";
+       }
+      }
+    };
+    xhttp.open("GET", "https://api.github.com/repos/RocketChat/Rocket.Chat", true);
+    xhttp.send();
+  }())
\ No newline at end of file
diff --git a/styles.scss b/styles.scss
index 690fd7f40f..07faa53ad5 100644
--- a/styles.scss
+++ b/styles.scss
@@ -1,7 +1,14 @@
 ---
 ---
 
+@import "mixins";
 @import "variables";
+@import "reset";
+@import "theme";
+@import "typography";
+@import "grid";
+@import "header";
+@import "footer";
 @import "layout";
 
 // Custom data table styles...