diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js
index e00328c..1cf1bec 100644
--- a/_src/_assets/javascripts/bigchain.js
+++ b/_src/_assets/javascripts/bigchain.js
@@ -1,6 +1,7 @@
 
 //=include svg4everybody/dist/svg4everybody.js
 //=include jquery/dist/jquery.js
+//=include smooth-scroll/dist/js/smooth-scroll.js
 
 //=include bigchain/analytics.js
 //=include bigchain/dnt.js
@@ -19,6 +20,14 @@ jQuery(function($) {
     }
 
 
+    //
+    // init Smooth Scroll
+    //
+    var scroll = new SmoothScroll('a[data-scroll]', {
+        easing: 'easeOutQuint'
+    });
+
+
     //
     // Open all external links in new window
     //
@@ -33,7 +42,7 @@ jQuery(function($) {
     //
     // Automatically add header links to all Markdown headings
     //
-    $('.content--page--markdown h1:not(#heading-1), .content--page--markdown h2:not(#heading-2)').each(function(i, el) {
+    $('.content--page--markdown h1:not(#heading-1), .content--page--markdown h2:not(#heading-2), .faq__question').each(function(i, el) {
         var $el, icon, id;
         $el = $(el);
         id = $el.attr('id');
diff --git a/_src/_assets/javascripts/bigchain/smoothscroll.js b/_src/_assets/javascripts/bigchain/smoothscroll.js
deleted file mode 100644
index 7ed8d34..0000000
--- a/_src/_assets/javascripts/bigchain/smoothscroll.js
+++ /dev/null
@@ -1,58 +0,0 @@
-//
-// https://github.com/bendc/anchor-scroll/blob/master/scroll.min.js
-//
-
-document.addEventListener("DOMContentLoaded", function() {
-    var e = function() {
-            if ("scrollingElement" in document) return document.scrollingElement;
-            var a = document.documentElement,
-                b = a.scrollTop;
-            a.scrollTop = b + 1;
-            var c = a.scrollTop;
-            a.scrollTop = b;
-            return c > b ? a : document.body
-        }(),
-        g = function(a) {
-            var b = e.scrollTop;
-            if (2 > a.length) a = -b;
-            else if (a = document.querySelector(a)) {
-                a = a.getBoundingClientRect().top;
-                var c = e.scrollHeight - window.innerHeight;
-                a = b + a < c ? a : c - b
-            } else a = void 0;
-            if (a) return new Map([
-                ["start", b],
-                ["delta", a]
-            ])
-        },
-        h = function(a) {
-            var b =
-                a.getAttribute("href"),
-                c = g(b);
-            if (c) {
-                var d = new Map([
-                        ["duration", 800]
-                    ]),
-                    k = performance.now();
-                requestAnimationFrame(function l(a) {
-                    d.set("elapsed", a - k);
-                    a = d.get("duration");
-                    var f = d.get("elapsed"),
-                        g = c.get("start"),
-                        h = c.get("delta");
-                    e.scrollTop = Math.round(h * (-Math.pow(2, -10 * f / a) + 1) + g);
-                    d.get("elapsed") < d.get("duration") ? requestAnimationFrame(l) : (null, null, b, e.scrollTop = c.get("start") + c.get("delta"))
-                })
-            }
-        },
-        f = document.querySelectorAll("a.scroll");
-    (function b(c, d) {
-        var e = c.item(d);
-        e.addEventListener("click",
-            function(b) {
-                b.preventDefault();
-                h(e)
-            });
-        if (d) return b(c, d - 1)
-    })(f, f.length - 1)
-});
diff --git a/_src/_assets/javascripts/page-enterprise.js b/_src/_assets/javascripts/page-enterprise.js
index 4694313..37c25d6 100644
--- a/_src/_assets/javascripts/page-enterprise.js
+++ b/_src/_assets/javascripts/page-enterprise.js
@@ -1,4 +1,3 @@
-//=include bigchain/smoothscroll.js
 //=include bigchain/form-enterprise.js
 
 jQuery(function($) {
diff --git a/_src/_assets/javascripts/page-front.js b/_src/_assets/javascripts/page-front.js
index 6d6e134..43ca928 100644
--- a/_src/_assets/javascripts/page-front.js
+++ b/_src/_assets/javascripts/page-front.js
@@ -1,6 +1,5 @@
 
 //=include bigchain/testimonials.js
-//=include bigchain/smoothscroll.js
 //=include bigchain/github.js
 //=include bigchain/meetup.js
 
diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js
index d5151e9..534b1cc 100644
--- a/_src/_assets/javascripts/page-getstarted.js
+++ b/_src/_assets/javascripts/page-getstarted.js
@@ -1,7 +1,6 @@
 //=require gumshoe/dist/js/gumshoe.js
 
 //=include bigchain/tab.js
-//=include bigchain/smoothscroll.js
 //=include bigchain/newsletter.js
 
 const ipdbUrl = 'https://test.ipdb.io'
diff --git a/_src/_assets/javascripts/page-usecases.js b/_src/_assets/javascripts/page-usecases.js
index 95167de..4ac1750 100644
--- a/_src/_assets/javascripts/page-usecases.js
+++ b/_src/_assets/javascripts/page-usecases.js
@@ -1,4 +1,3 @@
-//=include bigchain/smoothscroll.js
 //=include bigchain/newsletter.js
 
 jQuery(function($) {
diff --git a/_src/_assets/styles/_page-faq.scss b/_src/_assets/styles/_page-faq.scss
index c80424f..8ed358f 100644
--- a/_src/_assets/styles/_page-faq.scss
+++ b/_src/_assets/styles/_page-faq.scss
@@ -6,10 +6,6 @@
     font-size: $font-size-h4;
 }
 
-.faq__answer {
-
-}
-
 .faq-contents__title {
     font-size: $font-size-h5;
     margin-top: $spacer / 2;
diff --git a/_src/_assets/styles/bigchain/_content-page.scss b/_src/_assets/styles/bigchain/_content-page.scss
index 6443082..8eb2d71 100644
--- a/_src/_assets/styles/bigchain/_content-page.scss
+++ b/_src/_assets/styles/bigchain/_content-page.scss
@@ -8,7 +8,8 @@
     }
 
     > h1,
-    h2 {
+    h2,
+    .faq__question {
         &:not(#heading-1):not(#heading-2) {
             border-bottom: 1px solid $brand-main-blue-light;
             padding-bottom: $spacer;
@@ -48,7 +49,7 @@
 
         .header-icon {
             font-style: normal;
-            font-size: 2rem;
+            font-size: $font-size-lg;
             color: $brand-primary;
         }
     }
diff --git a/_src/_data/menus.yml b/_src/_data/menus.yml
index c2d06c2..051ec0d 100644
--- a/_src/_data/menus.yml
+++ b/_src/_data/menus.yml
@@ -14,12 +14,12 @@ main:
 secondary:
     - title: FAQ
       url: "/faq/"
+    - title: About
+      url: "/about/"
     - title: Whitepaper
       url: "/whitepaper/"
     - title: Blog
       url: https://blog.bigchaindb.com
-    - title: About
-      url: "/about/"
     - title: Contact
       url: "/contact/"
 
diff --git a/_src/_includes/hero.html b/_src/_includes/hero.html
index 55c627a..55de691 100644
--- a/_src/_includes/hero.html
+++ b/_src/_includes/hero.html
@@ -35,6 +35,6 @@
         </div>
     </aside>
 
-    <a class="hero__more scroll btn btn-link btn-sm" href="#features">Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
+    <a class="hero__more btn btn-link btn-sm" href="#features" data-scroll>Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
 
 </header>
diff --git a/_src/enterprise.html b/_src/enterprise.html
index d873d47..1194a3d 100644
--- a/_src/enterprise.html
+++ b/_src/enterprise.html
@@ -96,7 +96,7 @@ contact:
             <p class="section-description">{{ page.hero.description }}</p>
 
             {% for cta in page.hero.cta %}
-                <a class="btn hero__action {% if cta.scroll %}scroll{% endif %}" href="{{ cta.link }}">{{ cta.name }}</a>
+                <a class="btn hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
             {% endfor %}
         </hgroup>
     </div>
diff --git a/_src/faq.html b/_src/faq.html
index 4eee92b..d69fbc7 100644
--- a/_src/faq.html
+++ b/_src/faq.html
@@ -9,11 +9,11 @@ title: Frequently answered questions
 
         <div class="faq-contents">
             {% for faq in site.data.faq %}
-                <h1 class="faq-contents__title"><a href="#{{ faq.question | downcase | replace: ' ','-' | replace: '?', '' }}">{{ faq.question }}</a></h1>
+                <h1 class="faq-contents__title"><a href="#{{ faq.question | downcase | replace: ' ','-' | replace: '?', '' }}" data-scroll>{{ faq.question }}</a></h1>
             {% endfor %}
         </div>
 
-        <div class="faq">
+        <div class="faq content--page--markdown">
             {% for faq in site.data.faq %}
                 <h1 class="faq__question" id="{{ faq.question | downcase | replace: ' ','-' | replace: '?', '' }}">{{ faq.question }}</h1>
                 <div class="faq__answer">{{ faq.answer | markdownify }}</div>
diff --git a/_src/getstarted.html b/_src/getstarted.html
index ec44184..1431580 100644
--- a/_src/getstarted.html
+++ b/_src/getstarted.html
@@ -136,10 +136,10 @@ conn.postTransaction(txSigned)
 <nav class="menu--sub" data-gumshoe-header>
     <div class="row row--wide">
         <div class="menu-overflow" data-gumshoe>
-            <a class="menu__link scroll" href="#server"><span class="number">1</span> {{ content.server.title }}</a>
-            <a class="menu__link scroll" href="#drivers"><span class="number">2</span> {{ content.drivers.title }}</a>
-            <a class="menu__link scroll" href="#docs"><span class="number">3</span> {{ content.docs.title }}</a>
-            <a class="menu__link scroll" href="#community"><span class="number">4</span> {{ content.community.title }}</a>
+            <a class="menu__link" href="#server" data-scroll><span class="number">1</span> {{ content.server.title }}</a>
+            <a class="menu__link" href="#drivers" data-scroll><span class="number">2</span> {{ content.drivers.title }}</a>
+            <a class="menu__link" href="#docs" data-scroll><span class="number">3</span> {{ content.docs.title }}</a>
+            <a class="menu__link" href="#community" data-scroll><span class="number">4</span> {{ content.community.title }}</a>
         </div>
     </div>
 </nav>
diff --git a/_src/usecases.html b/_src/usecases.html
index a5ce15f..242cfca 100644
--- a/_src/usecases.html
+++ b/_src/usecases.html
@@ -43,7 +43,7 @@ js: page-usecases.min.js
     <div class="row row--wide">
         <div class="menu-overflow">
             {% for industry in site.data.industries %}
-                <a class="menu__link scroll" href="#{{ industry.name | downcase | replace: " ", "" }}">
+                <a class="menu__link" href="#{{ industry.name | downcase | replace: " ", "" }}" data-scroll>
                     <svg class="icon">
                         <use xlink:href="/assets/img/sprite.svg#{{ industry.icon }}"></use>
                     </svg>
diff --git a/package.json b/package.json
index 60d14a1..451533c 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "normalize-opentype.css": "^0.2.4",
     "parsleyjs": "^2.7.2",
     "select2": "^4.0.3",
+    "smooth-scroll": "^12.1.3",
     "svg4everybody": "^2.1.9",
     "textarea-autogrow": "^1.0.0",
     "vivus": "^0.4.1",