diff --git a/.storybook/config.js b/.storybook/config.js
index 563020c245d18fe5d94ed7c6472dd9022a70187f..4394bff8ad1edae0c18e399163a87edbe8056dbc 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,4 +1,5 @@
 import { configure } from '@storybook/react'
 import '../src/App.css'
+import "font-awesome/css/font-awesome.min.css"
 
 configure(require.context('../src', true, /\.stories\.tsx/), module)
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index d6794e15b05e701fbb237bb73bd00f2cff7a2b41..b5aa7b69b8d0fde9729f159bca3b400d19e7340a 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -25,7 +25,12 @@ module.exports = async ({ config, mode }) => {
     ...config,
     module: {
       ...config.module,
-      rules: [typescriptRules, ...cssRules]
+      rules: [typescriptRules, ...cssRules,
+        {
+          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+          loaders: ['file-loader']
+        }
+      ]
     }
   }
 }
diff --git a/config/cssRules.js b/config/cssRules.js
index 625ef748c048e9ec6cd43ddd8b31ce6b0aaef9d9..7fed30e61ac73bec245c3382e552856c862a313f 100644
--- a/config/cssRules.js
+++ b/config/cssRules.js
@@ -5,7 +5,6 @@ module.exports = [
   // SASS support
   {
     test: /\.scss$/,
-    include: paths.appSrc,
     loaders: ["style-loader", "css-loader", "sass-loader"]
   },
   // "postcss" loader applies autoprefixer to our CSS.
diff --git a/package.json b/package.json
index e76cbf07c6f0e954d910ad54946dc1c3297dff69..c952cca0adefb3ac2fcacd44086e3227525f8646 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,14 @@
 {
   "name": "decentraplayer",
-  "version": "0.10.20",
+  "version": "0.10.21",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
     "@babel/runtime-corejs2": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.7",
     "@sindresorhus/slugify": "^0.9.0",
     "@storybook/addon-knobs": "^5.2.5",
     "@storybook/react": "^5.2.4",
diff --git a/src/components/ArtistView/index.tsx b/src/components/ArtistView/index.tsx
index a8509c23f896935412638914b343f9a827f425ab..6d763510c3b6d51e0f69a71dab0ffa69ec41d357 100644
--- a/src/components/ArtistView/index.tsx
+++ b/src/components/ArtistView/index.tsx
@@ -1,11 +1,12 @@
-import * as React from 'react'
 import { Dispatch } from 'redux'
 import { Redirect } from 'react-router-dom'
+import * as React from 'react'
 
-import Song from '../../entities/Song'
 import Artist from '../../entities/Artist'
-import SongRow from '../MusicTable/SongRow'
+import Button from '../common/Button'
 import CoverImage from '../MusicTable/CoverImage'
+import Song from '../../entities/Song'
+import SongRow from '../MusicTable/SongRow'
 import * as types from '../../constants/ActionTypes'
 
 type Props = {
@@ -100,33 +101,42 @@ export default class ArtistView extends React.Component<Props> {
     }
 
     return (
-      <div className={`artist-view ${this.props.className}`}>
+      <div className={`artist-view ${this.props.className} z-50`}>
         <div className='main'>
-          <h2>{ artist.name }</h2>
+          <h2 className='text-center text-xl'>{ artist.name }</h2>
           <p dangerouslySetInnerHTML={{__html: extractSummary()}} />
           <ul className='unstyled-list'>
             {
-              albumsByArtist.map((albumId) => {
+              albumsByArtist.map((albumId: string) => {
                 return (
-                  <li className='card' key={albumId}>
-                    <h3 className='card-header'>
-                      <CoverImage
-                        cover={
-                          this.props.collection.rows[songsByAlbum[albumId][0]].cover
-                        }
-                        size='thumbnail'
-                        albumName={'N/A'}
-                      />
-                      <span>{ albums[albumId].name }</span>
-                      <button
+                  <li className='mx-0 z-4 flex flex-col md:flex-row items-center md:items-start mb-16' key={albumId}>
+                    <div className='flex flex-col items-center md:mr-8'>
+                      <h3 className='text-lg mb-2'>{ albums[albumId].name }</h3>
+                      <div
+                        className='h-56 w-56 mb-2 md:h-56 md:w-56 cursor-pointer'
+                        onClick={() => {
+                          this.props.dispatch({type: types.ADD_ALBUM_TO_PLAYLIST, albumId })
+                        }}
+                      >
+                        <CoverImage
+                          cover={
+                            this.props.collection.rows[songsByAlbum[albumId][0]].cover
+                          }
+                          size='thumbnail'
+                          albumName={'N/A'}
+                        />
+                      </div>
+
+                      <Button
+                        transparent
                         onClick={() => {
                           this.props.dispatch({type: types.ADD_ALBUM_TO_PLAYLIST, albumId })
                         }}
                       >
                         <i className='fa fa-play' />
-                      </button>
-                    </h3>
-                    <div className='card-body'>
+                      </Button>
+                    </div>
+                    <div className='w-100'>
                       { extractSongs(albums[albumId]) }
                     </div>
                   </li>
diff --git a/src/components/Buttons/SearchButton.tsx b/src/components/Buttons/SearchButton.tsx
index 260ae29adea70b0ee9d0cda40d9de0ab56ccf739..516defc9782b50e1cf47168943e7d2fc6e2d59f4 100644
--- a/src/components/Buttons/SearchButton.tsx
+++ b/src/components/Buttons/SearchButton.tsx
@@ -22,7 +22,6 @@ const SearchButton = ({dispatch, searchToggled}: Props) => {
   return (
     <Button
       transparent
-      className='search-button button'
       onClick={toggleSearch}
     >
       <i className='fa fa-search'></i>
diff --git a/src/components/Sidebar/SidebarContents.tsx b/src/components/Sidebar/SidebarContents.tsx
index 466d0ea4d9672b1d4c825cb9857e271642da8b2f..987f7aa14d9671dfbb15c0510e8f0167c4d348a1 100644
--- a/src/components/Sidebar/SidebarContents.tsx
+++ b/src/components/Sidebar/SidebarContents.tsx
@@ -21,7 +21,7 @@ type ContentProps = {
 const SidebarContents = (props: ContentProps) => {
   return (
     <div onClick={() => props.onSetSidebarOpen()}>
-      <h4>decentraplayer</h4>
+      <h4 className='text-xl'>decentraplayer</h4>
       <ul>
         <QueueMenuItem
           current={inSection(props.location, '(queue)?')}
diff --git a/src/components/SongView/SongView.tsx b/src/components/SongView/SongView.tsx
index d747ee0db44fe8306892f78590f35a0d7734894e..9215812e85ef91b97019fd3b24424073bf69fe2e 100644
--- a/src/components/SongView/SongView.tsx
+++ b/src/components/SongView/SongView.tsx
@@ -5,6 +5,7 @@ import * as React from 'react'
 
 import { getDurationStr } from '../../utils/timeFormatter'
 import Button from '../common/Button'
+import Icon from '../common/Icon'
 import Song from '../../entities/Song'
 import Spinner from '..//Spinner'
 import Tag from '../common/Tag'
@@ -49,62 +50,43 @@ const SongView = (props: Props) => {
         <div className="w-full lg:w1/2 p-6 content">
           <div>
             <div>
-              <div>
-                <div>
-                  <h2>{ song.title }</h2>
-                </div>
+              <h2 className='text-2xl'>{ song.title }</h2>
+              <div className='mt-2'>
+                <Link to={`/artist/${ song.artist.id }`}>
+                  <h3>
+                    <Icon
+                      icon='faMicrophoneAlt'
+                      className='mr-1 w-8'
+                    />
+                    <span>{ song.artist.name }</span>
+                  </h3>
+                </Link>
               </div>
-              <div>
-                <div>
-                  <Link to={`/artist/${ song.artist.id }`}>
-                    <h3>{ song.artist.name }</h3>
-                  </Link>
-                </div>
+              <div className='color-white text-lg mt-2'>
+                <Icon
+                  className='mr-1 w-8'
+                  icon='faCompactDisc'
+                />
+                { song.albumName || 'N/A' }
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.album' /></span>
-                </div>
-                <div>
-                  { song.albumName || 'N/A' }
-                </div>
+              <div className='mt-4'>
+                <Icon icon='faStopwatch' /> { getDurationStr(song.duration) }
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.duration' /></span>
-                </div>
-                <div>
-                  { getDurationStr(song.duration) }
-                </div>
+              <div className='mt-2'>
+                <Tag>{ song.genre }</Tag>
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.genre' /></span>
-                </div>
-                <div>
-                  { song.genre }
-                </div>
+              <div className='mt-2'>
+                <Translate value='song.label.played' /> { song.playCount || 0 } <Translate value='song.label.times' />
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.playCount' /></span>
-                </div>
-                <div>
-                  { song.playCount || 0 }
-                </div>
-              </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.providers' /></span>
-                </div>
-                  {
-                    song.stream.map((provider) => {
-                      return (<Tag type='primary' key={provider.service}>{ provider.service }</Tag>)
-                      })
-                  }
+              <div className='mt-2'>
+                {
+                  song.stream.map((provider) => {
+                    return (<Tag type='primary' key={provider.service}>{ provider.service }</Tag>)
+                  })
+                }
               </div>
 
-              <div className='btn-group'>
+              <div className='btn-group mt-10'>
                 <Button
                   onClick={() => {
                     props.dispatch({type: types.SET_CURRENT_PLAYING, songId: song.id})
diff --git a/src/components/Topbar/SearchInput/index.stories.tsx b/src/components/Topbar/SearchInput/index.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd613d4f55e5e44bbba07558f3224a23427e7485
--- /dev/null
+++ b/src/components/Topbar/SearchInput/index.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import SearchInput from './index'
+
+const stories = storiesOf('SearchInput', module);
+
+stories
+  .add(
+    'default',
+    () => (
+      <SearchInput
+        ref={React.createRef()}
+        loading={false}
+        searchToggled={true}
+        onFocus={() => console.log('on focus')}
+        onSearchChange={() => console.log('on setSearchChange')}
+        onBlur={() => console.log('on onBlur')}
+        value={'some value'}
+      />
+    )
+  )
diff --git a/src/components/Topbar/SearchInput/index.tsx b/src/components/Topbar/SearchInput/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a1ba40150e460e1e272b9a170c414c8178320bbc
--- /dev/null
+++ b/src/components/Topbar/SearchInput/index.tsx
@@ -0,0 +1,59 @@
+import { I18n } from 'react-redux-i18n'
+import * as React from 'react'
+import classNames from 'classnames'
+
+type Props = {
+  ref: any,
+  loading: boolean,
+  searchToggled: boolean,
+  onSearchChange: (event:  React.FormEvent<HTMLInputElement>) => void,
+  onFocus: () => void,
+  onBlur: () => void,
+  value: string,
+}
+
+const SearchInput = (props: Props) => {
+  if (!props.searchToggled) {
+    return null;
+  }
+
+  const classes = classNames({
+    'search-bar': true,
+    ui: true,
+    'w-full': true,
+    'p-3': true,
+    'bg-transparent': true,
+    'text-blue-100': true,
+    'font-sans': true,
+    'focus:outline-none': true,
+    huge: true,
+    icon: true,
+    input: true,
+    inverted: true,
+    loading: props.loading,
+    action: true
+  })
+
+  return (
+    <div
+      className={'w-full flex bg-transparent border-b-4 border-blue-400 items-center'}
+    >
+      <input
+        className={classes}
+        autoFocus
+        ref={props.ref}
+        onChange={props.onSearchChange}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
+        value={props.value}
+        placeholder={ I18n.t('placeholder.search') }
+        type='text'
+      />
+      <div className='p-3'>
+        { props.loading ? <i className='icon fa fa-spinner fa-pulse'></i> : <i className='icon search'></i> }
+      </div>
+    </div>
+  )
+}
+
+export default SearchInput
diff --git a/src/components/Topbar/Title/index.tsx b/src/components/Topbar/Title/index.tsx
index 5d4ceb9fc851d2c5585ddf5b57ccb8c4358d2413..7eb38cdf2a3826c0d7886b48581b88d03be18cdd 100644
--- a/src/components/Topbar/Title/index.tsx
+++ b/src/components/Topbar/Title/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 const Title = (props: { onClick: () => void, title?: string }) => {
   return (
-    <div>
+    <div className='text-2xl'>
       <h2 onClick={props.onClick}>
         { props.title }
       </h2>
diff --git a/src/components/Topbar/Topbar.spec.tsx b/src/components/Topbar/Topbar.spec.tsx
deleted file mode 100644
index 5d90936ffbcc50fa82351be28bb412f6114e44cb..0000000000000000000000000000000000000000
--- a/src/components/Topbar/Topbar.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { shallow } from 'enzyme'
-import configureEnzyme from '../../tests/configureEnzyme'
-import Topbar from './Topbar'
-
-configureEnzyme()
-
-const setup = (customProps: any) => {
-  const defaultProps = {
-    dispatch: () => {},
-    loading: false,
-    searchToggled: true,
-    playlist: {}
-  }
-
-  const props = {...defaultProps, ...customProps}
-
-  const enzymeWrapper = shallow(<Topbar {...props}/>)
-
-  return {
-    props,
-    enzymeWrapper,
-  }
-}
-
-describe('Topbar', () => {
-  it('renders without crashing', () => {
-    const { enzymeWrapper } = setup({})
-    expect(enzymeWrapper.find('.search-bar').exists()).toBe(true)
-    expect(enzymeWrapper.find('.search-bar > input').exists()).toBe(true)
-    enzymeWrapper.find('input').simulate('change', {currentTarget: {value: 'Pink Floyd'}});
-    expect(enzymeWrapper.find('i.search.icon').exists()).toBe(true)
-  })
-
-  it('should render loading spinner icon while loading', () => {
-    const { enzymeWrapper } = setup({loading: true})
-    expect(enzymeWrapper.find('.search-bar.loading').exists()).toBe(true)
-  })
-})
diff --git a/src/components/Topbar/Topbar.styles.ts b/src/components/Topbar/Topbar.styles.ts
deleted file mode 100644
index 84d8ecf5f5eb09f38fc25602a118ec21d6e61e39..0000000000000000000000000000000000000000
--- a/src/components/Topbar/Topbar.styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from '@emotion/styled'
-
-const TopbarContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  overflow: hidden;
-  z-index: 1;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  grid-area: topbar;
-  align-items: center;
-`
-
-const TopbarContents = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`
-
-export {
-  TopbarContainer,
-  TopbarContents
-}
diff --git a/src/components/Topbar/Topbar.tsx b/src/components/Topbar/Topbar.tsx
index 83066eeff887c86523619f1e1b6481773a2f8576..9fbb2c1ff1f80ca396bbb5b0e1dc1a34db7f725f 100644
--- a/src/components/Topbar/Topbar.tsx
+++ b/src/components/Topbar/Topbar.tsx
@@ -1,13 +1,10 @@
-import * as React from 'react'
-import KeyHandler, { KEYPRESS } from 'react-key-handler'
 import { I18n } from 'react-redux-i18n'
+import KeyHandler, { KEYPRESS } from 'react-key-handler'
+import * as React from 'react'
+
+import SearchInput from './SearchInput'
 import SidebarButton from '../Buttons/SidebarButton'
 import Title from './Title'
-import {
-  TopbarContainer,
-  TopbarContents
-} from './Topbar.styles'
-
 import * as types from '../../constants/ActionTypes'
 
 type State = {
@@ -40,6 +37,7 @@ class Topbar extends React.Component<Props, State> {
     super(props);
 
     this.props = props
+    this.searchInput = React.createRef()
     this.timer = null
   }
 
@@ -87,51 +85,41 @@ class Topbar extends React.Component<Props, State> {
     this.setState({focus: true})
   }
 
-  renderSearch = (props: Props) => {
-    if (!props.searchToggled) {
-      return null;
-    }
-
-    return (
-      <div
-        className={`search-bar ui huge action icon input inverted ${this.props.loading ? 'loading': ''}`}
-      >
-        <input
-          autoFocus
-          ref={(input) => { this.searchInput = input }}
-          onChange={this.onSearchChange}
-          onFocus={this.onFocus}
-          onBlur={this.onFocusOut}
-          value={this.props.searchTerm}
-          placeholder={ I18n.t('placeholder.search') }
-          type='text'
-        />
-        { this.props.loading ? <i className='icon fa fa-spinner fa-pulse'></i> : <i className='icon search'></i> }
-      </div>
-    )
-  }
-
   render() {
-    const { children, title } = this.props
+    const {
+      children,
+      title,
+      searchTerm,
+      searchToggled,
+      loading
+    } = this.props
 
     const childrenWithProps = React.Children.map(children, child =>
       React.cloneElement(child, { dispatch: this.props.dispatch })
     )
 
     return (
-      <TopbarContainer>
+      <div className='flex justify-between overflow-hidden z-10 items-center' style={{gridArea: 'topbar'}}>
         <SidebarButton />
         <KeyHandler
           keyEventName={KEYPRESS}
           keyValue='/'
           onKeyHandle={this.setFocus}
         />
-        { this.renderSearch(this.props) }
+          <SearchInput
+            searchToggled={searchToggled}
+            loading={loading}
+            ref={this.searchInput}
+            onSearchChange={this.onSearchChange}
+            onFocus={this.onFocus}
+            onBlur={this.onFocusOut}
+            value={searchTerm}
+          />
         {  !this.state.focus && !this.props.searchToggled  ? <Title title={title} onClick={this.setSearchOn} /> : null }
-        <TopbarContents>
+        <div className='flex justify-end'>
           {  !this.state.focus ? childrenWithProps : null }
-        </TopbarContents>
-      </TopbarContainer>
+        </div>
+      </div>
     )
   }
 }
diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f59818b2fd587ef0168a3efa58ffd329e78d606
--- /dev/null
+++ b/src/components/common/Icon/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import {
+  faCompactDisc,
+  faStopwatch,
+  faMicrophoneAlt
+} from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+const icons = {
+  faCompactDisc: faCompactDisc,
+  faStopwatch: faStopwatch,
+  faMicrophoneAlt: faMicrophoneAlt
+}
+
+type Props = {
+  icon: keyof typeof icons,
+  className?: string
+}
+
+const Icon = (props: Props) => {
+  return (
+    <FontAwesomeIcon className={props.className} icon={icons[props.icon]} />
+  )
+}
+
+export default Icon
diff --git a/src/components/common/Tag/index.tsx b/src/components/common/Tag/index.tsx
index 8b3d6b826eb2481bcf7ca9edb533fee929e07e83..e22a8fc86c5a6e5a6d40b1a08ad6e1fa66c90554 100644
--- a/src/components/common/Tag/index.tsx
+++ b/src/components/common/Tag/index.tsx
@@ -14,7 +14,7 @@ const Tag = (props: Props) => {
   })
 
   return (
-    <div className={classes}>
+    <div className='px-2 text-blue-300 border border-blue-800 text-sm w-auto inline-block'>
       { props.children }
     </div>
   )
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 2349cdc7a0013a2fec2f29658465f01122fe154c..13c524fde664791dffa1a0b8e31b2c6ea0ce0aa4 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -9,9 +9,7 @@ $fa-font-path: "./fonts" !default;
 @import './layout.scss';
 @import './alerts.scss';
 @import './links.scss';
-@import './searchBar.scss';
 @import './icons.scss';
-@import './form.scss';
 @import './player.scss';
 @import './spinner.scss';
 @import './song-view.scss';
@@ -25,7 +23,6 @@ $fa-font-path: "./fonts" !default;
 @import './audio-canvas.scss';
 @import './lazy-image.scss';
 @import './toggle.scss';
-@import './cards.scss';
 @import './playlists.scss';
 
 html, body {
diff --git a/src/styles/cards.scss b/src/styles/cards.scss
deleted file mode 100644
index f7c84d36400d00cc417bbc0bb59528e7dee3208e..0000000000000000000000000000000000000000
--- a/src/styles/cards.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.card {
-  background: $greyscale-darker1;
-}
-
-.card-header {
-  padding: 10px;
-}
diff --git a/src/styles/form.scss b/src/styles/form.scss
deleted file mode 100644
index f02bb53d2956e1e77369c09efb002baef1c0db54..0000000000000000000000000000000000000000
--- a/src/styles/form.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-input[type=text] {
-  @extend .form-control;
-}
diff --git a/src/styles/playlists.scss b/src/styles/playlists.scss
index 3f66e21ab5793e9e6eb8217f548fdcd307329c46..439ba571122ba0a48bee4131d195d531c326261d 100644
--- a/src/styles/playlists.scss
+++ b/src/styles/playlists.scss
@@ -2,8 +2,6 @@
   @extend .main;
 
   .card {
-    margin-bottom: 20px;
-
     .badge {
       float: right;
     }
diff --git a/src/styles/searchBar.scss b/src/styles/searchBar.scss
deleted file mode 100644
index 7cba87a3c98cfc4456b5dfe9a3dda309948df53e..0000000000000000000000000000000000000000
--- a/src/styles/searchBar.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.search-bar {
-
-  &.ui.input {
-    display: block;
-    position: relative;
-  }
-
-  width: 100%;
-  justify-content: center;
-
-  input {
-    width: 100%;
-    border: none;
-    box-shadow: none;
-    grid-area: sidebar;
-    font-size: 2rem;
-    background: transparent;
-
-    &:focus {
-      background: transparent;
-      border: none;
-      box-shadow: none;
-    }
-  }
-
-  .icon {
-    font-size: 2rem;
-    position: absolute;
-    display: inline;
-    right: 10px;
-    top: 13px;
-    line-height: 38px;
-  }
-  border-bottom: solid 4px $greyscale-lighter2;
-}
-
diff --git a/yarn.lock b/yarn.lock
index fed180aa84eb57c121555ad7ee360d85d82b87aa..9e39e39f53c1cafd8de9783f08d0560d9398b25a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1031,6 +1031,32 @@
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
 
+"@fortawesome/fontawesome-common-types@^0.2.25":
+  version "0.2.25"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz#6df015905081f2762e5cfddeb7a20d2e9b16c786"
+  integrity sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==
+
+"@fortawesome/fontawesome-svg-core@^1.2.25":
+  version "1.2.25"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz#24b03391d14f0c6171e8cad7057c687b74049790"
+  integrity sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
+"@fortawesome/free-solid-svg-icons@^5.11.2":
+  version "5.11.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz#2f2f1459743a27902b76655a0d0bc5ec4d945631"
+  integrity sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
+"@fortawesome/react-fontawesome@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.7.tgz#c004ca75c15c5a1218101e8f042b8da8dec0c4b5"
+  integrity sha512-AHWSzOsHBe5vqOkrvs+CKw+8eLl+0XZsVixOWhTPpGpOA8WQUbVU6J9cmtAvTaxUU5OIf+rgxxF8ZKc3BVldxg==
+  dependencies:
+    prop-types "^15.5.10"
+
 "@hapi/address@2.x.x":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
@@ -6484,6 +6510,7 @@ follow-redirects@^1.0.0:
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
 
 for-in@^0.1.3:
   version "0.1.8"