diff --git a/.babelrc b/.babelrc
index 238ad86869..e9c56edca1 100644
--- a/.babelrc
+++ b/.babelrc
@@ -4,7 +4,8 @@
     "react"
   ],
   "plugins": [
-    'transform-class-properties',
-    'transform-object-rest-spread'
+    "transform-class-properties",
+    "transform-object-rest-spread",
+    "transform-decorators-legacy"
     ]
 }
diff --git a/.eslintrc.js b/.eslintrc.js
index 58abd8a2e6..622f7cefee 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,6 +4,10 @@ module.exports = {
     "commonjs": true,
     "es6": true
   },
+  "globals": {
+    "process": true,
+    "Raven": true
+  },
   "extends": "eslint:recommended",
   "parser": "babel-eslint",
   "parserOptions": {
diff --git a/.gitignore b/.gitignore
index 6b02cb7fd2..a292b8890b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -65,4 +65,9 @@ bundle.electron.js
 # Prettier configuration file
 .prettierrc
 
-package-lock.json
\ No newline at end of file
+# npm
+package-lock.json
+
+# vscode
+.vscode/
+tsconfig.json
\ No newline at end of file
diff --git a/app/App.js b/app/App.js
index b7c1142e89..11fd16a4df 100644
--- a/app/App.js
+++ b/app/App.js
@@ -6,6 +6,7 @@ import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
 import _ from 'lodash';
 import Sound from 'react-hifi';
+import { withTranslation } from 'react-i18next';
 
 import * as Actions from './actions';
 import * as PlayerActions from './actions/player';
@@ -54,6 +55,7 @@ import TrackInfo from './components/TrackInfo';
 import WindowControls from './components/WindowControls';
 import VolumeControls from './components/VolumeControls';
 
+@withTranslation('app')
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -132,6 +134,8 @@ class App extends React.Component {
   }
   
   renderSidebarMenu (settings, toggleOption) {
+    const { t } = this.props;
+
     return (
       <VerticalPanel
         className={classnames(styles.left_panel, {
@@ -151,24 +155,24 @@ class App extends React.Component {
           <SidebarMenuCategoryHeader compact={ settings.compactMenuBar }>
             Main
           </SidebarMenuCategoryHeader>
-          {this.renderNavLink('dashboard', 'dashboard', 'Dashboard', settings)}
-          {this.renderNavLink('downloads', 'download', 'Downloads', settings)}
-          {this.renderNavLink('lyrics', 'microphone', 'Lyrics', settings)}
-          {this.renderNavLink('plugins', 'flask', 'Plugins', settings)}
-          {this.renderNavLink('search', 'search', 'Search Results', settings)}
-          {this.renderNavLink('settings', 'cogs', 'Settings', settings)}
-          {this.renderNavLink('equalizer', 'sliders', 'Equalizer', settings)}
+          {this.renderNavLink('dashboard', 'dashboard', t('dashboard'), settings)}
+          {this.renderNavLink('downloads', 'download', t('downloads'), settings)}
+          {this.renderNavLink('lyrics', 'microphone', t('lyrics'), settings)}
+          {this.renderNavLink('plugins', 'flask', t('plugins'), settings)}
+          {this.renderNavLink('search', 'search', t('search'), settings)}
+          {this.renderNavLink('settings', 'cogs', t('settings'), settings)}
+          {this.renderNavLink('equalizer', 'sliders', t('equalizer'), settings)}
 
           <SidebarMenuCategoryHeader compact={ settings.compactMenuBar }>
-            Collection
+            {t('collection')}
           </SidebarMenuCategoryHeader>
-          {this.renderNavLink('favorites/tracks', 'star', 'Favorite tracks', settings)}
-          {this.renderNavLink('library', 'file-sound-o', 'Local library', settings)}
+          {this.renderNavLink('favorites/tracks', 'star', t('favorite'), settings)}
+          {this.renderNavLink('library', 'file-sound-o', t('library'), settings)}
 
           {
             !_.isEmpty(this.props.playlists) &&
             <SidebarMenuCategoryHeader compact={ settings.compactMenuBar }>
-            Playlists
+              {t('playlists')}
             </SidebarMenuCategoryHeader>
           }
           <PlaylistsSubMenu
diff --git a/app/components/AlbumCover/AlbumInfo/index.js b/app/components/AlbumCover/AlbumInfo/index.js
index 9e48cfad62..e6e1f2876e 100644
--- a/app/components/AlbumCover/AlbumInfo/index.js
+++ b/app/components/AlbumCover/AlbumInfo/index.js
@@ -2,27 +2,18 @@ import React from 'react';
 
 import styles from './styles.css';
 
-class AlbumInfo extends React.Component {
+const AlbumInfo = () => (
+  <div className={styles.album_info_container}>
+    {this.props.nameOnly ? (
+      <div className={styles.title_container}>{this.props.artist}</div>
+    ) : (
+      <div className={styles.title_container}>{this.props.title}</div>
+    )}
 
-  render() {
-    return (
-      <div className={styles.album_info_container}>
-        {
-          this.props.nameOnly
-            ?(
-              <div className={styles.title_container}>{this.props.artist}</div>
-            )
-            : <div className={styles.title_container}>{this.props.title}</div>
-        }
-
-        {
-          !this.props.nameOnly
-            ? <div className={styles.artist_container}>{this.props.artist}</div>
-            : null
-        }
-      </div>
-    );
-  }
-}
+    {!this.props.nameOnly ? (
+      <div className={styles.artist_container}>{this.props.artist}</div>
+    ) : null}
+  </div>
+);
 
 export default AlbumInfo;
diff --git a/app/components/AlbumCover/AlbumOverlay/index.js b/app/components/AlbumCover/AlbumOverlay/index.js
index 692f12b909..a834892c9e 100644
--- a/app/components/AlbumCover/AlbumOverlay/index.js
+++ b/app/components/AlbumCover/AlbumOverlay/index.js
@@ -5,23 +5,18 @@ import Spacer from '../../Spacer';
 
 import styles from './styles.css';
 
-class AlbumOverlay extends React.Component {
-
-  render() {
-    return (
-      <div className={styles.overlay_container}>
-        <Spacer />
-        <a
-          onClick={this.props.handlePlay}
-          href='#'
-          className={styles.overlay_play_button}
-        >
-          <FontAwesome name='play' />
-        </a>
-        <Spacer />
-      </div>
-    );
-  }
-}
+const AlbumOverlay = () => (
+  <div className={styles.overlay_container}>
+    <Spacer />
+    <a
+      onClick={this.props.handlePlay}
+      href='#'
+      className={styles.overlay_play_button}
+    >
+      <FontAwesome name='play' />
+    </a>
+    <Spacer />
+  </div>
+);
 
 export default AlbumOverlay;
diff --git a/app/components/AlbumCover/index.js b/app/components/AlbumCover/index.js
index d74b578d26..e74f292e4c 100644
--- a/app/components/AlbumCover/index.js
+++ b/app/components/AlbumCover/index.js
@@ -6,39 +6,30 @@ import styles from './styles.css';
 import AlbumInfo from './AlbumInfo';
 import AlbumOverlay from './AlbumOverlay';
 
-class AlbumCover extends React.Component {
-
-  render() {
-    let style = {};
-
-    if (this.props.nameOnly) {
-      style = {
-        backgroundImage: `url(${this.props.cover})`,
-        height: '250px'
-      };
-    }
-
-    return (
-      <div style={style} className={styles.album_cover_container}>
-        <AlbumOverlay
-          handlePlay={this.props.handlePlay}
-        />
-
-        {
-          this.props.nameOnly
-            ? null
-            : <img src={this.props.cover}/>
-        }
-
-        <AlbumInfo
-          artist={this.props.artist}
-          title={this.props.title}
-          nameOnly={this.props.nameOnly}
-        />
-      </div>
-    );
+const AlbumCover = ({ artist, cover, nameOnly, handlePlay, title }) => {
+  let style = {};
+
+  if (nameOnly) {
+    style = {
+      backgroundImage: `url(${cover})`,
+      height: '250px'
+    };
   }
-}
+
+  return (
+    <div style={style} className={styles.album_cover_container}>
+      <AlbumOverlay handlePlay={handlePlay} />
+
+      {nameOnly ? null : <img src={cover} />}
+
+      <AlbumInfo
+        artist={artist}
+        title={title}
+        nameOnly={nameOnly}
+      />
+    </div>
+  );
+};
 
 AlbumCover.propTypes = {
   nameOnly: PropTypes.bool,
diff --git a/app/components/AlbumList/index.js b/app/components/AlbumList/index.js
index 162ffbc3ed..79d5f3ddfd 100644
--- a/app/components/AlbumList/index.js
+++ b/app/components/AlbumList/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Dimmer, Image, Loader} from 'semantic-ui-react';
+import {Dimmer, Loader} from 'semantic-ui-react';
 import Card from '../Card';
 
 import styles from './styles.scss';
diff --git a/app/components/AlbumView/index.js b/app/components/AlbumView/index.js
index 80e2fda466..1252f0e8fd 100644
--- a/app/components/AlbumView/index.js
+++ b/app/components/AlbumView/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import FontAwesome from 'react-fontawesome';
 import { Dimmer, Loader } from 'semantic-ui-react';
 import _ from 'lodash';
+import { withTranslation } from 'react-i18next';
 
 import ContextPopup from '../ContextPopup';
 import TrackRow from '../TrackRow';
@@ -10,6 +11,7 @@ import * as Utils from '../../utils';
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
+@withTranslation('album')
 class AlbumView extends React.Component {
   constructor(props) {
     super(props);
@@ -225,7 +227,7 @@ class AlbumView extends React.Component {
           href='#'
           onClick={() => this.addAlbumToQueue(album)}
           className={styles.add_button}
-          aria-label='Add album to queue'
+          aria-label={this.props.t('queue')}
         >
           <FontAwesome name='plus' /> Add to queue
         </a>
diff --git a/app/components/ArtistView/PopularTracks/index.js b/app/components/ArtistView/PopularTracks/index.js
index 0289aa8db2..73831aeefd 100644
--- a/app/components/ArtistView/PopularTracks/index.js
+++ b/app/components/ArtistView/PopularTracks/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
 import cx from 'classnames';
+import { withTranslation } from 'react-i18next';
 
 import TrackRow from '../../TrackRow';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
@@ -8,6 +9,7 @@ import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import trackRowStyles from '../../TrackRow/styles.scss';
 import styles from './styles.scss';
 
+@withTranslation('artist')
 class PopularTracks extends React.Component {
   constructor(props) {
     super(props);
@@ -40,7 +42,7 @@ class PopularTracks extends React.Component {
             });
         }}
         className={styles.add_button}
-        aria-label='Add all tracks to queue'
+        aria-label={this.props.t('queue')}
       >
         <FontAwesome name='plus' /> Add all
       </a>
@@ -48,7 +50,7 @@ class PopularTracks extends React.Component {
   }
 
   render () {
-    let { artist, tracks } = this.props;
+    let { artist, tracks, t } = this.props;
 
     return (
       <div className={cx(
@@ -63,8 +65,8 @@ class PopularTracks extends React.Component {
               <th>
                 <FontAwesome name='photo' />
               </th>
-              <th>Title</th>
-              <th>Play Counts</th>
+              <th>{t('title')}</th>
+              <th>{t('count')}</th>
             </tr>
           </thead>
           <tbody>
diff --git a/app/components/ArtistView/SimilarArtists/index.js b/app/components/ArtistView/SimilarArtists/index.js
index 4ce984f4dc..676ed6c5d1 100644
--- a/app/components/ArtistView/SimilarArtists/index.js
+++ b/app/components/ArtistView/SimilarArtists/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
-const _ = require('lodash');
-
+@withTranslation('artist')
 class SimilarArtists extends React.Component {
   constructor(props) {
     super(props);
@@ -17,7 +17,7 @@ class SimilarArtists extends React.Component {
     return (
       <div className={styles.similar_artists_container}>
         <div className={styles.header}>
-          Similar artists
+          {this.props.t('similar')}
         </div>
         {
           this.props.artists.map((artist, index) => {
diff --git a/app/components/ArtistView/index.js b/app/components/ArtistView/index.js
index 32ad74d5f4..ab06cf4cb3 100644
--- a/app/components/ArtistView/index.js
+++ b/app/components/ArtistView/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { Dimmer, Loader } from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
 import AlbumList from '../AlbumList';
 import ArtistTags from './ArtistTags';
 import SimilarArtists from './SimilarArtists';
@@ -9,6 +10,7 @@ import PopularTracks from './PopularTracks';
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
+@withTranslation('artist')
 class ArtistView extends React.Component {
   constructor(props) {
     super(props);
@@ -51,7 +53,7 @@ class ArtistView extends React.Component {
                   <span
                     className={styles.on_tour}
                   >
-                      On tour
+                    {this.props.t('tour')}
                   </span>
               }
             </div>
diff --git a/app/components/Card/index.js b/app/components/Card/index.js
index 0977bd2bc3..807315c027 100644
--- a/app/components/Card/index.js
+++ b/app/components/Card/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import classnames from 'classnames';
-import { Image } from 'semantic-ui-react';
 import Img from 'react-image-smooth-loading';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
@@ -8,38 +7,24 @@ import styles from './styles.scss';
 
 Img.globalPlaceholder = artPlaceholder;
 
-class Card extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className={styles.card_container}>
-        <div
-          className={
-            classnames({
-              [`${styles.card}`]: true,
-              [`${styles.small}`]: this.props.small
-            })
-          }
-          onClick={this.props.onClick}
-        >
-          <div className={styles.thumbnail}>
-            <Img src={this.props.image ? this.props.image : artPlaceholder} />
-          </div>
-          <div className={styles.container}>
-            <h4>{this.props.header}</h4>
-            {
-              this.props.content
-                ? <p>{this.props.content}</p>
-                : null
-            }
-          </div>
-        </div>
+const Card = () => (
+  <div className={styles.card_container}>
+    <div
+      className={classnames({
+        [`${styles.card}`]: true,
+        [`${styles.small}`]: this.props.small
+      })}
+      onClick={this.props.onClick}
+    >
+      <div className={styles.thumbnail}>
+        <Img src={this.props.image ? this.props.image : artPlaceholder} />
+      </div>
+      <div className={styles.container}>
+        <h4>{this.props.header}</h4>
+        {this.props.content ? <p>{this.props.content}</p> : null}
       </div>
-    );
-  }
-}
+    </div>
+  </div>
+);
 
 export default Card;
diff --git a/app/components/Cover/index.js b/app/components/Cover/index.js
index 20804a65dd..ab6448c9a1 100644
--- a/app/components/Cover/index.js
+++ b/app/components/Cover/index.js
@@ -2,15 +2,10 @@ import React from 'react';
 
 import styles from './styles.scss';
 
-class Cover extends React.Component {
-
-  render() {
-    return (
-      <div className={styles.cover_container}>
-        <img src={this.props.cover} />
-      </div>
-    );
-  }
-}
+const Cover = () => (
+  <div className={styles.cover_container}>
+    <img src={this.props.cover} />
+  </div>
+);
 
 export default Cover;
diff --git a/app/components/Dashboard/NewsTab/NewsItem/index.js b/app/components/Dashboard/NewsTab/NewsItem/index.js
index f3351da810..1e0f45f5ba 100644
--- a/app/components/Dashboard/NewsTab/NewsItem/index.js
+++ b/app/components/Dashboard/NewsTab/NewsItem/index.js
@@ -3,34 +3,25 @@ import moment from 'moment';
 
 import styles from './styles.scss';
 
-class NewsItem extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const NewsItem = ({ item }) => (
+  <div className={styles.news_item}>
+    <h1>{item.title}</h1>
+    <h4>
+      {moment.unix(item.timestamp).format('dddd, MMMM, Do YYYY, h:mm:ss A')}
+    </h4>
 
-  render() {
-    let { item } = this.props;
-    return (
-      <div className={styles.news_item}>
-        <h1>{item.title}</h1>
-        <h4>
-          {moment.unix(item.timestamp).format('dddd, MMMM, Do YYYY, h:mm:ss A')}
-        </h4>
+    <p dangerouslySetInnerHTML={{ __html: item.body }} />
 
-        <p dangerouslySetInnerHTML={{ __html: item.body }} />
-
-        <div className={styles.tags}>
-          {item.tags.map((tag, i) => {
-            return (
-              <span key={'news-item-tag-' + i} className={styles.tag}>
-                {tag}
-              </span>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-}
+    <div className={styles.tags}>
+      {item.tags.map((tag, i) => {
+        return (
+          <span key={'news-item-tag-' + i} className={styles.tag}>
+            {tag}
+          </span>
+        );
+      })}
+    </div>
+  </div>
+);
 
 export default NewsItem;
diff --git a/app/components/Dashboard/NewsTab/index.js b/app/components/Dashboard/NewsTab/index.js
index dbed6608e1..be2e654a86 100644
--- a/app/components/Dashboard/NewsTab/index.js
+++ b/app/components/Dashboard/NewsTab/index.js
@@ -1,34 +1,22 @@
 import React from 'react';
-import { Dimmer, Loader, Tab } from 'semantic-ui-react';
-import moment from 'moment';
+import { Tab } from 'semantic-ui-react';
 import _ from 'lodash';
 
 import NewsItem from './NewsItem';
 import styles from './styles.scss';
 
-class NewsTab extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { news } = this.props;
-
-    return (
-      <Tab.Pane attached={false}>
-        <div className={styles.news_container}>
-          {_(news)
-            .sortBy('timestamp')
-            .reverse()
-            .value()
-            .map((item, i) => {
-
-              return <NewsItem key={'newsitem-' + i} item={item} />;
-            })}
-        </div>
-      </Tab.Pane>
-    );
-  }
-}
+const NewsTab = ({ news }) => (
+  <Tab.Pane attached={false}>
+    <div className={styles.news_container}>
+      {_(news)
+        .sortBy('timestamp')
+        .reverse()
+        .value()
+        .map((item, i) => {
+          return <NewsItem key={'newsitem-' + i} item={item} />;
+        })}
+    </div>
+  </Tab.Pane>
+);
 
 export default NewsTab;
diff --git a/app/components/Dashboard/index.js b/app/components/Dashboard/index.js
index f9040426b0..d0a16edfaf 100644
--- a/app/components/Dashboard/index.js
+++ b/app/components/Dashboard/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tab } from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
 
 import BestNewMusicTab from './BestNewMusicTab';
 import ChartsTab from './ChartsTab';
@@ -8,6 +9,7 @@ import NewsTab from './NewsTab';
 
 import styles from './styles.scss';
 
+@withTranslation('dashboard')
 class Dashboard extends React.Component {
   
   
@@ -17,7 +19,7 @@ class Dashboard extends React.Component {
       dashboardData,
       history,
       musicSources,
-      settings
+      t
     } = this.props;
 
     const {
@@ -26,14 +28,12 @@ class Dashboard extends React.Component {
       addToQueue,
       selectSong,
       clearQueue,
-      startPlayback,
-      addFavoriteTrack,
-      info
+      startPlayback
     } = actions;
     
     return [
       {
-        menuItem: 'Best new music',
+        menuItem: t('best'),
         render: () => (
           <BestNewMusicTab
             dashboardData={dashboardData}
@@ -49,7 +49,7 @@ class Dashboard extends React.Component {
         )
       },
       {
-        menuItem: 'Top Tracks',
+        menuItem: t('top'),
         render: () => (
           <ChartsTab
             topTracks={dashboardData.topTracks}
@@ -57,7 +57,7 @@ class Dashboard extends React.Component {
         )
       },
       {
-        menuItem: 'Genres',
+        menuItem: t('genres'),
         render: () => (
           <GenresTab
             genres={dashboardData.topTags}
@@ -72,7 +72,7 @@ class Dashboard extends React.Component {
         },
       },*/
       {
-        menuItem: 'News',
+        menuItem: t('news'),
         render: () => <NewsTab news={dashboardData.news} />
       }
     ];
diff --git a/app/components/Downloads/DownloadsItem/index.js b/app/components/Downloads/DownloadsItem/index.js
index ae81a379c7..0f7fc9a5c0 100644
--- a/app/components/Downloads/DownloadsItem/index.js
+++ b/app/components/Downloads/DownloadsItem/index.js
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { Icon, Table } from 'semantic-ui-react';
 import _ from 'lodash';
 
-import styles from './styles.scss';
-
 const StatusIcon = props => {
   switch (props.status) {
   case 'Waiting':
diff --git a/app/components/Downloads/DownloadsList/index.js b/app/components/Downloads/DownloadsList/index.js
index 8868450b7f..01dcb6ca84 100644
--- a/app/components/Downloads/DownloadsList/index.js
+++ b/app/components/Downloads/DownloadsList/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Icon, Segment, Table } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 import DownloadsItem from '../DownloadsItem';
 
@@ -11,19 +12,21 @@ const DownloadsList = props => {
     items,
     clearFinishedTracks
   } = props;
+
+  const { t } = useTranslation('downloads');
   
   return (
     <Segment inverted>
       <Button primary onClick={ clearFinishedTracks }>
         <Icon name='trash'/>
-        Clear finished tracks
+        {t('clear')}
       </Button>
       <Table inverted className={styles.downloads_list}>
         <Table.Header>
           <Table.Row>
-            <Table.HeaderCell>Status</Table.HeaderCell>
-            <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell>Completion</Table.HeaderCell>
+            <Table.HeaderCell>{t('status')}</Table.HeaderCell>
+            <Table.HeaderCell>{t('name')}</Table.HeaderCell>
+            <Table.HeaderCell>{t('completion')}</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
         <Table.Body>
diff --git a/app/components/Downloads/index.js b/app/components/Downloads/index.js
index de895c0bad..6ac37043e2 100644
--- a/app/components/Downloads/index.js
+++ b/app/components/Downloads/index.js
@@ -6,46 +6,36 @@ import Header from '../Header';
 import DownloadsList from './DownloadsList';
 
 import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
 
 const EmptyState = () => {
+  const { t } = useTranslation('downloads');
+
   return (
     <div className={styles.empty_state}>
-      <FontAwesome name='download'/>
-      <h2>
-          Downloads are empty.
-      </h2>
-      <div>
-        Add something to your download queue and you'll see it here!
-      </div>
+      <FontAwesome name='download' />
+      <h2>{t('empty')}</h2>
+      <div>{t('empty-help')}</div>
     </div>
   );
 };
 
 const Downloads = props => {
-  const {
-    downloads,
-    clearFinishedTracks
-  } = props;
-  
+  const { downloads, clearFinishedTracks } = props;
+  const { t } = useTranslation('downloads');
+
   return (
     <div className={styles.downloads_container}>
-      
-      {
-        downloads.length === 0 &&
-          <EmptyState />
-      }
-      {
-        downloads.length > 0 &&
+      {downloads.length === 0 && <EmptyState />}
+      {downloads.length > 0 && (
         <React.Fragment>
-          <Header>
-            Downloads
-          </Header>
+          <Header>{t('downloads')}</Header>
           <DownloadsList
-            items={ downloads }
-            clearFinishedTracks={ clearFinishedTracks }
+            items={downloads}
+            clearFinishedTracks={clearFinishedTracks}
           />
         </React.Fragment>
-      }
+      )}
     </div>
   );
 };
diff --git a/app/components/FavoriteTracksView/index.js b/app/components/FavoriteTracksView/index.js
index cb3637ebd8..93a4d5f707 100644
--- a/app/components/FavoriteTracksView/index.js
+++ b/app/components/FavoriteTracksView/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon, Segment } from 'semantic-ui-react';
 import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 
 import Header from '../Header';
 import TrackRow from '../TrackRow';
@@ -10,11 +11,13 @@ import trackRowStyles from '../TrackRow/styles.scss';
 import styles from './styles.scss';
 
 const EmptyState = () => {
+  const { t } = useTranslation('favorites');
+
   return (
     <div className={styles.empty_state} >
       <Icon name='star'/>
-      <h2>No favorites added.</h2>
-      <div>Try favoriting some tracks and they will appear here!</div>
+      <h2>{t('empty')}</h2>
+      <div>{t('empty-extra')}</div>
     </div>
   );
 };
@@ -24,6 +27,7 @@ const FavoriteTracksView = props => {
     tracks,
     removeFavoriteTrack
   } = props;
+  const { t } = useTranslation('favorites');
   
   return (
     <div className={styles.favorite_tracks_view}>
@@ -35,7 +39,7 @@ const FavoriteTracksView = props => {
         !_.isEmpty(tracks) &&
         <React.Fragment>
           <Header>
-        Your favorite tracks
+            {t('header')}
           </Header>
           <Segment className={trackRowStyles.tracks_container}>
             <table>
@@ -43,8 +47,8 @@ const FavoriteTracksView = props => {
                 <tr>
                   <th />
                   <th><Icon name='image' /></th>
-                  <th>Artist</th>
-                  <th>Title</th>
+                  <th>{t('artist')}</th>
+                  <th>{t('title')}</th>
                 </tr>
               </thead>
               <tbody>
diff --git a/app/components/Footer/index.js b/app/components/Footer/index.js
index 95b20cd718..ec845325ec 100644
--- a/app/components/Footer/index.js
+++ b/app/components/Footer/index.js
@@ -1,15 +1,7 @@
 import React from 'react';
 
-import styles from './styles.css';
-
-class Footer extends React.Component {
-  render() {
-    return (
-      <div className={this.props.className}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
+const Footer = ({ className, children }) => (
+  <div className={className}>{children}</div>
+);
 
 export default Footer;
diff --git a/app/components/Header/index.js b/app/components/Header/index.js
index 97487fe4ec..d6d1d39da3 100644
--- a/app/components/Header/index.js
+++ b/app/components/Header/index.js
@@ -2,15 +2,8 @@ import React from 'react';
 
 import styles from './styles.scss';
 
-class Header extends React.Component {
-
-  render() {
-    return (
-      <div className={styles.header_container}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
+const Header = ({ children }) => (
+  <div className={styles.header_container}>{children}</div>
+);
 
 export default Header;
diff --git a/app/components/HelpButton/index.js b/app/components/HelpButton/index.js
index fc3cb7c73d..0c95baf72d 100644
--- a/app/components/HelpButton/index.js
+++ b/app/components/HelpButton/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, Icon } from 'semantic-ui-react';
 
 import styles from './styles.scss';
@@ -15,12 +14,4 @@ const HelpButton = props => {
   );
 };
 
-HelpButton.propTypes = {
-
-};
-
-HelpButton.defaultProps = {
-
-};
-
 export default HelpButton;
diff --git a/app/components/HelpModal/index.js b/app/components/HelpModal/index.js
index 5385e7da10..e11b31739b 100644
--- a/app/components/HelpModal/index.js
+++ b/app/components/HelpModal/index.js
@@ -1,10 +1,6 @@
-import React from 'react';
-import {
-  Button,
-  Header,
-  Image,
-  Modal
-} from 'semantic-ui-react';
+import React, { useState, useCallback } from 'react';
+import { Header, Image, Modal } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 import HelpButton from '../HelpButton';
 import { agplDisclaimer } from './const';
@@ -12,51 +8,43 @@ import { agplDisclaimer } from './const';
 import logoImg from '../../../resources/media/logo_full_light.png';
 import styles from './styles.scss';
 
-class HelpModal extends React.Component {
-  constructor(props) {
-    super(props);
+const HelpModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpen = useCallback(() => setIsOpen(true), []);
+  const handleClose = useCallback(() => setIsOpen(false), []);
+  const { t } = useTranslation('help');
 
-    this.state = {
-      open: false
-    };
-  }
-
-  handleOpen() {
-    this.setState({ open: true });
-  }
-
-  handleClose() {
-    this.setState({ open: false });
-  }
-  
-  render() {
-    return (
-      <Modal
-        open={ this.state.open }
-        onClose={ this.handleClose.bind(this) }
-        basic
-        centered
-        dimmer='blurring'
-        trigger={ <HelpButton onClick={ this.handleOpen.bind(this) } /> }
-        className={ styles.help_modal }
-      >
-        <Modal.Header>About Nuclear Music Player</Modal.Header>
-        <Modal.Content image>
-          <Image wrapped size='medium' src={logoImg}/>
-          <Modal.Description>
-            <Header inverted>Desktop music player for streaming from free sources</Header>
-            <p>Copyright © <a href='https://github.com/nukeop/'>nukeop</a> 2019, released under AGPL-3.0</p>
-            <p>Many thanks to our contributors on Github, your help was vital in creating this program.</p>
-          </Modal.Description>
-        </Modal.Content>
-        <Modal.Content>
-          <Modal.Description>
-            { agplDisclaimer }
-          </Modal.Description>
-        </Modal.Content>
-      </Modal>
-    );
-  }
-}
+  return (
+    <Modal
+      open={isOpen}
+      onClose={handleClose}
+      basic
+      centered
+      dimmer='blurring'
+      trigger={<HelpButton onClick={handleOpen} />}
+      className={styles.help_modal}
+    >
+      <Modal.Header>{t('about')}</Modal.Header>
+      <Modal.Content image>
+        <Image wrapped size='medium' src={logoImg} />
+        <Modal.Description>
+          <Header inverted>
+            Desktop music player for streaming from free sources
+          </Header>
+          <p>
+            Copyright © <a href='https://github.com/nukeop/'>nukeop</a> 2019,
+            {t('released')}
+          </p>
+          <p>
+            {t('thanks')}
+          </p>
+        </Modal.Description>
+      </Modal.Content>
+      <Modal.Content>
+        <Modal.Description>{agplDisclaimer}</Modal.Description>
+      </Modal.Content>
+    </Modal>
+  );
+};
 
 export default HelpModal;
diff --git a/app/components/InputDialog/index.js b/app/components/InputDialog/index.js
index c781df4629..ce1e8dcac5 100644
--- a/app/components/InputDialog/index.js
+++ b/app/components/InputDialog/index.js
@@ -1,85 +1,53 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { Button, Input, Modal } from 'semantic-ui-react';
-
-class InputDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    
-    this.state = {
-      isOpen: false,
-      inputString: this.props.initialString
-    };
-
-    this.handleClose = this.handleClose.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleClose() {
-    this.setState({
-      isOpen: false
-    });
-  }
-
-  handleOpen() {
-    this.setState({
-      isOpen: true
-    });
-  }
-
-  handleChange(e) {
-    this.setState({
-      inputString: e.target.value
-    });
-  }
-
-  render() {
-    let {
-      trigger,
-      header,
-      placeholder,
-      accept,
-      onAccept
-    } = this.props;
-
-    let onClick = () => {
-      onAccept(this.state.inputString);
-      this.handleClose();
-    };
-    
-    return (
-      <Modal
-        basic
-        closeIcon
-        dimmer='blurring'
-        trigger={trigger}
-        onClose={this.handleClose}
-        onOpen={this.handleOpen.bind(this)}
-        open={this.state.isOpen}
-      >
-        <Modal.Content>
-          {header}
-          <Input
-            fluid
-            inverted
-            ref={input => {
-              input && input.focus(); 
-            }}
-            placeholder={placeholder}
-            onChange={this.handleChange}
-            value={this.state.inputString}
-	        />
-        </Modal.Content>
-        <Modal.Actions>
-          <Button onClick={this.handleClose} basic color='red' inverted>
-            Cancel
-          </Button>
-          <Button color='green' inverted onClick={onClick}>
-            {accept}
-          </Button>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-}
+import { useTranslation } from 'react-i18next';
+
+const InputDialog = ({ initialString, trigger, header, placeholder, accept, onAccept }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputString, setInputString] = useState(initialString);
+  const { t } = useTranslation('input-dialog');
+
+  const handleOpen = useCallback(() => setIsOpen(true), []);
+  const handleClose = useCallback(() => setIsOpen(false), []);
+  const handleChange = useCallback(e => setInputString(e.target.value), []);
+  const onClick = useCallback(e => {
+    setInputString(e.target.value);
+    onAccept(inputString);
+  }, [inputString, onAccept]);
+
+  return (
+    <Modal
+      basic
+      closeIcon
+      dimmer='blurring'
+      trigger={trigger}
+      onClose={handleClose}
+      onOpen={handleOpen}
+      open={isOpen}
+    >
+      <Modal.Content>
+        {header}
+        <Input
+          fluid
+          inverted
+          ref={input => {
+            input && input.focus();
+          }}
+          placeholder={placeholder}
+          onChange={handleChange}
+          value={inputString}
+        />
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={handleClose} basic color='red' inverted>
+          {t('cancel')}
+        </Button>
+        <Button color='green' inverted onClick={onClick}>
+          {accept}
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+};
 
 export default InputDialog;
diff --git a/app/components/LibraryView/index.js b/app/components/LibraryView/index.js
index bf1f84bd0b..597e3b0a26 100644
--- a/app/components/LibraryView/index.js
+++ b/app/components/LibraryView/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
@@ -10,6 +10,7 @@ import {
   Segment,
   Table
 } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 import Header from '../Header';
 import TrackRow from '../TrackRow';
@@ -25,15 +26,17 @@ const LibraryView = ({
   sortBy,
   direction
 }) => {
-  const handleSort = columnName => () => {
-    actions.updateLocalSort(columnName, sortBy, direction);
-  };
-  
+  const handleSort = useCallback(
+    columnName => () => {
+      actions.updateLocalSort(columnName, sortBy, direction);
+    },
+    [sortBy, direction, actions.updateLocalSort]
+  );
+  const { t } = useTranslation('library');
+
   return (
     <div className={styles.local_files_view}>
-      <Header>
-        Local Library
-      </Header>
+      <Header>{t('header')}</Header>
       <Segment>
         <Button
           icon
@@ -42,9 +45,8 @@ const LibraryView = ({
           className={styles.add_folder}
           onClick={actions.openLocalFolderPicker}
         >
-          
           <Icon name='folder open' />
-          Add folders
+          {t('add')}
         </Button>
         <Button
           inverted
@@ -62,7 +64,7 @@ const LibraryView = ({
                   name='close'
                   onClick={() => actions.removeLocalFolder(folder)}
                   className={styles.folder_remove_icon}
-                />            
+                />
               </List.Content>
               <List.Content>{folder}</List.Content>
             </List.Item>
@@ -70,20 +72,19 @@ const LibraryView = ({
         </List>
       </Segment>
       <Segment>
-        
         <div className={styles.search_field}>
           <Input
             inverted
             transparent
             icon='search'
             iconPosition='left'
-            placeholder='Filter...'
+            placeholder={t('filter-placeholder')}
             onChange={actions.updateFilter}
           />
         </div>
-      
+
         <Segment inverted className={trackRowStyles.tracks_container}>
-          <Dimmer active={ pending } loading={ pending } />
+          <Dimmer active={pending} loading={pending} />
           {!pending && (
             <Table sortable className={styles.table}>
               <Table.Header className={styles.thead}>
@@ -95,35 +96,36 @@ const LibraryView = ({
                     sorted={sortBy === 'artist' ? direction : null}
                     onClick={handleSort('artist')}
                   >
-                  Artist
+                    {t('artist')}
                   </Table.HeaderCell>
                   <Table.HeaderCell
                     sorted={sortBy === 'name' ? direction : null}
                     onClick={handleSort('name')}
                   >
-                  Title
+                    {t('title')}
                   </Table.HeaderCell>
                   <Table.HeaderCell
                     sorted={sortBy === 'album' ? direction : null}
                     onClick={handleSort('album')}
                   >
-                  Album
+                    {t('album')}
                   </Table.HeaderCell>
                 </Table.Row>
               </Table.Header>
               <Table.Body className={styles.tbody}>
-                {tracks && tracks.map((track, idx) => (
-                  <TrackRow
-                    key={'favorite-track-' + idx}
-                    track={track}
-                    index={idx}
-                    displayCover
-                    displayArtist
-                    displayAlbum
-                    withAddToDownloads={false}
-                    isLocal
-                  />
-                ))}
+                {tracks &&
+                  tracks.map((track, idx) => (
+                    <TrackRow
+                      key={'favorite-track-' + idx}
+                      track={track}
+                      index={idx}
+                      displayCover
+                      displayArtist
+                      displayAlbum
+                      withAddToDownloads={false}
+                      isLocal
+                    />
+                  ))}
               </Table.Body>
             </Table>
           )}
diff --git a/app/components/LyricsView/index.js b/app/components/LyricsView/index.js
index 087c075155..67638d2436 100644
--- a/app/components/LyricsView/index.js
+++ b/app/components/LyricsView/index.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
 import _ from 'lodash';
+import { withTranslation } from 'react-i18next';
 
 import LyricsHeader from './LyricsHeader';
 
 import styles from './styles.scss';
 
+@withTranslation('lyrics')
 class LyricsView extends React.Component {
   constructor(props) {
     super(props);
@@ -16,7 +18,7 @@ class LyricsView extends React.Component {
     let lyricsStr = _.get(lyrics, 'lyricsSearchResults', '');
     lyricsStr = _.get(lyricsStr, 'type', '');
     if (lyricsStr === '') {
-      lyricsStr = 'No lyrics were found for this song.';
+      lyricsStr = this.props.t('not-found');
     }
     return (
       <div className={styles.lyrics_text}>
@@ -38,8 +40,8 @@ class LyricsView extends React.Component {
     return (
       <div className={styles.empty_state}>
         <FontAwesome name='music'/>
-        <h2>Nothing is playing.</h2>
-        <div>Add some music to the queue to display the lyrics here!</div>
+        <h2>{this.props.t('empty')}</h2>
+        <div>{this.props.t('empty-help')}</div>
       </div>
     );
   }
diff --git a/app/components/MainLayout/index.js b/app/components/MainLayout/index.js
index b00342fb11..e4106ef2bd 100644
--- a/app/components/MainLayout/index.js
+++ b/app/components/MainLayout/index.js
@@ -1,17 +1,12 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import cx from 'classnames';
 
 import styles from './styles.scss';
 
-class MainLayout extends React.Component {
-  render() {
-    return (
-      <div className={cx(styles.main_layout_container, this.props.className)}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
+const MainLayout = ({ className, children }) => (
+  <div className={cx(styles.main_layout_container, className)}>
+    {children}
+  </div>
+);
 
 export default MainLayout;
diff --git a/app/components/Navbar/index.js b/app/components/Navbar/index.js
index 6bc818e696..11638d9818 100644
--- a/app/components/Navbar/index.js
+++ b/app/components/Navbar/index.js
@@ -1,15 +1,7 @@
 import React from 'react';
 
-import styles from './styles.css';
-
-class Navbar extends React.Component {
-  render() {
-    return (
-      <div className={this.props.className}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
+const Navbar = ({ className, children }) => (
+  <div className={className}>{children}</div>
+);
 
 export default Navbar;
diff --git a/app/components/PlayOptionsControls/index.js b/app/components/PlayOptionsControls/index.js
index 7c1bbe1079..27e507d4ea 100644
--- a/app/components/PlayOptionsControls/index.js
+++ b/app/components/PlayOptionsControls/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import FontAwesome from 'react-fontawesome';
 import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 import settingsConst from '../../constants/settings';
@@ -26,11 +27,13 @@ function renderOptionControl(props, settingName, fontAwesomeName, title) {
 }
 
 const PlayOptionsControls = props => {
+  const { t } = useTranslation('option-control');
+  
   return (
     <div className={styles.play_options_controls}>
-      {renderOptionControl(props, 'loopAfterQueueEnd', 'repeat', 'Loop')}
-      {renderOptionControl(props, 'shuffleQueue', 'random', 'Shuffle')}
-      {renderOptionControl(props, 'autoradio', 'magic', 'Autoradio')}
+      {renderOptionControl(props, 'loopAfterQueueEnd', 'repeat', t('loop'))}
+      {renderOptionControl(props, 'shuffleQueue', 'random', t('shuffle'))}
+      {renderOptionControl(props, 'autoradio', 'magic', t('autoradio'))}
     </div>
   );
 };
diff --git a/app/components/PlayQueue/QueueItem/index.js b/app/components/PlayQueue/QueueItem/index.js
index 9a7aa6cd8b..89697b8b43 100644
--- a/app/components/PlayQueue/QueueItem/index.js
+++ b/app/components/PlayQueue/QueueItem/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import FontAwesome from 'react-fontawesome';
-import _ from 'lodash';
 import { formatDuration, getSelectedStream } from '../../../utils';
 
 import styles from './styles.scss';
diff --git a/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.js b/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.js
index 13575a39de..d62c3d8dde 100644
--- a/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.js
+++ b/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.js
@@ -2,93 +2,87 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import _ from 'lodash';
-import {
-  Dropdown,
-  Icon
-} from 'semantic-ui-react';
+import { Dropdown, Icon } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
 const addTrackToPlaylist = (updatePlaylist, playlist, track) => {
   if (track.name) {
-  playlist.tracks.push(track);
-  updatePlaylist(playlist);
+    playlist.tracks.push(track);
+    updatePlaylist(playlist);
   }
 };
 
 const addFavoriteTrackFromQueue = (addFavoriteTrack, track) => {
   if (track.name) {
-  addFavoriteTrack({
-    artist: {
-      name: track.artist
-    },
-    name: track.name,
-    image: [
-      {
-        '#text': track.thumbnail
-      }
-    ]
-  });
+    addFavoriteTrack({
+      artist: {
+        name: track.artist
+      },
+      name: track.name,
+      image: [
+        {
+          '#text': track.thumbnail
+        }
+      ]
+    });
   }
 };
 
-const QueueMenuMore = props => {
-  const {
-    clearQueue,
-    savePlaylistDialog,
-    addFavoriteTrack,
-    addToDownloads,
-    updatePlaylist,
-    playlists,
-    currentItem
-  } = props;
-  
+const QueueMenuMore = ({
+  clearQueue,
+  savePlaylistDialog,
+  addFavoriteTrack,
+  addToDownloads,
+  updatePlaylist,
+  playlists,
+  currentItem
+}) => {
+  const { t } = useTranslation('queue');
+
   return (
-    <Dropdown
-      item
-      icon='ellipsis vertical'
-      className={ styles.queue_menu_more }>
+    <Dropdown item icon='ellipsis vertical' className={styles.queue_menu_more}>
       <Dropdown.Menu>
-        <Dropdown.Header>
-          Queue
-        </Dropdown.Header>
-        <Dropdown.Item onClick={ clearQueue }>
-          <Icon name='trash'/>
-          Clear queue
+        <Dropdown.Header>{t('header')}</Dropdown.Header>
+        <Dropdown.Item onClick={clearQueue}>
+          <Icon name='trash' />
+          {t('clear')}
         </Dropdown.Item>
-        { savePlaylistDialog }
+        {savePlaylistDialog}
         <Dropdown.Divider />
-        
-        <Dropdown.Header>
-          Current track
-        </Dropdown.Header>
+
+        <Dropdown.Header>{t('header-track')}</Dropdown.Header>
         <Dropdown.Item>
-          <Dropdown text='Add to playlist' className='left'>
-            <Dropdown.Menu className={ cx('left', styles.playlists_menu) }>
-              {
-                _.map(playlists, playlist => {
-                  return (
-                    <Dropdown.Item onClick={ () => addTrackToPlaylist(updatePlaylist, playlist, currentItem) }>
-                      <Icon name='music'/>
-                      { playlist.name }
-                    </Dropdown.Item>
-                  );
-                })
-              }
+          <Dropdown text={t('playlist-add')} className='left'>
+            <Dropdown.Menu className={cx('left', styles.playlists_menu)}>
+              {_.map(playlists, (playlist, i) => {
+                return (
+                  <Dropdown.Item
+                    key={i}
+                    onClick={() =>
+                      addTrackToPlaylist(updatePlaylist, playlist, currentItem)
+                    }
+                  >
+                    <Icon name='music' />
+                    {playlist.name}
+                  </Dropdown.Item>
+                );
+              })}
             </Dropdown.Menu>
           </Dropdown>
         </Dropdown.Item>
-        <Dropdown.Item onClick={
-          () => addFavoriteTrackFromQueue(addFavoriteTrack, currentItem)
-        }>
-          <Icon name='star'/>
-          Add to favorites
+        <Dropdown.Item
+          onClick={() =>
+            addFavoriteTrackFromQueue(addFavoriteTrack, currentItem)
+          }
+        >
+          <Icon name='star' />
+          {t('favorite-add')}
         </Dropdown.Item>
-        <Dropdown.Item onClick={
-          () => addToDownloads(currentItem)
-        }>
-          <Icon name='download'/>
-          Download
+        <Dropdown.Item onClick={() => addToDownloads(currentItem)}>
+          <Icon name='download' />
+          {t('download')}
         </Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown>
diff --git a/app/components/PlayQueue/QueueMenu/index.js b/app/components/PlayQueue/QueueMenu/index.js
index da88209350..e18e2bea36 100644
--- a/app/components/PlayQueue/QueueMenu/index.js
+++ b/app/components/PlayQueue/QueueMenu/index.js
@@ -5,6 +5,7 @@ import {
   Dropdown,
   Icon
 } from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
 
 import InputDialog from '../../InputDialog';
 import QueueMenuMore from './QueueMenuMore';
@@ -12,6 +13,7 @@ import QueueMenuMore from './QueueMenuMore';
 import styles from './styles.scss';
 import settingsConst from '../../../constants/settings';
 
+@withTranslation('queue')
 class QueueMenu extends React.Component {
   constructor(props){
     super(props);
@@ -21,8 +23,8 @@ class QueueMenu extends React.Component {
     return name => {
       addPlaylist(items, name);
       notify(
-        'Playlist created',
-        `Playlist ${name} has been created.`,
+        this.props.t('playlist-toast-title'),
+        this.props.t('playlist-toast-content', { name }),
         null,
         settings
       );
@@ -40,7 +42,8 @@ class QueueMenu extends React.Component {
       items,
       toggleOption,
       settings,
-      playlists
+      playlists,
+      t
     } = this.props;
 
     const firstTitle = _.get(_.head(items), 'name');
@@ -62,13 +65,13 @@ class QueueMenu extends React.Component {
             savePlaylistDialog={
               <InputDialog
                 header={<h4>Input playlist name:</h4>}
-                placeholder='Playlist name...'
-                accept='Save'
+                placeholder={t('dialog-placeholder')}
+                accept={t('dialog-accept')}
                 onAccept={this.handleAddPlaylist(addPlaylist, success, items, settings)}
                 trigger={
                   <Dropdown.Item>
                     <Icon name='save'/>
-                    Save as playlist
+                    {t('dialog-trigger')}
                   </Dropdown.Item>
                 }
                 initialString={ firstTitle }
diff --git a/app/components/PlayQueue/index.js b/app/components/PlayQueue/index.js
index 87f31599b6..01cc255248 100644
--- a/app/components/PlayQueue/index.js
+++ b/app/components/PlayQueue/index.js
@@ -2,6 +2,8 @@ import React from 'react';
 import classnames from 'classnames';
 import { ipcRenderer } from 'electron';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import _ from 'lodash';
+import { withTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
@@ -9,6 +11,7 @@ import QueuePopup from '../QueuePopup';
 import QueueItem from './QueueItem';
 import QueueMenu from './QueueMenu';
 
+@withTranslation('queue')
 class PlayQueue extends React.Component {
   constructor(props){
     super(props);
@@ -19,7 +22,7 @@ class PlayQueue extends React.Component {
   }
 
   onAddToDownloads(track) {
-    const { actions, plugins, settings } = this.props;
+    const { actions, plugins, settings, t } = this.props;
     const { addToDownloads, info } = actions;
     const artistName = _.isString(_.get(track, 'artist'))
       ? _.get(track, 'artist')
@@ -27,8 +30,8 @@ class PlayQueue extends React.Component {
     ipcRenderer.send('start-download', track);
     addToDownloads(plugins.plugins.musicSources, track);
     info(
-      'Track added to downloads',
-      `${artistName} - ${track.name} has been added to downloads.`,
+      t('download-toast-title'),
+      t('download-toast-content', { artist: artistName, title: track.name }),
       <img src={ track.thumbnail }/>,
       settings
     );
@@ -42,7 +45,7 @@ class PlayQueue extends React.Component {
     return this.props.items.map((el, i) => {
       return (
         <Draggable key={i} index={i} draggableId={i}>
-          {(provided, snapshot) => (
+          {(provided) => (
             <div
               ref={provided.innerRef}
               {...provided.draggableProps}
diff --git a/app/components/PlayerControls/PlayPauseButton/index.js b/app/components/PlayerControls/PlayPauseButton/index.js
index 968650279f..aa80eb7523 100644
--- a/app/components/PlayerControls/PlayPauseButton/index.js
+++ b/app/components/PlayerControls/PlayPauseButton/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import classnames from 'classnames';
 import FontAwesome from 'react-fontawesome';
+import { withTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
+@withTranslation('player')
 class PlayPauseButton extends React.Component {
   getIcon() {
     if (this.props.loading) {
@@ -25,7 +27,7 @@ class PlayPauseButton extends React.Component {
             [styles.player_button_disabled]: !this.props.onClick
           }
         )}
-        aria-label='Play/Pause button'
+        aria-label={this.props.t('play-pause-button')}
       >
         <a href='#' onClick={this.props.onClick}>{
           this.getIcon()
diff --git a/app/components/PlayerControls/PlayerButton/index.js b/app/components/PlayerControls/PlayerButton/index.js
index 2f913d7577..389b8ed1f8 100644
--- a/app/components/PlayerControls/PlayerButton/index.js
+++ b/app/components/PlayerControls/PlayerButton/index.js
@@ -4,21 +4,18 @@ import classNames from 'classnames';
 
 import styles from './styles.scss';
 
-class PlayerButton extends React.Component {
-
-  render() {
-    return (
-      <div
-        onClick={this.props.onClick}
-        className={classNames(styles.player_button_container, {
-          [styles.player_button_disabled]: !this.props.onClick
-        })}
-        aria-label={this.props.ariaLabel}
-      >
-        <a href='#'><FontAwesome name={this.props.icon} /></a>
-      </div>
-    );
-  }
-}
+const PlayerButton = ({ ariaLabel, icon, onClick }) => (
+  <div
+    onClick={onClick}
+    className={classNames(styles.player_button_container, {
+      [styles.player_button_disabled]: !onClick
+    })}
+    aria-label={ariaLabel}
+  >
+    <a href='#'>
+      <FontAwesome name={icon} />
+    </a>
+  </div>
+);
 
 export default PlayerButton;
diff --git a/app/components/PlayerControls/index.js b/app/components/PlayerControls/index.js
index bdb63b59ba..037dc4aa9d 100644
--- a/app/components/PlayerControls/index.js
+++ b/app/components/PlayerControls/index.js
@@ -4,29 +4,30 @@ import styles from './styles.scss';
 
 import PlayerButton from './PlayerButton';
 import PlayPauseButton from './PlayPauseButton';
+import { useTranslation } from 'react-i18next';
 
-class PlayerControls extends React.Component {
-  render() {
-    return (
-      <div className={styles.player_controls_container}>
-        <PlayerButton
-          onClick={this.props.back}
-          icon='step-backward'
-          ariaLabel='Previous track button'
-        />
-        <PlayPauseButton
-          onClick={this.props.togglePlay}
-          playing={this.props.playing}
-          loading={this.props.loading}
-        />
-        <PlayerButton
-          onClick={this.props.forward}
-          icon='step-forward'
-          ariaLabel='Next track button'
-        />
-      </div>
-    );
-  }
-}
+const PlayerControls = ({ back, togglePlay, playing, loading, forward }) => {
+  const { t } = useTranslation('player');
+
+  return (
+    <div className={styles.player_controls_container}>
+      <PlayerButton
+        onClick={back}
+        icon='step-backward'
+        ariaLabel={t('previous-button')}
+      />
+      <PlayPauseButton
+        onClick={togglePlay}
+        playing={playing}
+        loading={loading}
+      />
+      <PlayerButton
+        onClick={forward}
+        icon='step-forward'
+        ariaLabel={t('next-button')}
+      />
+    </div>
+  );
+};
 
 export default PlayerControls;
diff --git a/app/components/PlaylistView/index.js b/app/components/PlaylistView/index.js
index 9ebcbb32f2..1c735a17ce 100644
--- a/app/components/PlaylistView/index.js
+++ b/app/components/PlaylistView/index.js
@@ -4,6 +4,7 @@ import {
   Button,
   Icon
 } from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
 
 import InputDialog from '../InputDialog';
 import ContextPopup from '../ContextPopup';
@@ -13,6 +14,7 @@ import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
 import styles from './styles.scss';
 
+@withTranslation('playlists')
 class PlaylistView extends React.Component {
   constructor(props) {
     super(props);
@@ -58,9 +60,9 @@ class PlaylistView extends React.Component {
           onClick={() =>
             this.deletePlaylist(this.props.playlist)
           }
-          ariaLabel='Delete this playlist'
+          ariaLabel={this.props.t('delete')}
           icon='trash'
-          label='Delete this playlist'
+          label={this.props.t('delete')}
         />           
       </ContextPopup>
     );
@@ -116,7 +118,7 @@ class PlaylistView extends React.Component {
             { playlist.name }
             <InputDialog
               header={<h4>Input new playlist name:</h4>}
-              placeholder='Playlist name...'
+              placeholder={this.props.t('dialog-placeholder')}
               accept='Rename'
               initialString={ playlist.name }
               onAccept={
@@ -125,7 +127,7 @@ class PlaylistView extends React.Component {
               trigger={
                 <Button
                   basic
-                  aria-label='Rename this playlist'
+                  aria-label={this.props.t('rename')}
                   icon='pencil'
                 />
               }
@@ -147,8 +149,8 @@ class PlaylistView extends React.Component {
           <th>
             <Icon name='image' />
           </th>
-          <th>Artist</th>
-          <th>Title</th>
+          <th>{this.props.t('artist')}</th>
+          <th>{this.props.t('title')}</th>
         </tr>
       </thead>);
   }
diff --git a/app/components/Playlists/Playlist/index.js b/app/components/Playlists/Playlist/index.js
index 7c0adb04ea..982b95044c 100644
--- a/app/components/Playlists/Playlist/index.js
+++ b/app/components/Playlists/Playlist/index.js
@@ -1,47 +1,37 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import FontAwesome from 'react-fontawesome';
 
 import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
 
-class Playlist extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  goToPlaylist(history, playlist) {
+const Playlist = ({ playlist, history }) => {
+  const { t } = useTranslation('playlists');
+  const goToPlaylist = useCallback(() => {
     history.push('/playlist/' + playlist);
-  }
-
-  render() {
-  	let {
-  		playlist,
-      index,
-      history
-  	} = this.props;
+  }, [history, playlist]);
 
-    return (
-      <div className={styles.playlist_outside_container}>
-        <div onClick={() => {
-          this.goToPlaylist(history, index);
-        }} className={styles.playlist_container}>
-          <div>
-            <img
-              className={styles.playlist_thumbnail}
-              src={playlist.tracks[0].thumbnail}
-            />
-          </div>
-          <div className={styles.playlist_info}>
-            <h1>{playlist.name}</h1>
-            <h3>{playlist.tracks.length} songs</h3>
-          </div>
-          <div className={styles.playlist_chevron}>
-            <FontAwesome name='angle-right' size='2x'/>
-          </div>
-          
+  return (
+    <div className={styles.playlist_outside_container}>
+      <div
+        onClick={goToPlaylist}
+        className={styles.playlist_container}
+      >
+        <div>
+          <img
+            className={styles.playlist_thumbnail}
+            src={playlist.tracks[0].thumbnail}
+          />
+        </div>
+        <div className={styles.playlist_info}>
+          <h1>{playlist.name}</h1>
+          <h3>{t('songs', {total: playlist.tracks.length})}</h3>
+        </div>
+        <div className={styles.playlist_chevron}>
+          <FontAwesome name='angle-right' size='2x' />
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Playlist;
diff --git a/app/components/Playlists/index.js b/app/components/Playlists/index.js
index ab3aa5934c..5d9025b891 100644
--- a/app/components/Playlists/index.js
+++ b/app/components/Playlists/index.js
@@ -1,33 +1,27 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Playlist from './Playlist';
 
 import styles from './styles.scss';
 
-class Playlists extends React.Component {
-  render() {
-    let { history, playlists } = this.props;
+const Playlists = ({ playlists }) => {
+  const { t } = useTranslation('playlists');
 
-    return (
-      <div className={styles.playlists_container}>
-        {(!playlists ||
-          Object.keys(playlists).length === 0 ||
-          playlists.length === 0) && <h3>No playlists.</h3>}
-        {playlists &&
-          playlists.length > 0 &&
-          playlists.map((playlist, i) => {
-            return (
-              <Playlist
-                playlist={playlist}
-                history={history}
-                index={i}
-                key={i}
-              />
-            );
-          })}
-      </div>
-    );
-  }
-}
+  return (
+    <div className={styles.playlists_container}>
+      {(!playlists ||
+        Object.keys(playlists).length === 0 ||
+        playlists.length === 0) && <h3>{t('empty')}</h3>}
+      {playlists &&
+        playlists.length > 0 &&
+        playlists.map((playlist, i) => {
+          return (
+            <Playlist playlist={playlist} history={history} index={i} key={i} />
+          );
+        })}
+    </div>
+  );
+};
 
 export default Playlists;
diff --git a/app/components/PluginsView/index.js b/app/components/PluginsView/index.js
index f33628d112..9a5d8e9780 100644
--- a/app/components/PluginsView/index.js
+++ b/app/components/PluginsView/index.js
@@ -1,61 +1,45 @@
-import React from 'react';
-import FontAwesome from 'react-fontawesome';
-import { Dropdown, List, Segment } from 'semantic-ui-react';
+import React, { useCallback } from 'react';
+import { Dropdown } from 'semantic-ui-react';
 import _ from 'lodash';
 
 import Header from '../Header';
 import styles from './styles.scss';
-
-class PluginsView extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  selectDefaultMusicSource(e, data) {
-    this.props.actions.selectDefaultMusicSource(data.value);
-  }
-
-  render() {
-    let {
-      actions,
-      plugins,
-      defaultMusicSource
-    } = this.props;
-
-    let dropdownOptions = plugins.musicSources.map(s => {
-      return {
-        text: s.name,
-        value: s.sourceName
-      };
-    });
-
-    let defaultOption = _.find(dropdownOptions, {value: defaultMusicSource});
-    defaultOption = defaultOption || dropdownOptions[0];
-
-    return (
-      <div className={styles.plugins_view_container}>
-        <Header>
-          Plugins
-        </Header>
-        <div className={styles.plugin_settings}>
-          <Header>
-            Music sources
-          </Header>
-
-          <span>
-            Select the default music source:
-            {' '}
-            <Dropdown
-              inline
-              options={dropdownOptions}
-              defaultValue={defaultOption.value}
-              onChange={this.selectDefaultMusicSource.bind(this)}
-            />
-          </span>
-        </div>
+import { useTranslation } from 'react-i18next';
+
+const PluginsView = ({ actions, plugins, defaultMusicSource }) => {
+  const selectDefaultMusicSource = useCallback((e, data) => {
+    actions.selectDefaultMusicSource(data.value);
+  }, []);
+  const { t } = useTranslation('plugins');
+
+  const dropdownOptions = plugins.musicSources.map(s => {
+    return {
+      text: s.name,
+      value: s.sourceName
+    };
+  });
+
+  let defaultOption = _.find(dropdownOptions, { value: defaultMusicSource });
+  defaultOption = defaultOption || dropdownOptions[0];
+
+  return (
+    <div className={styles.plugins_view_container}>
+      <Header>{t('header')}</Header>
+      <div className={styles.plugin_settings}>
+        <Header>{t('subtitle')}</Header>
+
+        <span>
+          {t('placeholder')}
+          <Dropdown
+            inline
+            options={dropdownOptions}
+            defaultValue={defaultOption.value}
+            onChange={selectDefaultMusicSource}
+          />
+        </span>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default PluginsView;
diff --git a/app/components/QueuePopup/index.js b/app/components/QueuePopup/index.js
index 8a5754b196..3aa2f7d987 100644
--- a/app/components/QueuePopup/index.js
+++ b/app/components/QueuePopup/index.js
@@ -9,7 +9,9 @@ import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { getSelectedStream } from '../../utils';
 
 import styles from './styles.scss';
+import { withTranslation } from 'react-i18next';
 
+@withTranslation('queue')
 class QueuePopup extends React.Component {
   constructor(props) {
     super(props);
@@ -82,8 +84,9 @@ class QueuePopup extends React.Component {
   }
 
   renderStreamInfo() {
-    let { track, defaultMusicSource } = this.props;
-    let selectedStream = getSelectedStream(track.streams, defaultMusicSource);
+    const { track, defaultMusicSource, t } = this.props;
+    const selectedStream = getSelectedStream(track.streams, defaultMusicSource);
+
     return (
       <div className={styles.stream_info}>
         <div className={styles.stream_thumbnail}>
@@ -96,11 +99,11 @@ class QueuePopup extends React.Component {
         <div className={styles.stream_text_info}>
           {this.renderStreamSourceDropdown()}
           <div className={styles.stream_title}>
-            <label>Title:</label>
+            <label>{t('title')}</label>
             <span>{selectedStream.title}</span>
           </div>
           <div className={styles.stream_id}>
-            <label>Stream ID:</label>
+            <label>{t('id')}</label>
             <span>{selectedStream.id}</span>
           </div>
         </div>
@@ -123,8 +126,8 @@ class QueuePopup extends React.Component {
   }
 
   render() {
-    let { track, defaultMusicSource } = this.props;
-    let selectedStream = getSelectedStream(track.streams, defaultMusicSource);
+    const { track, defaultMusicSource, t } = this.props;
+    const selectedStream = getSelectedStream(track.streams, defaultMusicSource);
 
     return (
       <div onContextMenu={this.toggleOpen.bind(this)}>
@@ -142,7 +145,7 @@ class QueuePopup extends React.Component {
           {track.streams && selectedStream ? (
             this.renderStreamInfo()
           ) : (
-            <div className={styles.stream_info}>Stream still loading.</div>
+            <div className={styles.stream_info}>{t('loading')}</div>
           )}
         </Popup>
       </div>
diff --git a/app/components/SearchBox/index.js b/app/components/SearchBox/index.js
index 7e546142a7..7525f011cb 100644
--- a/app/components/SearchBox/index.js
+++ b/app/components/SearchBox/index.js
@@ -3,29 +3,26 @@ import FontAwesome from 'react-fontawesome';
 import DebounceInput from 'react-debounce-input';
 
 import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
 
-class SearchBox extends React.Component {
-  render() {
-    return (
-      <div className={styles.search_box_container}>
-        <FontAwesome name='search'/>
-        <div className='form'>
-          <DebounceInput
-            placeholder='Search...'
-            minLength={2}
-            debounceTimeout={500}
-            onChange={this.props.handleSearch}
-            autoFocus
-          />
-          {
-            this.props.loading
-              ? <FontAwesome name='spinner' pulse/>
-              : null
-          }
-        </div>
+const SearchBox = ({ handleSearch, loading }) => {
+  const { t } = useTranslation('search');
+
+  return (
+    <div className={styles.search_box_container}>
+      <FontAwesome name='search' />
+      <div className='form'>
+        <DebounceInput
+          placeholder={t('placeholder')}
+          minLength={2}
+          debounceTimeout={500}
+          onChange={handleSearch}
+          autoFocus
+        />
+        {loading ? <FontAwesome name='spinner' pulse /> : null}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default SearchBox;
diff --git a/app/components/SearchResults/AllResults/index.js b/app/components/SearchResults/AllResults/index.js
index 9349cd99a1..7d0335af93 100644
--- a/app/components/SearchResults/AllResults/index.js
+++ b/app/components/SearchResults/AllResults/index.js
@@ -6,7 +6,9 @@ import PlaylistResults from '../PlaylistResults';
 import TracksResults from '../TracksResults';
 
 import styles from './styles.scss';
+import { withTranslation } from 'react-i18next';
 
+@withTranslation('search')
 class AllResults extends React.Component {
   constructor(props) {
     super(props);
@@ -41,7 +43,7 @@ class AllResults extends React.Component {
   renderPlaylistSection () {
     return (
       <div className={styles.column}>
-        <h3>Playlist</h3>
+        <h3>{this.props.t('playlist', { count: this.props.playlistSearchResults.length })}</h3>
         <div className={styles.row}>
           <PlaylistResults
             playlistSearchStarted={this.props.playlistSearchStarted}
@@ -69,16 +71,20 @@ class AllResults extends React.Component {
   }
 
   renderArtistsSection () {
-    return this.renderSection('Artists', this.props.artistSearchResults, this.props.artistInfoSearch);
+    const { t, artistSearchResults, artistInfoSearch } = this.props;
+
+    return this.renderSection(t('artist', { count: artistSearchResults.length }), artistSearchResults, artistInfoSearch);
   }
 
   renderAlbumsSection () {
-    return this.renderSection('Albums', this.props.albumSearchResults, this.props.albumInfoSearch);
+    const { t, albumSearchResults, albumInfoSearch } = this.props;
+
+    return this.renderSection(t('album', { count: albumSearchResults.length }), albumSearchResults, albumInfoSearch);
   }
 
   renderTracksSection () {
     return (<div className={styles.column}>
-      <h3>Tracks</h3>
+      <h3>{this.props.t('track_plural')}</h3>
       <div className={styles.row}>
         {this.renderTracks(this.props.trackSearchResults.info)}
       </div>
@@ -91,7 +97,7 @@ class AllResults extends React.Component {
       this.props.albumSearchResults.length <= 0 &&
       this.props.trackSearchResults.length <= 0
     ) {
-      return <div>Nothing found.</div>;
+      return <div>{this.props.t('empty')}</div>;
     }
 
     return (
diff --git a/app/components/SearchResults/PlaylistResults/index.js b/app/components/SearchResults/PlaylistResults/index.js
index ef9c255427..f8496e32e5 100644
--- a/app/components/SearchResults/PlaylistResults/index.js
+++ b/app/components/SearchResults/PlaylistResults/index.js
@@ -4,9 +4,11 @@ import TracksResults from '../TracksResults';
 import FontAwesome from 'react-fontawesome';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import _ from 'lodash';
+import { withTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
+@withTranslation('search')
 class PlaylistResults extends React.Component {
   constructor(props) {
     super(props);
@@ -32,7 +34,7 @@ class PlaylistResults extends React.Component {
           });
       }}
       className={styles.add_button}
-      aria-label='Add all tracks to queue'
+      aria-label={this.props.t('queue-add')}
     >
       <FontAwesome name='plus' /> Add all
     </a> : null
@@ -58,7 +60,7 @@ class PlaylistResults extends React.Component {
   }
 
   renderNoResult () {
-    return (<div>Nothing found.</div>);
+    return (<div>{this.props.t('empty')}</div>);
   }
   render () {
     return (
diff --git a/app/components/SearchResults/TracksResults/index.js b/app/components/SearchResults/TracksResults/index.js
index 3bce2dc99b..e882c0d236 100644
--- a/app/components/SearchResults/TracksResults/index.js
+++ b/app/components/SearchResults/TracksResults/index.js
@@ -1,49 +1,49 @@
 import React from 'react';
 import _ from 'lodash';
-import {
-  Segment
-} from 'semantic-ui-react';
+import { Segment } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 import TrackRow from '../../TrackRow';
 
 import trackRowStyles from '../../TrackRow/styles.scss';
 
-class TracksResults extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const TracksResults = ({ tracks, limit }) => {
+  const { t } = useTranslation('search');
+  const collection = tracks || [];
 
-  render () {
-    let collection = this.props.tracks || [];
-    let limit = this.props.limit;
-    if (collection.length === 0) {
-      return 'Nothing found.';
-    } else {
-      return (
-        <Segment className={trackRowStyles.tracks_container}>
-          <table>
-            <tbody>
-              {_.take(collection, limit).map((track, index) => {
-                if (track && _.hasIn(track, 'name') & _.hasIn(track, 'image') && _.hasIn(track, 'artist')) {
-                  const newTrack = _.cloneDeep(track);
-                  if (!newTrack.artist.name) {
-                    _.set(newTrack, 'artist.name', newTrack.artist);
-                  }
-                  return < TrackRow
+  if (collection.length === 0) {
+    return t('empty');
+  } else {
+    return (
+      <Segment className={trackRowStyles.tracks_container}>
+        <table>
+          <tbody>
+            {_.take(collection, limit).map((track, index) => {
+              if (
+                track &&
+                _.hasIn(track, 'name') & _.hasIn(track, 'image') &&
+                _.hasIn(track, 'artist')
+              ) {
+                const newTrack = _.cloneDeep(track);
+                if (!newTrack.artist.name) {
+                  _.set(newTrack, 'artist.name', newTrack.artist);
+                }
+                return (
+                  <TrackRow
                     key={'search-result-track-row-' + index}
                     track={newTrack}
                     index={'popular-track-' + index}
                     displayArtist
                     displayCover
-                  />;
-                }
-              })}
-            </tbody>
-          </table>
-        </Segment>
-      );
-    }
+                  />
+                );
+              }
+            })}
+          </tbody>
+        </table>
+      </Segment>
+    );
   }
-}
+};
 
 export default TracksResults;
diff --git a/app/components/SearchResults/index.js b/app/components/SearchResults/index.js
index 797b8886ca..398d86aab9 100644
--- a/app/components/SearchResults/index.js
+++ b/app/components/SearchResults/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tab } from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
 
 import AllResults from './AllResults';
 import TracksResults from './TracksResults';
@@ -8,6 +9,7 @@ import Card from '../Card';
 
 import styles from './styles.scss';
 
+@withTranslation('search')
 class SearchResults extends React.Component {
   renderAllResultsPane () {
     return (
@@ -58,7 +60,7 @@ class SearchResults extends React.Component {
                   />
                 );
               })
-            : 'Nothing found.'}
+            : this.props.t('empty')}
         </div>
       </Tab.Pane>
     );
@@ -77,7 +79,7 @@ class SearchResults extends React.Component {
                   tracks={collection}
                   limit='15'
                 />
-              : 'Nothing found.'}
+              : this.props.t('empty')}
           </div>
         </Tab.Pane>
       );
diff --git a/app/components/Seekbar/index.js b/app/components/Seekbar/index.js
index 6b96aeb320..3f0410c565 100644
--- a/app/components/Seekbar/index.js
+++ b/app/components/Seekbar/index.js
@@ -1,25 +1,20 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import styles from './styles.scss';
 
-class Seekbar extends React.Component {
+const Seekbar = ({ seek, queue, fill }) => {
+  const handleClick = useCallback(event => {
+    const percent = (event.pageX - event.target.offsetLeft)/document.body.clientWidth;
+    const duration = queue.queueItems[queue.currentSong].streams[0].duration;
 
-  handleClick(seek, queue) {
-    return event => {
-      const percent = (event.pageX - event.target.offsetLeft)/document.body.clientWidth;
-      const duration = queue.queueItems[queue.currentSong].streams[0].duration;
+    seek(percent * duration);
+  }, [seek, queue.queueItems]);
 
-      seek(percent * duration);
-    };    
-  }
-
-  render() {
-    return (
-      <div onClick={this.handleClick(this.props.seek, this.props.queue)} className={styles.seekbar_container}>
-        <div style={{width: this.props.fill}} className={styles.seekbar_fill} />
-      </div>
-    );
-  }
-}
+  return (
+    <div onClick={handleClick} className={styles.seekbar_container}>
+      <div style={{width: fill}} className={styles.seekbar_fill} />
+    </div>
+  );
+};
 
 export default Seekbar;
diff --git a/app/components/Settings/GithubSettings/index.js b/app/components/Settings/GithubSettings/index.js
index bdd8f76c39..5279e0c034 100644
--- a/app/components/Settings/GithubSettings/index.js
+++ b/app/components/Settings/GithubSettings/index.js
@@ -1,55 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import {
-  Button,
-  Icon
-} from 'semantic-ui-react';
+import { Button, Icon } from 'semantic-ui-react';
 
 import Spacer from '../../Spacer';
 import OauthPopup from '../../OauthPopup';
 import { getGithubOauthUrl } from '../../../rest/Github';
 
 import settingsStyles from '../styles.scss';
+import { useTranslation } from 'react-i18next';
+
+const GithubSettings = ({ username, loading, logIn, logOut }) => {
+  const { t } = useTranslation('settings');
 
-const GithubSettings = props => {
-  const {
-    username,
-    loading,
-    logIn,
-    logOut
-  } = props;
-  
   return (
-    <div className={ settingsStyles.settings_item } >
-      <span>User: <strong>{ _.defaultTo(username, 'Not logged in') }</strong></span>
+    <div className={settingsStyles.settings_item}>
+      <span>
+        User: <strong>{_.defaultTo(username, t('notlogged'))}</strong>
+      </span>
       <Spacer />
-      
-      {
-        _.isNil(username) &&
-          <OauthPopup
-            url={ getGithubOauthUrl() }
-            onCode={ code => logIn(code) } 
-            render={ oauthProps =>
-              <Button
-                color='black'
-                loading={ loading }
-                onClick={ oauthProps.onClick }
-              >
-                <Icon name='github'/>
-            Log in with Github
-              </Button>
-            } />
-      }
-      {
-        !_.isNil(username) &&
-          <Button
-            inverted
-            onClick={ logOut }
-          >
-              Log out
-          </Button>
-      }
+  
+      {_.isNil(username) && (
+        <OauthPopup
+          url={getGithubOauthUrl()}
+          onCode={code => logIn(code)}
+          render={oauthProps => (
+            <Button color='black' loading={loading} onClick={oauthProps.onClick}>
+              <Icon name='github' />
+              {t('github-connect')}
+            </Button>
+          )}
+        />
+      )}
+      {!_.isNil(username) && (
+        <Button inverted onClick={logOut}>
+          {t('logout')}
+        </Button>
+      )}
     </div>
   );
 };
diff --git a/app/components/Settings/SocialIntegration/index.js b/app/components/Settings/SocialIntegration/index.js
index 98add120c9..8eecb19ee1 100644
--- a/app/components/Settings/SocialIntegration/index.js
+++ b/app/components/Settings/SocialIntegration/index.js
@@ -1,42 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Grid
-} from 'semantic-ui-react';
+import { Grid } from 'semantic-ui-react';
 
 import styles from './styles.scss';
 
-const SocialIntegration = props => {
-  const {
-    logo,
-    title,
-    description,
-    children
-  } = props;
-  
-  return (
-    <React.Fragment>
-      <Grid className={ styles.social_integration }>
-        <Grid.Column>
-          <Grid.Row>
-            <span>
-              { logo }
-            </span>
-            <span>
-              { title }
-            </span>
-          </Grid.Row>
-          <Grid.Row>
-            <p>
-              { description }
-            </p>
-          </Grid.Row>
-        </Grid.Column>
-      </Grid>
-      { children }
-    </React.Fragment>
-  );
-};
+const SocialIntegration = ({ logo, title, description, children }) => (
+  <React.Fragment>
+    <Grid className={styles.social_integration}>
+      <Grid.Column>
+        <Grid.Row>
+          <span>{logo}</span>
+          <span>{title}</span>
+        </Grid.Row>
+        <Grid.Row>
+          <p>{description}</p>
+        </Grid.Row>
+      </Grid.Column>
+    </Grid>
+    {children}
+  </React.Fragment>
+);
 
 SocialIntegration.propTypes = {
   logo: PropTypes.node,
diff --git a/app/components/Settings/index.js b/app/components/Settings/index.js
index 95c52e2aea..3ec33b550c 100644
--- a/app/components/Settings/index.js
+++ b/app/components/Settings/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Input, Radio, Segment } from 'semantic-ui-react';
+import { Button, Input, Radio, Segment, Select } from 'semantic-ui-react';
 import Range from 'react-range-progress';
 import cx from 'classnames';
 import _ from 'lodash';
@@ -8,6 +8,7 @@ import {
   Divider,
   Icon
 } from 'semantic-ui-react';
+import i18n from 'i18next';
 
 import Header from '../Header';
 import Spacer from '../Spacer';
@@ -16,6 +17,7 @@ import GithubSettings from './GithubSettings';
 import settingsEnum from '../../constants/settingsEnum';
 
 import styles from './styles.scss';
+import { withTranslation } from 'react-i18next';
 
 const volumeSliderColors = {
   fillColor: { r: 248, g: 248, b: 242, a: 1 },
@@ -23,6 +25,7 @@ const volumeSliderColors = {
   thumbColor: { r: 248, g: 248, b: 242, a: 1 }
 };
 
+@withTranslation('settings')
 class Settings extends React.Component {
   toggleScrobbling (
     lastFmScrobblingEnabled,
@@ -56,11 +59,8 @@ class Settings extends React.Component {
             <Icon name='lastfm square' className={ styles.lastfm_icon }/>
           </Icon.Group>
         }
-        title='Last.fm'
-        description={
-          'In order to enable scrobbling, you first have to'
-                + ' connect and authorize Nuclear on Last.fm, then click log in.'
-        }
+        title={this.props.t('lastfm-title')}
+        description={this.props.t('lastfm-description')}
       >
         {this.renderLastFmLoginButtons()}
         {this.renderLastFmOptionRadio()}
@@ -83,12 +83,12 @@ class Settings extends React.Component {
     return (
       <div className={styles.settings_social_item}>
         <span>
-          User: <strong>{lastFmName ? lastFmName : 'Not logged in'}</strong>
+          {this.props.t('user')} <strong>{lastFmName ? lastFmName : this.props.t('notlogged')}</strong>
         </span>
         <Spacer />
         {!lastFmSessionKey && (
           <Button onClick={lastFmConnectAction} color='red'>
-            Connect with Last.fm
+            {this.props.t('lastfm-connect')}
           </Button>
         )}
         {!lastFmSessionKey && (
@@ -96,13 +96,13 @@ class Settings extends React.Component {
             onClick={() => lastFmLoginAction(lastFmAuthToken)}
             color='red'
           >
-            Log in
+            {this.props.t('login')}
           </Button>
         )}
         {
           lastFmSessionKey &&
             <Button onClick={ lastFmLogOut } inverted>
-              Log out
+              {this.props.t('logout')}
             </Button>
         }
       </div>
@@ -114,7 +114,7 @@ class Settings extends React.Component {
     const { enableScrobbling, disableScrobbling } = this.props.actions;
     return (
       <div className={styles.settings_item}>
-        <label>Enable scrobbling to Last.fm</label>
+        <label>{this.props.t('lastfm-enable')}</label>
         <Spacer />
         <Radio
           toggle
@@ -134,7 +134,8 @@ class Settings extends React.Component {
   renderGithubSocialIntegration() {
     const {
       actions,
-      github
+      github,
+      t
     } = this.props;
     
     return (
@@ -145,10 +146,8 @@ class Settings extends React.Component {
             <Icon color='black' name='github square' />
           </Icon.Group>
         }
-        title='Github'
-        description={
-          'Log in via Github to be able to create and share your playlists online (upcoming feature).'
-        }
+        title={t('github-title')}
+        description={t('github-description')}
       >
         <GithubSettings
           logIn={ actions.githubOauth }
@@ -163,7 +162,7 @@ class Settings extends React.Component {
   renderSocialSettings () {
     return (
       <div className={styles.settings_section}>
-        <Header>Social</Header>
+        <Header>{this.props.t('social')}</Header>
         <hr />
         <Segment>
           { this.renderLastFmSocialIntegration() }
@@ -178,6 +177,21 @@ class Settings extends React.Component {
     this.props.actions.setNumberOption(option.name, _.parseInt(value));
   }
 
+  renderListOption({ placeholder, options }) {
+    return (
+      <Select
+        placeholder={placeholder}
+        value={i18n.language}
+        options={options.map(lng => ({
+          key: lng,
+          text: lng,
+          value: lng
+        }))}
+        onChange={(e, { value }) => i18n.changeLanguage(value)}
+      />
+    );
+  }
+
   renderRadioOption (option, settings) {
     return (<Radio
       toggle
@@ -240,7 +254,7 @@ class Settings extends React.Component {
   renderOption (settings, option, key) {
     return (
       <div key={key} className={cx(styles.settings_item, option.type)}>
-        <label>{option.prettyName}</label>
+        <label>{this.props.t(option.prettyName)}</label>
         <Spacer />
         {
           option.type === settingsEnum.BOOLEAN &&
@@ -254,12 +268,16 @@ class Settings extends React.Component {
           option.type === settingsEnum.NUMBER &&
           this.renderNumberOption(option)
         }
+        {
+          option.type === settingsEnum.LIST &&
+          this.renderListOption(option)
+        }
       </div>
     );
   }
 
   render () {
-    let { options, settings } = this.props;
+    let { options, settings, t } = this.props;
     let optionsGroups = _.groupBy(options, 'category');
 
     return (
@@ -268,7 +286,7 @@ class Settings extends React.Component {
         {_.map(optionsGroups, (group, i) => {
           return (
             <div key={i} className={styles.settings_section}>
-              <Header>{i}</Header>
+              <Header>{t(i)}</Header>
               <hr />
               <Segment>
                 {_.map(group, (option, j) =>
diff --git a/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.js b/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.js
index ba1c8a88ef..40a9bf8bd1 100644
--- a/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.js
+++ b/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 
 import styles from './styles.scss';
 
-const SidebarMenuCategoryHeader = props => {
+const SidebarMenuCategoryHeader = ({ compact, children }) => {
   return (
-    !props.compact && <div className={styles.sidebar_menu_category_header}>
-      { props.children }
+    !compact && <div className={styles.sidebar_menu_category_header}>
+      { children }
     </div>
   );
 };
diff --git a/app/components/SidebarMenu/SidebarMenuItem/index.js b/app/components/SidebarMenu/SidebarMenuItem/index.js
index 7aa71beccc..df410efb4a 100644
--- a/app/components/SidebarMenu/SidebarMenuItem/index.js
+++ b/app/components/SidebarMenu/SidebarMenuItem/index.js
@@ -2,18 +2,10 @@ import React from 'react';
 
 import styles from './styles.scss';
 
-class SidebarMenuItem extends React.Component {
-  constructor(props){
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className={styles.sidebar_menu_item_container}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
+const SidebarMenuItem = ({ children }) => (
+  <div className={styles.sidebar_menu_item_container}>
+    {children}
+  </div>
+);
 
 export default SidebarMenuItem;
diff --git a/app/components/SidebarMenu/index.js b/app/components/SidebarMenu/index.js
index 301b6ecf64..caa4a1f56c 100644
--- a/app/components/SidebarMenu/index.js
+++ b/app/components/SidebarMenu/index.js
@@ -2,24 +2,8 @@ import React from 'react';
 
 import styles from './styles.scss';
 
-import SidebarMenuItem from './SidebarMenuItem';
-
-class SidebarMenu extends React.Component {
-  constructor(props){
-    super(props);
-  }
-
-  render() {
-    let {
-      children
-    } = this.props;
-    
-    return (
-      <div className={styles.sidebar_menu_container}>
-        { children }
-      </div>
-    );
-  }
-}
+const SidebarMenu = ({ children }) => (
+  <div className={styles.sidebar_menu_container}>{children}</div>
+);
 
 export default SidebarMenu;
diff --git a/app/components/Spacer/index.js b/app/components/Spacer/index.js
index 5b24fc2ab4..dcfaa4206b 100644
--- a/app/components/Spacer/index.js
+++ b/app/components/Spacer/index.js
@@ -1,11 +1,7 @@
 import React from 'react';
 
-class Spacer extends React.Component {
-  render() {
-    return (
-      <div style={Object.assign({}, {flex: '1 1 auto'}, this.props.style)} />
-    );
-  }
-}
+const Spacer = ({ style }) => (
+  <div style={Object.assign({}, { flex: '1 1 auto' }, style)} />
+);
 
 export default Spacer;
diff --git a/app/components/TagView/TagDescription/index.js b/app/components/TagView/TagDescription/index.js
index f5d49339ae..57aa723b7a 100644
--- a/app/components/TagView/TagDescription/index.js
+++ b/app/components/TagView/TagDescription/index.js
@@ -2,22 +2,13 @@ import React from 'react';
 
 import styles from './styles.scss';
 
-class TagDescription extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      tagInfo
-    } = this.props;
-    
-    return (
-      <div className={styles.tag_description}>
-        {tagInfo.wiki.summary.split('.').slice(0, -5).join('.')+'...'}
-      </div>
-    );
-  }
-}
+const TagDescription = ({ tagInfo }) => (
+  <div className={styles.tag_description}>
+    {tagInfo.wiki.summary
+      .split('.')
+      .slice(0, -5)
+      .join('.') + '...'}
+  </div>
+);
 
 export default TagDescription;
diff --git a/app/components/TagView/TagHeader/index.js b/app/components/TagView/TagHeader/index.js
index 34dcf4bd73..3e01260d94 100644
--- a/app/components/TagView/TagHeader/index.js
+++ b/app/components/TagView/TagHeader/index.js
@@ -3,29 +3,16 @@ import _ from 'lodash';
 
 import styles from './styles.scss';
 
-class TagHeader extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      tag,
-      tagInfo,
-      topArtists
-    } = this.props;
-    return (
-      <div className={styles.tag_header_container}>
-        <div
-          style={{backgroundImage: `url(${_.last(topArtists[0].image)['#text']})`}}
-          className={styles.tag_header_background}
-	   />
-        <div className={styles.tag_header_name}>
-	  #{tag}
-        </div>
-      </div>
-    );
-  }
-}
+const TagHeader = ({ tag, topArtists }) => (
+  <div className={styles.tag_header_container}>
+    <div
+      style={{
+        backgroundImage: `url(${_.last(topArtists[0].image)['#text']})`
+      }}
+      className={styles.tag_header_background}
+    />
+    <div className={styles.tag_header_name}>#{tag}</div>
+  </div>
+);
 
 export default TagHeader;
diff --git a/app/components/TagView/TagTopList/index.js b/app/components/TagView/TagTopList/index.js
index 6584879d8f..3d6d97cf80 100644
--- a/app/components/TagView/TagTopList/index.js
+++ b/app/components/TagView/TagTopList/index.js
@@ -5,53 +5,44 @@ import _ from 'lodash';
 
 import styles from './styles.scss';
 
-class TagTopList extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      topList,
-      onClick,
-      header
-    } = this.props;
-    
-    return (
-      <div className={styles.tag_top_list}>
-        <h4>{header}</h4>
-        <div className={styles.top_list_items}>
-          <div className={styles.top_item} onClick={() => onClick && onClick(topList[0].name)}>
-            <Img src={_.last(topList[0].image)['#text']} />
+const TagTopList = ({ topList, onClick, header }) => (
+  <div className={styles.tag_top_list}>
+    <h4>{header}</h4>
+    <div className={styles.top_list_items}>
+      <div
+        className={styles.top_item}
+        onClick={() => onClick && onClick(topList[0].name)}
+      >
+        <Img src={_.last(topList[0].image)['#text']} />
+        <div className={styles.item_overlay}>
+          <div className={styles.item_name}>{topList[0].name}</div>
+        </div>
+      </div>
+      <div className={styles.other_items}>
+        {topList.slice(1, 5).map((item, i) => {
+          return (
             <div
-              className={styles.item_overlay}
+              key={i}
+              className={styles.other_item}
+              onClick={() => onClick && onClick(item.name)}
             >
-              <div className={styles.item_name}>{topList[0].name}</div>
+              <Img src={_.last(item.image)['#text']} />
+              <div className={styles.item_overlay}>
+                <div
+                  className={classnames(
+                    styles.item_name,
+                    styles.other_item_name
+                  )}
+                >
+                  {item.name}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className={styles.other_items}>
-            {
-              topList.slice(1, 5).map((item, i) => {
-                return (
-                  <div
-                    key={i}
-                    className={styles.other_item}
-                    onClick={() => onClick && onClick(item.name)}
-                  >
-                    <Img src={_.last(item.image)['#text']}/>
-                    <div className={styles.item_overlay}
-                    >
-                      <div className={classnames(styles.item_name, styles.other_item_name)}>{item.name}</div>
-                    </div>
-                  </div>
-                );
-              })
-            }
-          </div>
-        </div>
+          );
+        })}
       </div>
-    );
-  }
-}
+    </div>
+  </div>
+);
 
 export default TagTopList;
diff --git a/app/components/TagView/TagTopTracks/index.js b/app/components/TagView/TagTopTracks/index.js
index 3c71fc296d..c2d4dec829 100644
--- a/app/components/TagView/TagTopTracks/index.js
+++ b/app/components/TagView/TagTopTracks/index.js
@@ -3,21 +3,19 @@ import FontAwesome from 'react-fontawesome';
 
 import styles from './styles.scss';
 import TrackRow from '../../TrackRow';
+import { useTranslation } from 'react-i18next';
 
-class TagTopTracks extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const TagTopTracks = ({ tracks, addToQueue, musicSources }) => {
+  const { t } = useTranslation('tags');
 
-  renderAddAllButton () {
-    let { tracks, addToQueue, musicSources } = this.props;
-    return (
+  return (
+    <div className={styles.tag_top_tracks}>
       <a
         href='#'
         key='add-all-tag-tracks-to-queue'
         className='add_all_button'
         onClick={() => {
-          tracks.map((track, i) => {
+          tracks.map((track) => {
             addToQueue(musicSources, {
               artist: track.artist.name,
               name: track.name,
@@ -25,46 +23,37 @@ class TagTopTracks extends React.Component {
             });
           });
         }}
-        aria-label='Add all tracks to queue'
+        aria-label={this.props.t('queue-add')}
       >
-        <FontAwesome name='plus' /> Add all to queue
+        <FontAwesome name='plus' /> {this.props.t('queue-add')}
       </a>
-    );
-  }
-
-  render () {
-    let { tracks } = this.props;
-    return (
-      <div className={styles.tag_top_tracks}>
-        {this.renderAddAllButton()}
-        <table>
-          <thead>
-            <tr>
-              <th>
-                <FontAwesome name='photo' />
-              </th>
-              <th>Artist</th>
-              <th>Title</th>
-              <th style={{ textAlign: 'center' }}>Duration</th>
-            </tr>
-          </thead>
-          <tbody>
-            {tracks.map((track, index) => {
-              return < TrackRow
-                key={'tag-track-row-' + index}
-                track={track}
-                index={'popular-track-' + index}
-                artist={track.artist}
-                displayCover
-                displayArtist
-                displayDuration
-              />;
-            })}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
+      <table>
+        <thead>
+          <tr>
+            <th>
+              <FontAwesome name='photo' />
+            </th>
+            <th>{t('artist')}</th>
+            <th>{t('title')}</th>
+            <th style={{ textAlign: 'center' }}>{t('duration')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tracks.map((track, index) => {
+            return < TrackRow
+              key={'tag-track-row-' + index}
+              track={track}
+              index={'popular-track-' + index}
+              artist={track.artist}
+              displayCover
+              displayArtist
+              displayDuration
+            />;
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
 
 export default TagTopTracks;
diff --git a/app/components/TagView/index.js b/app/components/TagView/index.js
index 6929c22f88..5a54017334 100644
--- a/app/components/TagView/index.js
+++ b/app/components/TagView/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Dimmer, Loader } from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
 
 import TagDescription from './TagDescription';
 import TagHeader from './TagHeader';
@@ -7,6 +8,7 @@ import TagTopList from './TagTopList';
 import TagTopTracks from './TagTopTracks';
 import styles from './styles.scss';
 
+@withTranslation('tags')
 class TagView extends React.Component {
   constructor(props) {
     super(props);
@@ -35,7 +37,7 @@ class TagView extends React.Component {
       <TagTopList
         topList={topArtists}
         onClick={this.artistInfoSearchByName.bind(this)}
-        header='Top Artists'
+        header={this.props.t('artists')}
       />
     );
   }
@@ -46,7 +48,7 @@ class TagView extends React.Component {
       <TagTopList
         topList={topAlbums}
         onClick={this.albumInfoSearchByName.bind(this)}
-        header='Top Albums'
+        header={this.props.t('albums')}
       />
     );
   }
diff --git a/app/components/ToastComponent/index.js b/app/components/ToastComponent/index.js
index bd3afabd90..fd9f329e63 100644
--- a/app/components/ToastComponent/index.js
+++ b/app/components/ToastComponent/index.js
@@ -2,15 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ui from 'nuclear-ui';
 
-import styles from './styles.scss';
+import './styles.scss';
 
-const ToastComponent = props => {
-  return (
-    <ui.ToastContainer
-      toasts={props.toasts}
-    />
-  );
-};
+const ToastComponent = ({ toasts }) => <ui.ToastContainer toasts={toasts} />;
 
 ToastComponent.propTypes = {
   toasts: PropTypes.array
diff --git a/app/components/TrackInfo/index.js b/app/components/TrackInfo/index.js
index cc3513aace..95470b3fac 100644
--- a/app/components/TrackInfo/index.js
+++ b/app/components/TrackInfo/index.js
@@ -1,30 +1,20 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import styles from './styles.scss';
 
-class TrackInfo extends React.Component {
+const TrackInfo = ({ track, artist, artistInfoSearchByName, history }) => {
+  const handleInfoSearch = useCallback(() => {
+    artistInfoSearchByName(artist, history);
+  }, [artist, history]);
 
-  render() {
-    let {
-      track,
-      artist,
-      artistInfoSearchByName,
-      history
-    } = this.props;
-    return (
-      <div className={styles.track_info_container}>
-        <div className={styles.track_name}>{track}</div>
-        <a
-          onClick={() => artistInfoSearchByName(artist, history)}
-          href='#'
-        >
-          <div className={styles.artist_name}>
-            {artist}
-          </div>
-        </a>
-      </div>
-    );
-  }
-}
+  return (
+    <div className={styles.track_info_container}>
+      <div className={styles.track_name}>{track}</div>
+      <a onClick={handleInfoSearch} href='#'>
+        <div className={styles.artist_name}>{artist}</div>
+      </a>
+    </div>
+  );
+};
 
 export default TrackInfo;
diff --git a/app/components/VerticalPanel/index.js b/app/components/VerticalPanel/index.js
index 6f7759adec..6d2fc0e64e 100644
--- a/app/components/VerticalPanel/index.js
+++ b/app/components/VerticalPanel/index.js
@@ -1,15 +1,6 @@
 import React from 'react';
 
-import styles from './styles.css';
-
-class VerticalPanel extends React.Component {
-  render() {
-    return (
-      <div className={this.props.className}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
+const VerticalPanel = ({ className, children }) => (
+  <div className={className}>{children}</div>
+);
 export default VerticalPanel;
diff --git a/app/components/WindowControls/WindowButton/index.js b/app/components/WindowControls/WindowButton/index.js
index 00abc0db8c..f6fb26082f 100644
--- a/app/components/WindowControls/WindowButton/index.js
+++ b/app/components/WindowControls/WindowButton/index.js
@@ -3,19 +3,14 @@ import FontAwesome from 'react-fontawesome';
 
 import styles from './styles.css';
 
-class WindowButton extends React.Component {
-
-  render() {
-    return (
-      <div
-        style={{backgroundColor: this.props.color}}
-        className={styles.window_button_container}
-        onClick={this.props.onClick}
-      >
-        <FontAwesome name={this.props.icon} />
-      </div>
-    );
-  }
-}
+const WindowButton = ({ color, icon, onClick }) => (
+  <div
+    style={{ backgroundColor: color }}
+    className={styles.window_button_container}
+    onClick={onClick}
+  >
+    <FontAwesome name={icon} />
+  </div>
+);
 
 export default WindowButton;
diff --git a/app/components/WindowControls/index.js b/app/components/WindowControls/index.js
index 0f0555338c..5d3a2bb29e 100644
--- a/app/components/WindowControls/index.js
+++ b/app/components/WindowControls/index.js
@@ -2,33 +2,15 @@ import React from 'react';
 
 import styles from './styles.css';
 
-import {
-  sendClose,
-  sendMinimize,
-  sendMaximize
-} from '../../mpris';
+import { sendClose, sendMinimize, sendMaximize } from '../../mpris';
 import WindowButton from './WindowButton';
 
-class WindowControls extends React.Component {
-
-  render() {
-    return (
-      <div className={styles.window_controls_container}>
-        <WindowButton
-          icon='window-minimize'
-          onClick={sendMinimize}
-        />
-        <WindowButton
-          icon='window-maximize'
-          onClick={sendMaximize}
-        />
-        <WindowButton
-          icon='close'
-          onClick={sendClose}
-        />
-      </div>
-    );
-  }
-}
+const WindowControls = () => (
+  <div className={styles.window_controls_container}>
+    <WindowButton icon='window-minimize' onClick={sendMinimize} />
+    <WindowButton icon='window-maximize' onClick={sendMaximize} />
+    <WindowButton icon='close' onClick={sendClose} />
+  </div>
+);
 
 export default WindowControls;
diff --git a/app/constants/settings.js b/app/constants/settings.js
index 8533321ba9..eb5d441b6b 100644
--- a/app/constants/settings.js
+++ b/app/constants/settings.js
@@ -1,39 +1,39 @@
 import settingType from './settingsEnum';
 
-module.exports = [
+export default [
   {
     name: 'loopAfterQueueEnd',
-    category: 'Playback',
+    category: 'playback',
     type: settingType.BOOLEAN,
-    prettyName: 'Loop after playing the last queue item',
+    prettyName: 'loop-after-queue-end',
     default: false
   },
   {
     name: 'shuffleQueue',
-    category: 'Playback',
+    category: 'playback',
     type: settingType.BOOLEAN,
-    prettyName: 'Shuffle songs',
+    prettyName: 'shuffle-queue',
     default: false
   },
   {
     name: 'autoradio',
-    category: 'Playback',
+    category: 'playback',
     type: settingType.BOOLEAN,
-    prettyName: 'Autoradio',
+    prettyName: 'autoradio',
     default: true
   },
   {
     name: 'notificationTimeout',
-    category: 'Program settings',
+    category: 'program-settings',
     type: settingType.NUMBER,
-    prettyName: 'Notification timeout',
+    prettyName: 'notification-timeout',
     default: 3
   },
   {
     name: 'autoradioCraziness',
-    category: 'Playback',
+    category: 'playback',
     type: settingType.NUMBER,
-    prettyName: 'Autoradio craziness',
+    prettyName: 'autoradio-craziness',
     default: 10,
     min: 1,
     max: 100,
@@ -41,32 +41,57 @@ module.exports = [
   },
   {
     name: 'disableGPU',
-    category: 'Program settings',
+    category: 'program-settings',
     type: settingType.BOOLEAN,
-    prettyName: 'Disable hardware rendering (might fix issues with dragging elements and flashing screen)',
+    prettyName: 'disable-gpu',
     default: false
   },
   {
     name: 'framelessWindow',
-    category: 'Program settings',
+    category: 'program-settings',
     type: settingType.BOOLEAN,
-    prettyName: 'Frameless window (requires restart)',
+    prettyName: 'frameless-window',
     default: true
   },
   {
     name: 'compactMenuBar',
-    category: 'Display',
+    category: 'display',
     type: settingType.BOOLEAN,
-    prettyName: 'Use compact style for menu bar',
+    prettyName: 'compact-menu-bar',
     default: false
   },
   {
     name: 'compactQueueBar',
-    category: 'Display',
+    category: 'display',
     type: settingType.BOOLEAN,
-    prettyName: 'Use compact style for queue bar',
+    prettyName: 'compact-queue-bar',
     default: false
   },
+  {
+    name: 'api.enabled',
+    category: 'http',
+    type: settingType.BOOLEAN,
+    prettyName: 'enable-api',
+    default: true
+  },  
+  {
+    name: 'api.port',
+    category: 'http',
+    type: settingType.NUMBER,
+    prettyName: 'api-port',
+    default: 8080,
+    min: 1024,
+    max: 49151
+  },
+  {
+    name: 'language',
+    category: 'program-settings',
+    type: settingType.LIST,
+    prettyName: 'language',
+    placeholder: 'language-placeholder',
+    options: ['en', 'fr'],
+    default: undefined
+  }
   // To be enabled when MPD integration is ready
   // {
   //   name: 'mpd.host',
@@ -82,20 +107,4 @@ module.exports = [
   //   prettyName: 'MPD HTTP stream address',
   //   default: 'localhost:8888'
   // },
-  {
-    name: 'api.enabled',
-    category: 'HTTP API',
-    type: settingType.BOOLEAN,
-    prettyName: 'Enable the api',
-    default: true
-  },  
-  {
-    name: 'api.port',
-    category: 'HTTP API',
-    type: settingType.NUMBER,
-    prettyName: 'Port used by the api',
-    default: 8080,
-    min: 1024,
-    max: 49151
-  }
 ];
diff --git a/app/constants/settingsEnum.js b/app/constants/settingsEnum.js
index 7754700a84..82291e3acc 100644
--- a/app/constants/settingsEnum.js
+++ b/app/constants/settingsEnum.js
@@ -1,5 +1,6 @@
 export default {
   BOOLEAN: 'boolean',
   STRING: 'string',
-  NUMBER: 'number'
+  NUMBER: 'number',
+  LIST: 'list'
 };
diff --git a/app/containers/AlbumViewContainer/index.js b/app/containers/AlbumViewContainer/index.js
index 6632d1ffdc..322d8b7f8e 100644
--- a/app/containers/AlbumViewContainer/index.js
+++ b/app/containers/AlbumViewContainer/index.js
@@ -8,35 +8,24 @@ import * as PlayerActions from '../../actions/player';
 
 import AlbumView from '../../components/AlbumView';
 
-let _ = require('lodash');
-
-class AlbumViewContainer extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      actions,
-      match,
-      history,
-      albumDetails,
-      musicSources
-    } = this.props;
-    return (
-      <AlbumView
-        album={albumDetails[match.params.albumId]}
-        artistInfoSearch={actions.artistInfoSearch}
-        addToQueue={actions.addToQueue}
-        musicSources={musicSources}
-        selectSong={actions.selectSong}
-        startPlayback={actions.startPlayback}
-        clearQueue={actions.clearQueue}
-        history={history}
-      />
-    );
-  }
-}
+const AlbumViewContainer = ({
+  actions,
+  match,
+  history,
+  albumDetails,
+  musicSources
+}) => (
+  <AlbumView
+    album={albumDetails[match.params.albumId]}
+    artistInfoSearch={actions.artistInfoSearch}
+    addToQueue={actions.addToQueue}
+    musicSources={musicSources}
+    selectSong={actions.selectSong}
+    startPlayback={actions.startPlayback}
+    clearQueue={actions.clearQueue}
+    history={history}
+  />
+);
 
 function mapStateToProps(state) {
   return {
@@ -47,8 +36,16 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(Object.assign({}, Actions, QueueActions, PlayerActions), dispatch)
+    actions: bindActionCreators(
+      Object.assign({}, Actions, QueueActions, PlayerActions),
+      dispatch
+    )
   };
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AlbumViewContainer));
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(AlbumViewContainer)
+);
diff --git a/app/containers/DashboardContainer/index.js b/app/containers/DashboardContainer/index.js
index ba73c611bc..8fb2364c72 100644
--- a/app/containers/DashboardContainer/index.js
+++ b/app/containers/DashboardContainer/index.js
@@ -10,29 +10,23 @@ import * as ToastActions from '../../actions/toasts';
 
 import Dashboard from '../../components/Dashboard';
 
-class DashboardContainer extends React.Component {
-  render () {
-    let {
-      actions,
-      dashboard,
-      settings,
-      history,
-      musicSources
-    } = this.props;
+const DashboardContainer = ({
+  actions,
+  dashboard,
+  settings,
+  history,
+  musicSources
+}) => (
+  <Dashboard
+    dashboardData={dashboard}
+    history={history}
+    settings={settings}
+    actions={actions}
+    musicSources={musicSources}
+  />
+);
 
-    return (
-      <Dashboard
-        dashboardData={dashboard}
-        history={history}
-        settings={settings}
-        actions={actions}
-        musicSources={musicSources}
-      />
-    );
-  }
-}
-
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   return {
     dashboard: state.dashboard,
     musicSources: state.plugin.plugins.musicSources,
@@ -40,7 +34,7 @@ function mapStateToProps (state) {
   };
 }
 
-function mapDispatchToProps (dispatch) {
+function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(
       Object.assign(
diff --git a/app/containers/FavoritesContainer/index.js b/app/containers/FavoritesContainer/index.js
index 99ca014d03..1559f15ffc 100644
--- a/app/containers/FavoritesContainer/index.js
+++ b/app/containers/FavoritesContainer/index.js
@@ -5,15 +5,10 @@ import { bindActionCreators } from 'redux';
 import _ from 'lodash';
 
 import * as FavoritesActions from '../../actions/favorites';
-import * as QueueActions from '../../actions/queue';
-import * as PlayerActions from '../../actions/player';
-import * as ToastActions from '../../actions/toasts';
 
 import FavoriteTracksView from '../../components/FavoriteTracksView';
 
 const TRACKS_PATH = 'tracks';
-const ARTISTS_PATH = 'artists';
-const ALBUMS_PATH = 'albums';
 
 class FavoritesContainer extends React.Component {
   constructor(props) {
diff --git a/app/containers/LibraryViewContainer/index.js b/app/containers/LibraryViewContainer/index.js
index 49cba40bba..d352a402e7 100644
--- a/app/containers/LibraryViewContainer/index.js
+++ b/app/containers/LibraryViewContainer/index.js
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { sortBy } from 'lodash';
+import _ from 'lodash';
 
 import LibraryView from '../../components/LibraryView';
 import * as LocalActions from '../../actions/local';
@@ -19,10 +19,10 @@ function mapStateToProps(state) {
   let tracks;
   switch (state.local.sortBy) {
   case 'artist':
-    tracks = sortBy(filteredTracks, track => track.artist.name);
+    tracks = _.sortBy(filteredTracks, track => track.artist.name);
     break;
   case 'name':
-    tracks = sortBy(filteredTracks, track => track.name);
+    tracks = _.sortBy(filteredTracks, track => track.name);
     break;
   default:
     tracks = filteredTracks;
diff --git a/app/containers/LyricsContainer/index.js b/app/containers/LyricsContainer/index.js
index 81b4788280..ca25c5c15f 100644
--- a/app/containers/LyricsContainer/index.js
+++ b/app/containers/LyricsContainer/index.js
@@ -5,28 +5,31 @@ import { bindActionCreators } from 'redux';
 import LyricsView from '../../components/LyricsView';
 import * as LyricsActions from '../../actions/lyrics';
 
-class LyricsContainer extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render () {
-    return (
-      <LyricsView track={_.get(this.props.queue.queueItems, this.props.queue.currentSong, null)} lyrics={this.props.lyrics} />
-    );
-  }
-}
+const LyricsContainer = ({ queue, lyrics }) => (
+  <LyricsView
+    track={_.get(
+      queue.queueItems,
+      queue.currentSong,
+      null
+    )}
+    lyrics={lyrics}
+  />
+);
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   return {
     queue: state.queue,
     lyrics: state.lyrics
   };
 }
 
-function mapDispatchToProps (dispatch) {
+function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(LyricsActions, dispatch)
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(LyricsContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LyricsContainer);
diff --git a/app/containers/PluginsContainer/index.js b/app/containers/PluginsContainer/index.js
index cf5b00d2bd..6d6a32204d 100644
--- a/app/containers/PluginsContainer/index.js
+++ b/app/containers/PluginsContainer/index.js
@@ -5,26 +5,13 @@ import { bindActionCreators } from 'redux';
 import PluginsView from '../../components/PluginsView';
 import * as PluginsActions from '../../actions/plugins';
 
-class PluginsContainer extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      actions,
-      plugin
-    } = this.props;
-
-    return (
-      <PluginsView
-        actions={actions}
-        plugins={plugin.plugins}
-        defaultMusicSource={plugin.defaultMusicSource}
-      />
-    );
-  }
-}
+const PluginsContainer = ({ actions, plugin }) => (
+  <PluginsView
+    actions={actions}
+    plugins={plugin.plugins}
+    defaultMusicSource={plugin.defaultMusicSource}
+  />
+);
 
 function mapStateToProps(state) {
   return {
@@ -38,4 +25,7 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(PluginsContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PluginsContainer);
diff --git a/app/containers/SearchResultsContainer/index.js b/app/containers/SearchResultsContainer/index.js
index f8bfcf05f5..4ffdff1ee9 100644
--- a/app/containers/SearchResultsContainer/index.js
+++ b/app/containers/SearchResultsContainer/index.js
@@ -7,35 +7,35 @@ import * as PlayerActions from '../../actions/player';
 
 import SearchResults from '../../components/SearchResults';
 
-class SearchResultsContainer extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render () {
-    let { actions, musicSources } = this.props;
+const SearchResultsContainer = ({
+  artistSearchResults,
+  albumSearchResults,
+  trackSearchResults,
+  playlistSearchResults,
+  unifiedSearchStarted,
+  playlistSearchStarted,
+  actions,
+  musicSources
+}) => (
+  <SearchResults
+    artistSearchResults={artistSearchResults}
+    albumSearchResults={albumSearchResults}
+    trackSearchResults={trackSearchResults}
+    playlistSearchResults={playlistSearchResults}
+    unifiedSearchStarted={unifiedSearchStarted}
+    playlistSearchStarted={playlistSearchStarted}
+    albumInfoSearch={actions.albumInfoSearch}
+    artistInfoSearch={actions.artistInfoSearch}
+    history={history}
+    addToQueue={actions.addToQueue}
+    clearQueue={actions.clearQueue}
+    startPlayback={actions.startPlayback}
+    selectSong={actions.selectSong}
+    musicSources={musicSources}
+  />
+);
 
-    return (
-      <SearchResults
-        artistSearchResults={this.props.artistSearchResults}
-        albumSearchResults={this.props.albumSearchResults}
-        trackSearchResults={this.props.trackSearchResults}
-        playlistSearchResults={this.props.playlistSearchResults}
-        unifiedSearchStarted={this.props.unifiedSearchStarted}
-        playlistSearchStarted={this.props.playlistSearchStarted}
-        albumInfoSearch={this.props.actions.albumInfoSearch}
-        artistInfoSearch={this.props.actions.artistInfoSearch}
-        history={this.props.history}
-        addToQueue={this.props.actions.addToQueue}
-        clearQueue={this.props.actions.clearQueue}
-        startPlayback={this.props.actions.startPlayback}
-        selectSong={this.props.actions.selectSong}
-        musicSources={musicSources}
-      />
-    );
-  }
-}
-
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   return {
     artistSearchResults: state.search.artistSearchResults,
     albumSearchResults: state.search.albumSearchResults,
@@ -47,7 +47,7 @@ function mapStateToProps (state) {
   };
 }
 
-function mapDispatchToProps (dispatch) {
+function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(
       Object.assign({}, Actions, QueueActions, PlayerActions),
diff --git a/app/containers/TagViewContainer/index.js b/app/containers/TagViewContainer/index.js
index 4686bb86ff..7ed5050219 100644
--- a/app/containers/TagViewContainer/index.js
+++ b/app/containers/TagViewContainer/index.js
@@ -9,46 +9,38 @@ import * as PlayerActions from '../../actions/player';
 
 import TagView from '../../components/TagView';
 
-class TagViewContainer extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const TagViewContainer = ({ actions, history, match, tags, musicSources }) => (
+  <TagView
+    loadTagInfo={actions.loadTagInfo}
+    artistInfoSearchByName={actions.artistInfoSearchByName}
+    albumInfoSearchByName={actions.albumInfoSearchByName}
+    history={history}
+    tag={match.params.tagName}
+    tags={tags}
+    musicSources={musicSources}
+    addToQueue={actions.addToQueue}
+  />
+);
 
-  render () {
-    let {
-      actions,
-      match,
-      history,
-      tags,
-      musicSources
-    } = this.props;
-
-    return (
-      <TagView
-        loadTagInfo={actions.loadTagInfo}
-        artistInfoSearchByName={actions.artistInfoSearchByName}
-        albumInfoSearchByName={actions.albumInfoSearchByName}
-        history={history}
-        tag={match.params.tagName}
-        tags={tags}
-        musicSources={musicSources}
-        addToQueue={actions.addToQueue}
-      />
-    );
-  }
-}
-
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   return {
     tags: state.tags,
     musicSources: state.plugin.plugins.musicSources
   };
 }
 
-function mapDispatchToProps (dispatch) {
+function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(Object.assign({}, Actions, TagActions, QueueActions, PlayerActions), dispatch)
+    actions: bindActionCreators(
+      Object.assign({}, Actions, TagActions, QueueActions, PlayerActions),
+      dispatch
+    )
   };
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TagViewContainer));
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(TagViewContainer)
+);
diff --git a/app/containers/ToastContainer/index.js b/app/containers/ToastContainer/index.js
index 8b6ba2f193..4c93572777 100644
--- a/app/containers/ToastContainer/index.js
+++ b/app/containers/ToastContainer/index.js
@@ -5,24 +5,8 @@ import * as ToastActions from '../../actions/toasts';
 
 import ToastComponent from '../../components/ToastComponent';
 
-class ToastContainer extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const ToastContainer = ({ toasts }) => <ToastComponent toasts={toasts.notifications} />;
 
-  render() {
-    let {
-      actions,
-      toasts
-    } = this.props;
-
-    return (
-      <ToastComponent
-        toasts={toasts.notifications}
-      />
-    );
-  }
-}
 function mapStateToProps(state) {
   return {
     toasts: state.toasts
@@ -31,10 +15,7 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(
-      Object.assign({}, ToastActions),
-      dispatch
-    )
+    actions: bindActionCreators(Object.assign({}, ToastActions), dispatch)
   };
 }
 
diff --git a/app/i18n.js b/app/i18n.js
new file mode 100644
index 0000000000..0ee07c2f25
--- /dev/null
+++ b/app/i18n.js
@@ -0,0 +1,35 @@
+import i18n from 'i18next';
+import { remote } from 'electron';
+
+import { getOption, setOption } from './persistence/store';
+
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+
+const languageDetector = {
+  init: Function.prototype,
+  type: 'languageDetector',
+  detect: () => getOption('language') || remote.app.getLocale(),
+  cacheUserLanguage: Function.prototype
+};
+
+export const setupI18n = () => {
+  return i18n.use(languageDetector).init({
+    fallbackLng: 'en',
+    debug: process.env.NODE_ENV !== 'production',
+    resources: {
+      en,
+      fr
+    },
+    interpolation: {
+      escapeValue: false
+    },
+    react: {
+      wait: true
+    }
+  });
+};
+
+i18n.on('languageChanged', lng => setOption('language', lng));
+
+export default i18n;
diff --git a/app/index.js b/app/index.js
index 2d347ce1e4..03c6561ae8 100644
--- a/app/index.js
+++ b/app/index.js
@@ -4,7 +4,9 @@ import ReactDOM from 'react-dom';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { AppContainer } from 'react-hot-loader';
+import { I18nextProvider } from 'react-i18next';
 
+import i18n, { setupI18n } from './i18n';
 import App from './App';
 import configureStore from './store/configureStore';
 
@@ -14,14 +16,18 @@ const store = configureStore();
 process.env.NODE_ENV === 'production' &&
   Raven.config('https://2fb5587831994721a8b5f77bf6010679@sentry.io/1256142').install();
 
-const render = Component => {
+const render = async Component => {
+  await setupI18n();
+
   ReactDOM.render(
     <AppContainer>
-      <Provider store={store}>
-        <MemoryRouter>
-          <Component />
-        </MemoryRouter>
-      </Provider>
+      <I18nextProvider i18n={i18n}>
+        <Provider store={store}>
+          <MemoryRouter>
+            <Component />
+          </MemoryRouter>
+        </Provider>
+      </I18nextProvider>
     </AppContainer>,
     document.getElementById('react_root')
   );
@@ -30,7 +36,7 @@ const render = Component => {
 render(App);
 
 if (module.hot) {
-  module.hot.accept( () => {
+  module.hot.accept(() => {
     render(App);
   });
 }
diff --git a/app/locales/en.json b/app/locales/en.json
new file mode 100644
index 0000000000..469ab33eee
--- /dev/null
+++ b/app/locales/en.json
@@ -0,0 +1,164 @@
+{
+  "album": {
+    "queue": "Add album to queue"
+  },
+  "app": {
+    "collection": "Collection",
+    "dashboard": "Dashboard",
+    "downloads": "Downloads",
+    "equalizer": "Equalizer",
+    "favorite": "Favorite Tracks",
+    "library": "Local Library",
+    "lyrics": "Lyrics",
+    "playlists": "Playlists",
+    "plugins": "Plugins",
+    "search": "Search Results",
+    "settings": "Settings"
+  },
+  "artist": {
+    "count": "Play counts",
+    "queue": "Add all tracks to queue",
+    "similar": "Similar artists",
+    "title": "Title",
+    "tour": "On tour"
+  },
+  "dashboard": {
+    "best": "Best new music",
+    "genres": "Genres",
+    "news": "News",
+    "top": "Top Tracks"
+  },
+  "downloads": {
+    "clear": "Clear finished tracks",
+    "completion": "Completion",
+    "empty": "Downloads are empty.",
+    "empty-help": "Add something to your download queue and you'll see it here!",
+    "header": "Downloads",
+    "name": "Name",
+    "status": "Status"
+  },
+  "favorites": {
+    "artist": "Artist",
+    "empty": "No favorites added.",
+    "empty-help": "Try favoriting some tracks and they will appear here!",
+    "header": "Your favorite tracks",
+    "title": "Title"
+  },
+  "help": {
+    "about": "About Nuclear Music Player",
+    "header": "Desktop music player for streaming from free sources",
+    "released": "released under AGPL-3.0",
+    "thanks": "Many thanks to our contributors on Github, your help was vital in creating this program."
+  },
+  "input-dialog": {
+    "cancel": "Cancel"
+  },
+  "library": {
+    "add": "Add folders",
+    "album": "Album",
+    "artist": "Artist",
+    "filter-placeholder": "Filter...",
+    "header": "Local Library",
+    "title": "Title"
+  },
+  "lyrics": {
+    "empty": "Nothing is playing.",
+    "empty-help": "Add some music to the queue to display the lyrics here!",
+    "not-found": "No lyrics were found for this song."
+  },
+  "option-control": {
+    "autoradio": "Autoradio",
+    "loop": "Loop",
+    "shuffle": "Shuffle"
+  },
+  "player": {
+    "next-button": "Next track button",
+    "play-pause-button": "Play/Pause button",
+    "previous-button": "Previous track button"
+  },
+  "playlists": {
+    "artist": "Artist",
+    "delete": "Delete this playlist",
+    "dialog-placeholder": "Playlist name...",
+    "empty": "No playlists.",
+    "rename": "Rename this playlist",
+    "songs": "{{total}} song",
+    "songs_plural": "{{total}} songs",
+    "title": "Title"
+  },
+  "plugins": {
+    "header": "Plugins",
+    "placeholder": "Select the default music source:",
+    "subtitle": "Music sources"
+  },
+  "queue": {
+    "clear": "Clear queue",
+    "dialog-accept": "Save",
+    "dialog-placeholder": "Playlist name...",
+    "dialog-trigger": "Save as playlist",
+    "download": "Download",
+    "download-toast-content": "{{artist}} - {{title}} has been added to downloads.",
+    "download-toast-title": "Track added to download",
+    "favorite-add": "Add to favorites",
+    "header": "Queue",
+    "header-track": "Current track",
+    "id": "Stream ID:",
+    "loading": "Stream still loading.",
+    "playlist-add": "Add to playlist",
+    "playlist-toast-content": "Playlist {{name}} has been created.",
+    "playlist-toast-title": "Playlist created",
+    "title": "Title:"
+  },
+  "search": {
+    "album": "Album",
+    "album_plural": "Albums",
+    "artist": "Artist",
+    "artist_plural": "Artists",
+    "empty": "Nothing found.",
+    "placeholder": "Search...",
+    "playlist": "Playlist",
+    "playlist_plural": "Playlists",
+    "queue-add": "Add all tracks to queue",
+    "track": "Track",
+    "track_plural": "Tracks"
+  },
+  "settings": {
+    "api-port": "Port used by the api",
+    "autoradio": "Autoradio",
+    "autoradio-craziness": "Autoradio craziness",
+    "compact-menu-bar": "Use compact style for menu bar",
+    "compact-queue-bar": "Use compact style for queue bar",
+    "disable-gpu": "Disable hardware rendering (might fix issues with dragging elements and flashing screen)",
+    "display": "Display",
+    "enable-api": "Enable the api",
+    "frameless-window": "Frameless window (requires restart)",
+    "github-connect": "Log in with Github",
+    "github-description": "Log in via Github to be able to create and share your playlists online (upcoming feature).",
+    "github-title": "Github",
+    "http": "HTTP API",
+    "language": "Language",
+    "language-placeholder": "Pick a language",
+    "lastfm-connect": "Connect with Last.fm",
+    "lastfm-description": "In order to enable scrobbling, you first have to connect and authorize Nuclear on Last.fm, then click log in.",
+    "lastfm-enable": "Enable scrobbling to Last.fm",
+    "lastfm-title": "Last.fm",
+    "login": "Log in",
+    "logout": "Log out",
+    "loop-after-queue-end": "Loop after playing the last queue item",
+    "notification-timeout": "Notification timeout",
+    "notlogged": "Not logged in",
+    "playback": "Playback",
+    "program-settings": "Program settings",
+    "shuffle-queue": "Shuffle songs",
+    "social": "Social",
+    "user": "User:"
+  },
+  "tags": {
+    "albums": "Top Albums",
+    "artist": "Artist",
+    "artists": "Top Artists",
+    "duration": "Duration",
+    "queue-add": "Add all tracks to queue",
+    "title": "Title"
+  }
+}
\ No newline at end of file
diff --git a/app/locales/fr.json b/app/locales/fr.json
new file mode 100644
index 0000000000..fdd22f0247
--- /dev/null
+++ b/app/locales/fr.json
@@ -0,0 +1,164 @@
+{
+  "album": {
+    "queue": "Ajouter l'album à la liste de lecture"
+  },
+  "app": {
+    "collection": "Collection",
+    "dashboard": "Tableau de bord",
+    "downloads": "Téléchargements",
+    "equalizer": "Equalizer",
+    "favorite": "Favoris",
+    "library": "Bibliothèque locale",
+    "lyrics": "Paroles",
+    "playlists": "Playlists",
+    "plugins": "Plugins",
+    "search": "Recherche",
+    "settings": "Règlages"
+  },
+  "artist": {
+    "count": "compteur",
+    "queue": "Ajouter toutes les pistes à la liste de lecture",
+    "similar": "Artistes similaire",
+    "title": "Titre",
+    "tour": "En tournée"
+  },
+  "dashboard": {
+    "best": "Best new music",
+    "genres": "Genres",
+    "news": "News",
+    "top": "Top Tracks"
+  },
+  "downloads": {
+    "clear": "Supprimer les téléchargements tèrminer",
+    "completion": "Completion",
+    "empty": "Aucun Téléchargement.",
+    "empty-help": "Ajoutez quelque chose dans votre file de téléchargement et vous le verez apparaitre ici!",
+    "header": "Téléchargements",
+    "name": "Nom",
+    "status": "Status"
+  },
+  "favorites": {
+    "artist": "Artiste",
+    "empty": "Aucun favoris.",
+    "empty-help": "Essayez d'ajouter des pistes en favoris, elles apparaitront ici!",
+    "header": "Vos morceaux favoris",
+    "title": "Titre"
+  },
+  "help": {
+    "about": "A propos de \"Nuclear Music Player\"",
+    "header": "Application de bureau qui joue de la musique à partir de sources libre",
+    "released": "distribué sous licence AGPL-3.0",
+    "thanks": "Un grand merci à tous nos contributeurs sur Github."
+  },
+  "input-dialog": {
+    "cancel": "Annuler"
+  },
+  "library": {
+    "add": "Ajouter des dossiers",
+    "album": "Album",
+    "artist": "Artiste",
+    "filter-placeholder": "Filtrer...",
+    "header": "Bibliothèque locale",
+    "title": "Titre"
+  },
+  "lyrics": {
+    "empty": "Aucun morceau n'est joué.",
+    "empty-help": "Ajouter un morceau dans la file et vous verez les paroles s'afficher ici!",
+    "not-found": "Aucune paroles n'ont été trouver pour ce morceau."
+  },
+  "option-control": {
+    "autoradio": "Autoradio",
+    "loop": "Boucle",
+    "shuffle": "Aléatoire"
+  },
+  "player": {
+    "next-button": "Next track button",
+    "play-pause-button": "Play/Pause button",
+    "previous-button": "Previous track button"
+  },
+  "playlists": {
+    "artist": "Artiste",
+    "delete": "Supprimer cette playlist",
+    "dialog-placeholder": "Nom de la playlist...",
+    "empty": "Aucune playlist.",
+    "rename": "Renomer cette playlist",
+    "songs": "{{total}} piste",
+    "songs_plural": "{{total}} pistes",
+    "title": "Titre"
+  },
+  "plugins": {
+    "header": "Plugins",
+    "placeholder": "Selectionner la source de musique par defaut:",
+    "subtitle": "Sources de musique"
+  },
+  "queue": {
+    "clear": "Vider la file",
+    "dialog-accept": "Sauvegarder",
+    "dialog-placeholder": "Nom de la playlist...",
+    "dialog-trigger": "Sauvegarder en tant que playlist",
+    "download": "Télécharger",
+    "download-toast-content": "{{artist}} - {{title}} a été ajouter aux téléchargements.",
+    "download-toast-title": "Piste ajoutée aux téléchargements",
+    "favorite-add": "Ajouter aux favoris",
+    "header": "File de lecture",
+    "header-track": "Piste courante",
+    "id": "id du flux:",
+    "loading": "Flux en chargement.",
+    "playlist-add": "Ajouter à la playlist",
+    "playlist-toast-content": "La playlist {{name}} a été créer.",
+    "playlist-toast-title": "Playliste crée",
+    "title": "Titre:"
+  },
+  "search": {
+    "album": "Album",
+    "album_plural": "Albums",
+    "artist": "Artiste",
+    "artist_plural": "Artistes",
+    "empty": "Aucun résultat.",
+    "placeholder": "Rechercher...",
+    "playlist": "Playlist",
+    "playlist_plural": "Playlists",
+    "queue-add": "Ajouter toutes les pistes à la file",
+    "track": "Piste",
+    "track_plural": "Pistes"
+  },
+  "settings": {
+    "api-port": "Port utilisé par l'api",
+    "autoradio": "Autoradio",
+    "autoradio-craziness": "Niveau de folie de l'autoradio",
+    "compact-menu-bar": "Utiliser le style compact pour la barre de menu",
+    "compact-queue-bar": "Utiliser le style compact pour la barre de file",
+    "disable-gpu": "Desactiver l'accélération materielle (peut resoudre certains bug d'affichage)",
+    "display": "Affichage",
+    "enable-api": "Activer l'api",
+    "frameless-window": "Fenêtre sans bord (necessite un reémarage)",
+    "github-connect": "Se connecter avec Github",
+    "github-description": "Se connecter avec Github afin d'être capable de partager des playlists en ligne (en cours de dévelopement).",
+    "github-title": "Github",
+    "http": "HTTP API",
+    "language": "Language",
+    "language-placeholder": "Chaoisir une langue",
+    "lastfm-connect": "Connecter avec Last.fm",
+    "lastfm-description": "Afin d'activer le scrobbler, vous devez vous connecter et authoriser Nuclear sur lastfm.",
+    "lastfm-enable": "Activer le scrobbler de Last.fm",
+    "lastfm-title": "Last.fm",
+    "login": "Se connecter",
+    "logout": "Se decoonecter",
+    "loop-after-queue-end": "Boucle à la fin de la liste de lecture",
+    "notification-timeout": "Durée de vie des notifications",
+    "notlogged": "Non connecté",
+    "playback": "Playback",
+    "program-settings": "Application",
+    "shuffle-queue": "Ordre aléatoire",
+    "social": "Social",
+    "user": "Utilisateur:"
+  },
+  "tags": {
+    "albums": "Top Albums",
+    "artist": "Artiste",
+    "artists": "Top Artistes",
+    "duration": "Durée",
+    "queue-add": "AAjouter toutes les pistes dans la file",
+    "title": "Titre"
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 5c43a5895f..719f8ce2aa 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "build:windows": "electron-builder -c.extraMetadata.main=dist/bundle.electron.js --windows",
     "build:macos": "electron-builder -c.extraMetadata.main=dist/bundle.electron.js --macos",
     "build:all": "electron-builder -c.extraMetadata.main=dist/bundle.electron.js -mwl",
-    "lint": "eslint app"
+    "lint": "eslint app",
+    "i18n": "sync-i18n --files 'app/locales/*.json' --primary en --languages fr --space 2"
   },
   "repository": {
     "type": "git",
@@ -62,6 +63,7 @@
     "font-awesome": "^4.7.0",
     "get-artist-title": "^1.1.1",
     "glob": "^7.1.3",
+    "i18next": "^17.0.1",
     "md5": "^2.2.1",
     "moment": "^2.20.1",
     "mousetrap": "^1.6.2",
@@ -74,6 +76,7 @@
     "react-beautiful-dnd": "^9.0.0",
     "react-dom": "^16.8.6",
     "react-hifi": "^2.1.2",
+    "react-i18next": "^10.11.0",
     "react-image": "^2.1.1",
     "react-image-smooth-loading": "^2.0.0",
     "react-range-progress": "^4.0.3",
@@ -94,6 +97,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
@@ -118,6 +122,7 @@
     "file-loader": "^1.1.6",
     "happypack": "^5.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "i18next-json-sync": "^2.3.1",
     "ignore-styles": "^5.0.1",
     "isomorphic-fetch": "^2.2.1",
     "jsdom": "^12.0.0",
@@ -129,7 +134,7 @@
     "npm-run-all": "^4.1.2",
     "react-debounce-input": "^3.2.0",
     "react-fontawesome": "^1.6.1",
-    "react-hot-loader": "next",
+    "react-hot-loader": "4.8",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",