diff --git a/src/Application.js b/src/Application.js
new file mode 100644
index 0000000..070ba51
--- /dev/null
+++ b/src/Application.js
@@ -0,0 +1,82 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import isMobile from 'ismobilejs';
+import {CSSTransition, TransitionGroup} from 'react-transition-group';
+import {Redirect, Route, Switch} from 'react-router-dom';
+import Header from './imports/components/Header';
+import ScrollToTop from './imports/components/ScrollToTop';
+import Intro from './pages/Intro';
+import MobileHome from './mobilePages/Journey/Home';
+import Home from './pages/Journey/Home';
+import MobileServices from './mobilePages/Journey/Services';
+import Services from './pages/Journey/Services';
+import MobileImpact from './mobilePages/Journey/Impact';
+import Impact from './pages/Journey/Impact';
+import MobileCaseStudies from './mobilePages/Journey/CaseStudies';
+import CaseStudies from './pages/Journey/CaseStudies';
+import MobileTeam from './mobilePages/Journey/Team';
+import Team from './pages/Journey/Team';
+import MobileConsultation from './mobilePages/Journey/Consultation';
+import Consultation from './pages/Journey/Consultation';
+import BetterYet from './pages/Projects/BetterYet';
+import LPMA from './pages/Projects/LPMA';
+import Hub from './pages/Projects/Hub';
+import {trackPage} from './imports/analytics';
+
+export default class Application extends React.Component {
+  componentDidUpdate(prevProps) {
+    const {location: {prevPathname}} = prevProps;
+    const {location} = this.props;
+    const {pathname} = location;
+    if (prevPathname !== pathname) {
+      trackPage(pathname);
+    }
+  }
+
+  render() {
+    const {location} = this.props;
+    return (
+      <Fragment>
+        {(location.pathname !== '/'
+          && location.pathname !== '/betteryet'
+          && location.pathname !== '/lpma'
+          && location.pathname !== '/hub'
+          && ((isMobile.phone && location.pathname !== '/home')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/services')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/our-work')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/team')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/consult')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/impact')
+            || (!isMobile.phone))) && <Header />}
+        <ScrollToTop>
+          <TransitionGroup>
+            <CSSTransition key={location.key} classNames="fade" timeout={450}>
+              <Switch location={location}>
+                <Route exact path="/" component={Intro} />
+                <Route exact path="/home" component={isMobile.phone ? MobileHome : Home} />
+                <Route exact path="/services" component={isMobile.phone ? MobileServices : Services} />
+                <Route exact path="/impact" component={isMobile.phone ? MobileImpact : Impact} />
+                <Route exact path="/our-work" component={isMobile.phone ? MobileCaseStudies : CaseStudies} />
+                <Route exact path="/team" component={isMobile.phone ? MobileTeam : Team} />
+                <Route exact path="/consult" component={isMobile.phone ? MobileConsultation : Consultation} />
+                <Route exact path="/betteryet" component={BetterYet} />
+                <Route exact path="/lpma" component={LPMA} />
+                <Route exact path="/hub" component={Hub} />
+                <Route path="*" render={() => <Redirect to="/" />} />
+              </Switch>
+            </CSSTransition>
+          </TransitionGroup>
+        </ScrollToTop>
+      </Fragment>
+    );
+  }
+}
+
+Application.propTypes = {
+  location: PropTypes.object.isRequired,
+};
diff --git a/src/app.js b/src/app.js
index 2ff16d9..a1c7ec4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,39 +1,17 @@
 import React, {Component, Fragment} from 'react';
-import {
-  BrowserRouter, Route, Switch, Redirect,
-} from 'react-router-dom';
-import {TransitionGroup, CSSTransition} from 'react-transition-group';
-import ScrollToTop from 'components/ScrollToTop';
+import {BrowserRouter, Route} from 'react-router-dom';
 import DeviceOrientation, {Orientation} from 'components/Orientation';
 import LoaderLine from 'components/Loader/LoaderLine';
