diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index c95dfacf..9fe04b9d 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -73,12 +73,12 @@
     }
 
     .title.is-2 a {
-      color: #222324;
+      color: #242424;
       padding-left: 60px;
     }
 
     .title.is-2 a:hover {
-      color: #1fc8db;
+      color: #11e4c4;
     }
 
     .title.is-2 .icon.is-large {
@@ -95,7 +95,12 @@
       color: white;
     }
 
-    a.column:hover .title strong {
+    .hero.is-primary a.column,
+    .hero.is-primary a.column:hover {
+      color: white;
+    }
+
+    .hero.is-primary a.column:hover .title strong {
       border-bottom: 1px solid;
     }
 
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index f86225d2..7ace113e 100644
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -6,7 +6,7 @@
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 
-  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
   <link rel="stylesheet" href="{{ site.baseurl }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
@@ -26,9 +26,9 @@
   <link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-96x96.png" sizes="96x96">
   <link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-16x16.png" sizes="16x16">
   <link rel="manifest" href="{{ site.baseurl }}/favicons/manifest.json">
-  <link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#1fc8db">
+  <link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#11e4c4">
   <link rel="shortcut icon" href="{{ site.baseurl }}/favicons/favicon.ico">
-  <meta name="msapplication-TileColor" content="#1fc8db">
+  <meta name="msapplication-TileColor" content="#11e4c4">
   <meta name="msapplication-TileImage" content="{{ site.baseurl }}/favicons/mstile-144x144.png">
   <meta name="msapplication-config" content="{{ site.baseurl }}/favicons/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">
diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 739267b6..3752f602 100644
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -78,10 +78,13 @@ $twitter: #55acee
     color: $white
 
 @keyframes floatUp
-  from
+  0%
     box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
     transform: scale(0.86)
-  to
+  67%
+    box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+    transform: scale(1)
+  100%
     box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
     transform: scale(1)
 
@@ -114,7 +117,7 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
 
 #b
   animation-delay: 1s
-  animation-duration: 1s
+  animation-duration: 1.5s
   animation-fill-mode: both
   animation-name: floatUp
   animation-timing-function: $curve
@@ -340,3 +343,11 @@ $structure-invert: $danger-invert
   .input
     border-color: $white
     box-shadow: none
+
+html
+  \::-moz-selection
+    background: $primary
+    color: $primary-invert
+  \::selection
+    background: $primary
+    color: $primary-invert
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 013990b6..43375d49 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -6311,11 +6311,15 @@ body.page-grid .column > .notification {
 }
 
 @keyframes floatUp {
-  from {
+  0% {
     box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0);
     transform: scale(0.86);
   }
-  to {
+  67% {
+    box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
+    transform: scale(1);
+  }
+  100% {
     box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
     transform: scale(1);
   }
@@ -6358,7 +6362,7 @@ body.page-grid .column > .notification {
 
 #b {
   animation-delay: 1s;
-  animation-duration: 1s;
+  animation-duration: 1.5s;
   animation-fill-mode: both;
   animation-name: floatUp;
   animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
@@ -6669,3 +6673,13 @@ body.page-grid .column > .notification {
   border-color: white;
   box-shadow: none;
 }
+
+html ::-moz-selection {
+  background: #11e4c4;
+  color: white;
+}
+
+html ::selection {
+  background: #11e4c4;
+  color: white;
+}
diff --git a/docs/favicons/browserconfig.xml b/docs/favicons/browserconfig.xml
index 628928fa..d3cb0bd6 100644
--- a/docs/favicons/browserconfig.xml
+++ b/docs/favicons/browserconfig.xml
@@ -6,7 +6,7 @@
       <square150x150logo src="/favicons/mstile-150x150.png"/>
       <square310x310logo src="/favicons/mstile-310x310.png"/>
       <wide310x150logo src="/favicons/mstile-310x150.png"/>
-      <TileColor>#1fc8db</TileColor>
+      <TileColor>#11e4c4</TileColor>
     </tile>
   </msapplication>
 </browserconfig>
diff --git a/docs/index.html b/docs/index.html
index abe964fe..2b5368e9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -62,14 +62,8 @@ route: index
           <p class="subtitle">Designed for <strong>mobile</strong>-first</p>
         </a>
         <a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/modular/">
-          <span class="icon is-large" style="margin-right: -15px;">
-            <i class="fa fa-mobile"></i>
-          </span>
           <span class="icon is-large">
-            <i class="fa fa-tablet"></i>
-          </span>
-          <span class="icon is-large" style="margin-right: 10px;">
-            <i class="fa fa-desktop"></i>
+            <i class="fa fa-cubes"></i>
           </span>
           <p class="title is-4"><strong>Modular</strong></p>
           <p class="subtitle">Just import what you <strong>need</strong></p>
@@ -352,7 +346,7 @@ route: index
         <h3 class="title is-2">
           <a href="{{ site.baseurl }}/documentation/components/media-object/">
             <span class="icon is-large">
-              <i class="fa fa-cubes"></i>
+              <i class="fa fa-magic"></i>
             </span>
             Versatile <strong>media object</strong>
           </a>