diff --git a/package.json b/package.json
index 75686d9..34f8900 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
     "react-select": "^2.0.0-beta.7",
+    "react-visibility-sensor": "^5.0.1",
     "redux": "^4.0.0",
     "redux-api-middleware": "^2.3.0",
     "redux-logger": "^3.0.6",
diff --git a/src/App.js b/src/App.js
index c4c7093..e74ae4a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,8 +2,11 @@ import React from 'react'
 // import './App.css'
 import { Switch, Route } from 'react-router-dom'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGhost, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import {
+  faGhost, faSpinner, faPlus, faSignInAlt, faSignOutAlt, faEnvelope,
+  faCheck, faExclamationTriangle, faKey, faSearch, faAlignJustify,
+  faCodeBranch, faSquare, faCheckSquare, faCompass,
+} from '@fortawesome/free-solid-svg-icons'
 
 import Main from './container/Main'
 import Geo from './container/Geo'
@@ -12,7 +15,20 @@ import Public from './container/Public'
 import { LOGIN_PATH } from './constants/path'
 
 library.add(faGhost)
+library.add(faPlus)
+library.add(faSignOutAlt)
+library.add(faSignInAlt)
 library.add(faSpinner)
+library.add(faSearch)
+library.add(faKey)
+library.add(faCheck)
+library.add(faEnvelope)
+library.add(faExclamationTriangle)
+library.add(faAlignJustify)
+library.add(faCodeBranch)
+library.add(faSquare)
+library.add(faCheckSquare)
+library.add(faCompass)
 
 const App = () => (
   <Switch>
diff --git a/src/components/CalendarList.js b/src/components/CalendarList.js
index e9764e6..dc5045c 100644
--- a/src/components/CalendarList.js
+++ b/src/components/CalendarList.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { getCalendar } from '../actions/calendar'
 import store from '../store'
@@ -27,8 +28,8 @@ margin-bottom: 1rem;
 
 const CheckboxIcon = (props) => (
   <GapBox checked={props.checked}>
-  {props.checked === true && <span><i className="fas fa-check-square"></i></span>}
-  {props.checked !== true && <span><i className="fas fa-square"></i></span>}
+  {props.checked === true && <span><FontAwesomeIcon icon="check-square" /></span>}
+  {props.checked !== true && <span><FontAwesomeIcon icon="square" /></span>}
   </GapBox>
 )
 
@@ -51,7 +52,7 @@ class CalendarList extends Component {
           <nav className="level is-mobile">
             <p className="level-item has-text-centered">
               <Link className="link is-info" to={`${match.url}/new`}>
-                <i className="fas fa-plus" /> New service
+                <FontAwesomeIcon icon="plus" /> New service
               </Link>
             </p>
           </nav>
diff --git a/src/components/FareAttributesDetail.js b/src/components/FareAttributesDetail.js
index 53b4730..b6e956d 100644
--- a/src/components/FareAttributesDetail.js
+++ b/src/components/FareAttributesDetail.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Redirect, Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import VisibilitySensor from 'react-visibility-sensor'
 
 import {
   PaymentMethodChoices, TransferChoices
@@ -11,6 +12,7 @@ import { getItemFromList } from '../utils'
 import { getFareAttr, getFareRule } from '../actions/fare'
 import store from '../store'
 import { FareRulesOne } from './FareRulesDetail'
+import Spinner from './Spinner'
 
 const StyledFareAttributesDetail = styled.div`
 padding: 1rem;
@@ -112,7 +114,7 @@ class FareAttributesDetail extends Component {
     const { attribID } = this.props.match.params
     const ones = results.filter(ele => ele.id === +attribID)
     if (this.state.fetching || fetching)
-      return <div>Waiting...</div>
+      return <Spinner show />
 
     if (ones.length < 1)
       return <Redirect to='/fare' />
@@ -121,11 +123,13 @@ class FareAttributesDetail extends Component {
       <div>
         {this.renderItem(ones[0])}
         <Link className="link is-info" to={`/fare/rules/new?fareattr=${ones[0].id}`}>
-          <i className="fas fa-plus" /> New fare rule
+          <FontAwesomeIcon icon="plus" /> New fare rule
         </Link>
-        {farerule.results && farerule.results.map(ele => <FareRulesOne item={ele} />)}
-        {farerule.fetching && <FontAwesomeIcon icon="spinner" pulse/>}
-        {farerule.next && <a onClick={this.handleFetchMoreRules}>More</a>}
+        {farerule.results && farerule.results.map(ele => <FareRulesOne key={`ff-${ele.id}`} item={ele} />)}
+        <Spinner show={farerule.fetching} />
+        {(!farerule.fetching && farerule.results.length > 10 && farerule.next) && <VisibilitySensor onChange={this.handleFetchMoreRules}>
+          <div>More</div>
+        </VisibilitySensor>}
       </div>
     )
   }
diff --git a/src/components/FareList.js b/src/components/FareList.js
index 1205dec..fdb303b 100644
--- a/src/components/FareList.js
+++ b/src/components/FareList.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { getFareAttr, getFareRule } from '../actions/fare'
 import store from '../store'
@@ -37,7 +38,7 @@ class FareList extends Component {
           <nav className="level is-mobile">
             <p className="level-item has-text-centered">
               <Link className="link is-info" to={`${match.url}/attributes/new`}>
-                <i className="fas fa-plus" /> New fare attributes
+                <FontAwesomeIcon icon="plus" /> New fare attributes
               </Link>
             </p>
           </nav>
@@ -50,7 +51,7 @@ class FareList extends Component {
           <nav className="level is-mobile">
             <p className="level-item has-text-centered">
               <Link className="link is-info" to={`${match.url}/rules/new`}>
-                <i className="fas fa-plus" /> New fare rule
+                <FontAwesomeIcon icon="plus" /> New fare rule
               </Link>
             </p>
           </nav>
diff --git a/src/components/FloatPane.js b/src/components/FloatPane.js
index 0f26a89..ccdf3cf 100644
--- a/src/components/FloatPane.js
+++ b/src/components/FloatPane.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Link, Route, Switch } from 'react-router-dom'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { logout } from '../utils/Auth'
 import RouteList from './RouteList'
@@ -76,7 +77,7 @@ const SimpleAgencyList = (props) => (
     </p>
     <p className="panel-tabs">
       <Link className="link is-info" to={`/agency/new`}>
-        <i className="fas fa-plus" /> New agency
+        <FontAwesomeIcon icon="plus"/> New agency
           </Link>
     </p>
     {props.agencies.map(ele => (
@@ -108,7 +109,7 @@ class FloatPane extends Component {
           <a className="button is-small is-primary"
             onClick={() => store.dispatch(polygonReset())}>
             <span className="icon">
-              <i className="fas fa-sign-out-alt"></i>
+              <FontAwesomeIcon icon="sign-out-alt" />
             </span>
             <span>Clear PG</span>
           </a>
@@ -116,7 +117,7 @@ class FloatPane extends Component {
             <a className="button is-small is-outlined"
               onClick={() => logout()}>
               <span className="icon">
-                <i className="fas fa-sign-out-alt"></i>
+                <FontAwesomeIcon icon="sign-out-alt" />
               </span>
               <span>Logout</span>
             </a>
@@ -124,7 +125,7 @@ class FloatPane extends Component {
           {!loggedIn &&
             <Link className="button is-small is-outlined is-info" to='/login'>
               <span className="icon">
-                <i className="fas fa-sign-in-alt"></i>
+                <FontAwesomeIcon icon="sign-in-alt" />
               </span>
               <span>Sign in</span>
             </Link>
@@ -150,7 +151,7 @@ class FloatPane extends Component {
     return (
       <StyledFloatPane hidePane={hidePane}>
         <StyledPaneToggler hidePane={hidePane} onClick={this.togglePane.bind(this)}>
-          <i className='fas fa-align-justify' />
+          <FontAwesomeIcon icon='align-justify' />
         </StyledPaneToggler>
         {this.renderTopLevel(loggedIn)}
         <Breadcrumb {...this.state.breadcrumb} />
diff --git a/src/components/Login.js b/src/components/Login.js
index 0aa1499..3b1b545 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 let invalidEmail = false
 let goodPassword = null
@@ -16,11 +17,11 @@ const Login = (props) => (
           onChange={props.updateField}
           placeholder="yourname@example.com" />
         <span className="icon is-small is-left">
-          <i className="fas fa-envelope"></i>
+          <FontAwesomeIcon icon="envelope"/>
         </span>
         { invalidEmail &&
         <span className="icon is-small is-right">
-          <i className="fas fa-exclamation-triangle"></i>
+          <FontAwesomeIcon icon="exclamation-triangle" />
         </span>}
       </div>
       { invalidEmail &&
@@ -36,11 +37,11 @@ const Login = (props) => (
           onKeyPress={(e) => {(e.key === 'Enter') && props.fetchAuth()}}
           placeholder="Password" />
         <span className="icon is-small is-left">
-          <i className="fas fa-key"></i>
+          <FontAwesomeIcon icon="key"/>
         </span>
         { goodPassword === true &&
           <span className="icon is-small is-right">
-            <i className="fas fa-check"></i>
+            <FontAwesomeIcon icon="check"/>
           </span> }
       </div>
       { goodPassword === true &&
diff --git a/src/components/Nav.js b/src/components/Nav.js
index f54fcb4..3dca259 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { logout } from '../utils/Auth'
 import { polygonReset } from '../actions'
@@ -26,11 +27,11 @@ class Nav extends Component {
           </StyledLink>
           <div className="navbar-dropdown is-boxed">
             <StyledLink to={`/fare/rules/new`} className="navbar-item">
-              <i className="fas fa-plus" />
+              <FontAwesomeIcon icon="plus"/>
               &nbsp; new fare rule
             </StyledLink>
             <StyledLink to={`/fare/attributes/new`} className="navbar-item">
-              <i className="fas fa-plus" />
+              <FontAwesomeIcon icon="plus"/>
               &nbsp; new fare attributes
             </StyledLink>
           </div>
@@ -41,7 +42,7 @@ class Nav extends Component {
           </StyledLink>
           <div className="navbar-dropdown is-boxed">
             <StyledLink to={`/calendar/new`} className="navbar-item">
-              <i className="fas fa-plus" />
+              <FontAwesomeIcon icon="plus"/>
               &nbsp; new service calendar
             </StyledLink>
           </div>
@@ -58,7 +59,7 @@ class Nav extends Component {
                 </StyledLink>
               ))}
             <StyledLink to={`/agency/new`} className="navbar-item">
-              <i className="fas fa-plus" />
+              <FontAwesomeIcon icon="plus"/>
               &nbsp;Add new agency
             </StyledLink>
           </div>
@@ -96,7 +97,7 @@ class Nav extends Component {
                   <a className="button is-primary"
                     onClick={() => polygonReset()}>
                     <span className="icon">
-                      <i className="fas fa-sign-out-alt"></i>
+                      <FontAwesomeIcon icon="sign-out-alt"/>
                     </span>
                     <span>Clear polygons</span>
                   </a>
@@ -106,7 +107,7 @@ class Nav extends Component {
                   <a className="button is-primary"
                     onClick={() => logout()}>
                     <span className="icon">
-                      <i className="fas fa-sign-out-alt"></i>
+                      <FontAwesomeIcon icon="sign-out-alt"/>
                     </span>
                     <span>Logout</span>
                   </a>
@@ -114,7 +115,7 @@ class Nav extends Component {
                 {!loggedIn &&
                   <Link className="button is-primary" to='/login'>
                     <span className="icon">
-                      <i className="fas fa-sign-in-alt"></i>
+                      <FontAwesomeIcon icon="sign-in-alt"/>
                     </span>
                     <span>Sign in</span>
                   </Link>
diff --git a/src/components/RouteList.js b/src/components/RouteList.js
index 6dedd10..379a865 100644
--- a/src/components/RouteList.js
+++ b/src/components/RouteList.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import Spinner from './Spinner'
 import { getRoute } from '../actions'
@@ -52,7 +53,7 @@ class RouteList extends Component {
               className="panel-block"
               to={`/map/${agencyId}/route/${ele.route_id}`}>
               <span className="panel-icon">
-                <i className="fas fa-code-branch" aria-hidden="true"></i>
+                <FontAwesomeIcon icon="code-branch" ariaHidden="true"/>
               </span>
               <div>
                 {ele.short_name}
diff --git a/src/components/Spinner.js b/src/components/Spinner.js
index 8f168e0..967eddf 100644
--- a/src/components/Spinner.js
+++ b/src/components/Spinner.js
@@ -1,9 +1,10 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const Spinner = (props) => (
   <span>
     {props.show && <span className={props.className}>
-      <i className="far fa-compass fa-pulse" /></span>}
+      <FontAwesomeIcon icon="compass" pulse /></span>}
   </span>
 )
 
diff --git a/src/components/StopList.js b/src/components/StopList.js
index 450fabd..746f959 100644
--- a/src/components/StopList.js
+++ b/src/components/StopList.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import store from '../store'
 import { STOP_REQUEST } from '../constants/ActionTypes'
@@ -46,7 +47,7 @@ class StopList extends Component {
         </p>
         <p className="panel-tabs">
           <Link className="link is-info" to={`/map/stop/new`}>
-            <i className="fas fa-plus" /> New stop
+            <FontAwesomeIcon icon="plus" /> New stop
           </Link>
           <a className="link is-info" onClick={this.fetchStopNearby.bind(this)}>Near</a>
         </p>
@@ -59,7 +60,7 @@ class StopList extends Component {
               onChange={(e) => { this.handleStopSearch(e) } }
               onKeyPress={(e) => { (e.key === 'Enter') && this.handleStopSearch(e) }} />
               <span className="icon is-small is-left">
-                <i className="fas fa-search" aria-hidden="true"></i>
+                <FontAwesomeIcon icon="search" ariaHidden="true"/>
               </span>
           </p>
         </div>