-import Header from 'components/Header';
 import isMobile from 'ismobilejs';
 import 'normalize.css';
 import 'styles/main.styl';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 
-import Intro from './pages/Intro';
-import Home from './pages/Journey/Home';
-import MobileHome from './mobilePages/Journey/Home';
-import Services from './pages/Journey/Services';
-import MobileServices from './mobilePages/Journey/Services';
-import Impact from './pages/Journey/Impact';
-import MobileImpact from './mobilePages/Journey/Impact';
-import CaseStudies from './pages/Journey/CaseStudies';
-import MobileCaseStudies from './mobilePages/Journey/CaseStudies';
-import Team from './pages/Journey/Team';
-import MobileTeam from './mobilePages/Journey/Team';
-import Consultation from './pages/Journey/Consultation';
-import MobileConsultation from './mobilePages/Journey/Consultation';
-
-import BetterYet from './pages/Projects/BetterYet';
-import LPMA from './pages/Projects/LPMA';
-import Hub from './pages/Projects/Hub';
-
 import Landscape from './pages/Landscape';
 
 import './index.styl';
+import Application from './Application';
 
 AOS.init({
   disable: false,
@@ -89,53 +67,14 @@ class App extends Component {
 
   renderRoutes() {
     const {ready} = this.state;
-
-    if (!ready) return null;
+    if (!ready) {
+      return false;
+    }
 
     return (
       <BrowserRouter>
-        <Route render={({location}) => (
-          <Fragment>
-            {(location.pathname !== '/'
-              && location.pathname !== '/betteryet'
-              && location.pathname !== '/lpma'
-              && location.pathname !== '/hub'
-              && ((isMobile.phone && location.pathname !== '/home')
-              || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/services')
-              || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/our-work')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/team')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/consult')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/impact')
-              || (!isMobile.phone))) && <Header />}
-            <ScrollToTop>
-              <TransitionGroup>
-                <CSSTransition key={location.key} classNames="fade" timeout={450}>
-                  <Switch location={location}>
-                    <Route exact path="/" component={Intro} />
-                    <Route exact path="/home" component={isMobile.phone ? MobileHome : Home} />
-                    <Route exact path="/services" component={isMobile.phone ? MobileServices : Services} />
-                    <Route exact path="/impact" component={isMobile.phone ? MobileImpact : Impact} />
-                    <Route exact path="/our-work" component={isMobile.phone ? MobileCaseStudies : CaseStudies} />
-                    <Route exact path="/team" component={isMobile.phone ? MobileTeam : Team} />
-                    <Route exact path="/consult" component={isMobile.phone ? MobileConsultation : Consultation} />
-                    <Route exact path="/betteryet" component={BetterYet} />
-                    <Route exact path="/lpma" component={LPMA} />
-                    <Route exact path="/hub" component={Hub} />
-                    <Route path="*" render={() => <Redirect to="/" />} />
-                  </Switch>
-                </CSSTransition>
-              </TransitionGroup>
-            </ScrollToTop>
-          </Fragment>
-        )}
-        />
+        <Route component={Application} />
       </BrowserRouter>
-
     );
   }
 
diff --git a/src/imports/analytics/index.js b/src/imports/analytics/index.js
index 32ad76f..e7ccd56 100644
--- a/src/imports/analytics/index.js
+++ b/src/imports/analytics/index.js
@@ -58,3 +58,7 @@ export const trackEvent = (eventName, props = {}) => {
     ...props
   });
 };
+
+export const trackPage = (pageName, props = {}) => {
+  window.analytics.page(pageName, props);
+};
diff --git a/src/imports/components/interactions/FullPageScroll.js b/src/imports/components/interactions/FullPageScroll.js
new file mode 100644
index 0000000..6b3594c
--- /dev/null
+++ b/src/imports/components/interactions/FullPageScroll.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactFullpage from '@fullpage/react-fullpage';
+
+export default class FullPageScroll extends React.Component {
+  render() {
+    const {children} = this.props;
+    return (
+      <ReactFullpage
+        licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
+        navigation
+        slidesNavigation
+        controlArrows={false}
+        render={() => (
+          <ReactFullpage.Wrapper>
+            {children}
+          </ReactFullpage.Wrapper>
+        )}
+      />
+    );
+  }
+}
+
+FullPageScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/src/imports/utils/sendContactMessageToSlack.js b/src/imports/utils/sendContactMessageToSlack.js
new file mode 100644
index 0000000..41096e7
--- /dev/null
+++ b/src/imports/utils/sendContactMessageToSlack.js
@@ -0,0 +1,21 @@
+import request from 'utils/request';
+
+const WEBHOOK_URL = 'https://hooks.slack.com/services/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';
+const DEV_WEBHOOK_URL = 'https://hooks.slack.com/services/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';
+
+const sendContactMessageToSlack = ({name, email, message}) => {
+  const formData = JSON.stringify({
+    attachments: [
+      {
+        color: '#000000',
+        pretext: 'New Contact Us form request',
+        author_name: `From: ${name}`,
+        text: `*Email:* ${email}\n*Message:* _${message}_`,
+      }
+    ]
+  });
+
+  return request.post(process.env.NODE_ENV === 'development' ? DEV_WEBHOOK_URL : WEBHOOK_URL, formData);
+};
+
+export default sendContactMessageToSlack;
diff --git a/src/mobilePages/Journey/CaseStudies/index.js b/src/mobilePages/Journey/CaseStudies/index.js
index a06df3b..b54ee65 100644
--- a/src/mobilePages/Journey/CaseStudies/index.js
+++ b/src/mobilePages/Journey/CaseStudies/index.js
@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
-import ReactFullpage from '@fullpage/react-fullpage';
 
 import MobileHeader from 'components/MobileHeader';
 import MobileFooter from 'components/MobileFooter';
+import FullPageScroll from 'components/interactions/FullPageScroll';
 
 import CaseStudy from './Sections/CaseStudy';
 
@@ -16,44 +16,36 @@ class MobileCaseStudies extends Component {
         <h1 className="sticky-heading">
           Our Work
         </h1>
-        <ReactFullpage
-          licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
-          navigation
-          slidesNavigation
-          controlArrows={false}
-          render={() => (
-            <ReactFullpage.Wrapper>
-              <div className="section">
-                <CaseStudy
-                  projectName="BetterYet"
-                  projectDescription="Loyalty for Small Businesses"
-                  to="/betteryet"
-                  image="/images/mobile/betteryet-mobile-thumbnail.png"
-                />
-              </div>
-              <div className="section">
-                <CaseStudy
-                  projectName="HUB X"
-                  projectDescription="Community app"
-                  to="/hub"
-                  image="/images/mobile/hub-mobile-thumbnail.png"
-                />
-              </div>
-              <div className="section">
-                <CaseStudy
-                  desktop
-                  projectName="LPMA"
-                  projectDescription="Property management system"
-                  to="/lpma"
-                  image="/images/mobile/lpma-mobile-thumbnail.png"
-                />
-              </div>
-              <div className="section footer-section">
-                <MobileFooter />
-              </div>
-            </ReactFullpage.Wrapper>
-          )}
-        />
+        <FullPageScroll>
+          <div className="section">
+            <CaseStudy
+              projectName="BetterYet"
+              projectDescription="Loyalty for Small Businesses"
+              to="/betteryet"
+              image="/images/mobile/betteryet-mobile-thumbnail.png"
+            />
+          </div>
+          <div className="section">
+            <CaseStudy
+              projectName="HUB X"
+              projectDescription="Community app"
+              to="/hub"
+              image="/images/mobile/hub-mobile-thumbnail.png"
+            />
+          </div>
+          <div className="section">
+            <CaseStudy
+              desktop
+              projectName="LPMA"
+              projectDescription="Property management system"
+              to="/lpma"
+              image="/images/mobile/lpma-mobile-thumbnail.png"
+            />
+          </div>
+          <div className="section footer-section">
+            <MobileFooter />
+          </div>
+        </FullPageScroll>
       </div>
     );
   }
diff --git a/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js b/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js
index 12ab3e0..13fa626 100644
--- a/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js
+++ b/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js
@@ -1,13 +1,10 @@
 import React, {Component} from 'react';
-import request from 'utils/request';
 import {NotificationContainer, NotificationManager} from 'react-notifications';
 
 import 'react-notifications/lib/notifications.css';
 
 import './index.styl';
-
-const WEBHOOK_URL = 'https://hooks.slack.com/services/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';
-const DEV_WEBHOOK_URL = 'https://hooks.slack.com/services/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';
+import sendContactMessageToSlack from 'utils/sendContactMessageToSlack';
 
 class Intro extends Component {
   constructor(props) {
@@ -24,22 +21,9 @@ class Intro extends Component {
   handleSubmit(e) {
     e.preventDefault();
 
-    const {
-      name, email, message
-    } = this.state;
-
-    const formData = JSON.stringify({
-      attachments: [
-        {
-          color: '#000000',
-          pretext: 'New Contact Us form request',
-          author_name: `From: ${name}`,
-          text: `*Email:* ${email}\n*Message:* _${message}_`,
-        }
-      ]
-    });
+    const {name, email, message} = this.state;
 
-    request.post(process.env.NODE_ENV === 'development' ? DEV_WEBHOOK_URL : WEBHOOK_URL, formData)
+    sendContactMessageToSlack({name, email, message})
       .then(() => {
         this.setState({
           name: '',
diff --git a/src/mobilePages/Journey/Consultation/index.js b/src/mobilePages/Journey/Consultation/index.js
index cba3634..853a962 100644
--- a/src/mobilePages/Journey/Consultation/index.js
+++ b/src/mobilePages/Journey/Consultation/index.js
@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
-import ReactFullpage from '@fullpage/react-fullpage';
 
 import MobileHeader from 'components/MobileHeader';
 import MobileFooter from 'components/MobileFooter';
-
+import FullPageScroll from 'components/interactions/FullPageScroll';
+// TODO rename all the `Sections` directories to `components`
 import Intro from './Sections/Intro';
 import ConsultForm from './Sections/ConsultForm';
 
@@ -13,26 +13,18 @@ class MobileConsultation extends Component {
   render() {
     return (
       <div className="mobile-consult-page">
-        <ReactFullpage
-          licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
-          navigation
-          slidesNavigation
-          controlArrows={false}
-          render={() => (
-            <ReactFullpage.Wrapper>
-              <div className="section">
-                <MobileHeader />
-                <Intro />
-              </div>
-              <div className="section">
-                <ConsultForm />
-              </div>
-              <div className="section footer-section">
-                <MobileFooter />
-              </div>
-            </ReactFullpage.Wrapper>
-          )}
-        />
+        <FullPageScroll>
+          <div className="section">
+            <MobileHeader />
+            <Intro />
+          </div>
+          <div className="section">
+            <ConsultForm />
+          </div>
+          <div className="section footer-section">
+            <MobileFooter />
+          </div>
+        </FullPageScroll>
       </div>
     );
   }
diff --git a/src/mobilePages/Journey/Home/index.js b/src/mobilePages/Journey/Home/index.js
index fe6343e..94b4227 100644
--- a/src/mobilePages/Journey/Home/index.js
+++ b/src/mobilePages/Journey/Home/index.js
@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
-import ReactFullpage from '@fullpage/react-fullpage';
 
 import MobileHeader from 'components/MobileHeader';
 import MobileFooter from 'components/MobileFooter';
+import FullPageScroll from 'components/interactions/FullPageScroll';
 
 import Intro from './Sections/Intro';
 import Services from './Sections/Services';
@@ -15,55 +15,47 @@ class MobileHome extends Component {
     return (
       <div className="home-page">
         <MobileHeader />
-        <ReactFullpage
-          licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
-          navigation
-          slidesNavigation
-          controlArrows={false}
-          render={() => (
-            <ReactFullpage.Wrapper>
-              <div className="section">
-                <Intro />
-              </div>
-              <div className="section">
-                <Services />
-              </div>
-              <div className="section cs-section">
-                <h1 className="case-studies-heading">
-                  Our Work
-                </h1>
-                <div className="slide">
-                  <CaseStudy
-                    projectName="BetterYet"
-                    projectDescription="Loyalty for Small Businesses"
-                    to="/betteryet"
-                    image="/images/mobile/betteryet-mobile-thumbnail.png"
-                  />
-                </div>
-                <div className="slide">
-                  <CaseStudy
-                    projectName="HUB X"
-                    projectDescription="Community app"
-                    to="/hub"
-                    image="/images/mobile/hub-mobile-thumbnail.png"
-                  />
-                </div>
-                <div className="slide">
-                  <CaseStudy
-                    desktop
-                    projectName="LPMA"
-                    projectDescription="Property management system"
-                    to="/lpma"
-                    image="/images/mobile/lpma-mobile-thumbnail.png"
-                  />
-                </div>
-              </div>
-              <div className="section footer-section">
-                <MobileFooter />
-              </div>
-            </ReactFullpage.Wrapper>
-          )}
-        />
+        <FullPageScroll>
+          <div className="section">
+            <Intro />
+          </div>
+          <div className="section">
+            <Services />
+          </div>
+          <div className="section cs-section">
+            <h1 className="case-studies-heading">
+              Our Work
+            </h1>
+            <div className="slide">
+              <CaseStudy
+                projectName="BetterYet"
+                projectDescription="Loyalty for Small Businesses"
+                to="/betteryet"
+                image="/images/mobile/betteryet-mobile-thumbnail.png"
+              />
+            </div>
+            <div className="slide">
+              <CaseStudy
+                projectName="HUB X"
+                projectDescription="Community app"
+                to="/hub"
+                image="/images/mobile/hub-mobile-thumbnail.png"
+              />
+            </div>
+            <div className="slide">
+              <CaseStudy
+                desktop
+                projectName="LPMA"
+                projectDescription="Property management system"
+                to="/lpma"
+                image="/images/mobile/lpma-mobile-thumbnail.png"
+              />
+            </div>
+          </div>
+          <div className="section footer-section">
+            <MobileFooter />
+          </div>
+        </FullPageScroll>
       </div>
     );
   }
diff --git a/src/mobilePages/Journey/Impact/index.js b/src/mobilePages/Journey/Impact/index.js
index 5b6977d..73dfdf7 100644
--- a/src/mobilePages/Journey/Impact/index.js
+++ b/src/mobilePages/Journey/Impact/index.js
@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
-import ReactFullpage from '@fullpage/react-fullpage';
 
 import MobileHeader from 'components/MobileHeader';
 import MobileFooter from 'components/MobileFooter';
+import FullPageScroll from 'components/interactions/FullPageScroll';
 
 import Intro from './Sections/Intro';
 
@@ -13,22 +13,14 @@ class MobileImpact extends Component {
     return (
       <div className="impact-page">
         <MobileHeader />
-        <ReactFullpage
-          licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
-          navigation
-          slidesNavigation
-          controlArrows={false}
-          render={() => (
-            <ReactFullpage.Wrapper>
-              <div className="section">
-                <Intro />
-              </div>
-              <div className="section footer-section">
-                <MobileFooter />
-              </div>
-            </ReactFullpage.Wrapper>
-          )}
-        />
+        <FullPageScroll>
+          <div className="section">
+            <Intro />
+          </div>
+          <div className="section footer-section">
+            <MobileFooter />
+          </div>
+        </FullPageScroll>
       </div>
     );
   }
diff --git a/src/mobilePages/Journey/Services/index.js b/src/mobilePages/Journey/Services/index.js
index 4460391..7683778 100644
--- a/src/mobilePages/Journey/Services/index.js
+++ b/src/mobilePages/Journey/Services/index.js
@@ -1,11 +1,10 @@
 import React, {Component} from 'react';
-import ReactFullpage from '@fullpage/react-fullpage';
 
 import MobileHeader from 'components/MobileHeader';
 import MobileFooter from 'components/MobileFooter';
+import FullPageScroll from 'components/interactions/FullPageScroll';
 
-import {FeatherPen, Compass, BrowserWindows} from 'icons';
-
+import {BrowserWindows, Compass, FeatherPen} from 'icons';
 
 import Intro from './Sections/Intro';
 import IntroSecond from './Sections/IntroSecond';
@@ -18,64 +17,56 @@ class MobileServices extends Component {
     return (
       <div className="services-page">
         <MobileHeader />
-        <ReactFullpage
-          licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
-          navigation
-          slidesNavigation
-          controlArrows={false}
-          render={() => (
-            <ReactFullpage.Wrapper>
-              <div className="section">
-                <Intro />
-              </div>
-              <div className="section">
-                <IntroSecond />
-              </div>
-              <div className="section sc-section">
-                <h1 className="service-cards-heading">
-                  Dream, Design, Develop
-                </h1>
-                <p className="service-cards-description">
-                  We are always looking to hear from people that want to change the world with software.
-                  We call them heroes. If you’re one of them, please get in touch.
-                </p>
-                <div className="slide">
-                  <ServiceCard
-                    title="Branding"
-                    description="
+        <FullPageScroll>
+          <div className="section">
+            <Intro />
+          </div>
+          <div className="section">
+            <IntroSecond />
+          </div>
+          <div className="section sc-section">
+            <h1 className="service-cards-heading">
+              Dream, Design, Develop
+            </h1>
+            <p className="service-cards-description">
+              We are always looking to hear from people that want to change the world with software.
+              We call them heroes. If you’re one of them, please get in touch.
+            </p>
+            <div className="slide">
+              <ServiceCard
+                title="Branding"
+                description="
                       The brand lives and evolves in the minds of people.
                       We build brands for companies that are changing how the world works.
                     "
-                    icon={<FeatherPen />}
-                  />
-                </div>
-                <div className="slide">
-                  <ServiceCard
-                    title="Design"
-                    description="
+                icon={<FeatherPen />}
+              />
+            </div>
+            <div className="slide">
+              <ServiceCard
+                title="Design"
+                description="
                       We design applications that intuitively meet the needs of your customers and,
                       in turn keep them sticking around for good.
                     "
-                    icon={<Compass />}
-                  />
-                </div>
-                <div className="slide">
-                  <ServiceCard
-                    title="Development"
-                    description="
+                icon={<Compass />}
+              />
+            </div>
+            <div className="slide">
+              <ServiceCard
+                title="Development"
+                description="
                       With over a decade of experience our team creates flawless
                       applications that work exactly as you had envisioned.
                     "
-                    icon={<BrowserWindows />}
-                  />
-                </div>
-              </div>
-              <div className="section footer-section">
-                <MobileFooter />
-              </div>
-            </ReactFullpage.Wrapper>
-          )}
-        />
+                icon={<BrowserWindows />}
+              />
+            </div>
+          </div>
+          <div className="section footer-section">
+            <MobileFooter />
+          </div>
+        </FullPageScroll>
       </div>
     );
   }
diff --git a/src/mobilePages/Journey/Team/index.js b/src/mobilePages/Journey/Team/index.js
index 14b1046..5863a89 100644
--- a/src/mobilePages/Journey/Team/index.js
+++ b/src/mobilePages/Journey/Team/index.js
@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
-import ReactFullpage from '@fullpage/react-fullpage';
 
 import MobileHeader from 'components/MobileHeader';
 import MobileFooter from 'components/MobileFooter';
+import FullPageScroll from 'components/interactions/FullPageScroll';
 
 import Intro from './Sections/Intro';
 import TeamMember from './Sections/TeamMember';
@@ -65,34 +65,26 @@ class MobileTeam extends Component {
     return (
       <div className="team-page">
         <MobileHeader />
-        <ReactFullpage
-          licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
-          navigation
-          slidesNavigation
-          controlArrows={false}
-          render={() => (
-            <ReactFullpage.Wrapper>
-              <div className="section">
-                <Intro />
-              </div>
-              {teamMembers.map((member => (
-                <div key={member.name} className="section">
-                  <TeamMember
-                    picture={member.picture}
-                    name={member.name}
-                    title={member.title}
-                    phraseOne={member.phraseOne}
-                    phraseTwo={member.phraseTwo}
-                    phraseThree={member.phraseThree}
-                  />
-                </div>
-              )))}
-              <div className="section footer-section">
-                <MobileFooter />
-              </div>
-            </ReactFullpage.Wrapper>
-          )}
-        />
+        <FullPageScroll>
+          <div className="section">
+            <Intro />
+          </div>
+          {teamMembers.map((member => (
+            <div key={member.name} className="section">
+              <TeamMember
+                picture={member.picture}
+                name={member.name}
+                title={member.title}
+                phraseOne={member.phraseOne}
+                phraseTwo={member.phraseTwo}
+                phraseThree={member.phraseThree}
+              />
+            </div>
+          )))}
+          <div className="section footer-section">
+            <MobileFooter />
+          </div>
+        </FullPageScroll>
       </div>
     );
   }
diff --git a/src/pages/Journey/Consultation/components/ConsultationForm.js b/src/pages/Journey/Consultation/components/ConsultationForm.js
new file mode 100644
index 0000000..c735812
--- /dev/null
+++ b/src/pages/Journey/Consultation/components/ConsultationForm.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from 'components/Input';
+import TextArea from 'components/TextArea';
+import Button from 'components/interactions/Button';
+import {trackEvent} from 'analytics';
+
+const EMPTY_VALUES = {
+  name: '',
+  email: '',
+  message: '',
+};
+
+export default class ConsultationForm extends React.Component {
+  state = {
+    ...EMPTY_VALUES,
+    submitting: false,
+    pristine: true
+  };
+
+  onFormInputChange(e) {
+    const {pristine} = this.state;
+    if (pristine) {
+      this.setState({pristine: false}, () => trackEvent('Consult form touched'));
+    }
+    this.setState({[e.target.name]: e.target.value});
+  }
+
+  onSubmit(e) {
+    e.preventDefault();
+
+    const {onSubmit} = this.props;
+    this.setState({submitting: true});
+
+    onSubmit(this.state)
+      .then(() => this.setState(EMPTY_VALUES))
+      .then(() => trackEvent('Consult form submitted'))
+      .finally(() => this.setState({submitting: false}));
+  }
+
+  render() {
+    const {
+      name, email, message, submitting
+    } = this.state;
+    return (
+      <form className="mail-form" onSubmit={e => this.onSubmit(e)}>
+        <Input
+          required
+          name="name"
+          id="name"
+          type="text"
+          placeholder="Name *"
+          label={'What\'s your name?*'}
+          value={name}
+          onChange={e => this.onFormInputChange(e)}
+        />
+        <Input
+          required
+          name="email"
+          id="email"
+          type="email"
+          placeholder="Email *"
+          label={'What\'s your email?*'}
+          value={email}
+          onChange={e => this.onFormInputChange(e)}
+        />
+        <div className="mail-time">
+          <TextArea
+            required
+            name="message"
+            value={message}
+            placeholder="(Optional) Tomorrow at 11:30 am or 4 pm EST..."
+            label="When would you like to have a chat?"
+            onChange={e => this.onFormInputChange(e)}
+          />
+        </div>
+        <Button type="submit" disabled={submitting}>BOOK NOW</Button>
+      </form>
+    );
+  }
+}
+
+ConsultationForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+};
diff --git a/src/pages/Journey/Consultation/index.js b/src/pages/Journey/Consultation/index.js
index 63c18b8..eec1b4d 100644
--- a/src/pages/Journey/Consultation/index.js
+++ b/src/pages/Journey/Consultation/index.js
@@ -1,71 +1,32 @@
 import React, {Component} from 'react';
-import request from 'utils/request';
 import {NotificationContainer, NotificationManager} from 'react-notifications';
 import Page from 'components/Page';
-import Button from 'components/interactions/Button';
 import Heading from 'components/typography/Heading';
 import {ConsultUs, MailBox} from 'icons/backgrounds/ConsultBG';
-import Input from 'components/Input';
-import TextArea from 'components/TextArea';
+import sendContactMessageToSlack from 'utils/sendContactMessageToSlack';
 
 import 'react-notifications/lib/notifications.css';
 
 import './index.styl';
 import './mobile/index.styl';
-
-const WEBHOOK_URL = 'https://hooks.slack.com/services/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';
-const DEV_WEBHOOK_URL = 'https://hooks.slack.com/services/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';
+import ConsultationForm from './components/ConsultationForm';
 
 class Consultation extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: '',
-      email: '',
-      message: '',
-      showSuccess: false,
-    };
-  }
-
-  handleSubmit(e) {
-    e.preventDefault();
-
-    const {
-      name, email, message
-    } = this.state;
+  state = {
+    showSuccess: false,
+  };
 
-    const formData = JSON.stringify({
-      attachments: [
-        {
-          color: '#000000',
-          pretext: 'New Contact Us form request',
-          author_name: `From: ${name}`,
-          text: `*Email:* ${email}\n*Message:* _${message}_`,
-        }
-      ]
-    });
-
-    request.post(process.env.NODE_ENV === 'development' ? DEV_WEBHOOK_URL : WEBHOOK_URL, formData)
+  handleSubmit(values) {
+    return sendContactMessageToSlack(values)
       .then(() => {
-        this.setState({
-          name: '',
-          email: '',
-          message: '',
-          showSuccess: true,
-        });
-        NotificationManager.success('Thank you, we will get back to you!', null, 5000);
+        this.setState({showSuccess: true});
+        NotificationManager.success('Thank you, we will get back to you promptly!', null, 5000);
         setTimeout(() => this.setState({showSuccess: false}), 5000);
       });
   }
 
-  handleFormInput(e) {
-    this.setState({[e.target.name]: e.target.value});
-  }
-
   render() {
-    const {
-      name, email, message, showSuccess
-    } = this.state;
+    const {showSuccess} = this.state;
 
     return (
       <Page className="consult-page">
@@ -96,39 +57,7 @@ class Consultation extends Component {
           <Heading className="mail-heading">
             Book your free 30 minute product development and design consultation
           </Heading>
-          <form className="mail-form" onSubmit={e => this.handleSubmit(e)}>
-            <Input
-              required
-              name="name"
-              id="name"
-              type="text"
-              placeholder="Name *"
-              label={'What\'s your name?*'}
-              value={name}
-              onChange={e => this.handleFormInput(e)}
-            />
-            <Input
-              required
-              name="email"
-              id="email"
-              type="email"
-              placeholder="Email *"
-              label={'What\'s your email?*'}
-              value={email}
-              onChange={e => this.handleFormInput(e)}
-            />
-            <div className="mail-time">
-              <TextArea
-                required
-                name="message"
-                value={message}
-                placeholder="(Optional) Tomorrow at 11:30 am or 4 pm EST..."
-                label="When would you like to have a chat?"
-                onChange={e => this.handleFormInput(e)}
-              />
-            </div>
-            <Button type="submit">BOOK NOW</Button>
-          </form>
+          <ConsultationForm onSubmit={e => this.handleSubmit(e)} />
         </div>
       </Page>
     );