diff --git a/.eslintignore b/.eslintignore
index 1ee2668e7..e69de29bb 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +0,0 @@
-src/components/SurahInfo/htmls/*
diff --git a/karma.conf.js b/karma.conf.js
index d21d97f4a..ac9b1aa40 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -13,17 +13,19 @@ module.exports = function(config) {
       'karma-sinon',
       'karma-webpack',
       'karma-chrome-launcher',
-      'karma-phantomjs-launcher'
+      'karma-phantomjs-launcher',
+      'karma-intl-shim'
     ],
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha', 'chai-sinon', 'sinon'],
+    frameworks: ['mocha', 'chai-sinon', 'sinon', 'intl-shim'],
 
     // list of files / patterns to load in the browser
     files: [
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
       './tests/polyfill/Event.js',
+      './node_modules/Intl/locale-data/jsonp/en-US.js',
       {pattern: 'static/images/*', watched: false, included: false, served: true},
 
       // Actual tests here
diff --git a/package.json b/package.json
index 6ffb5c67b..9c22ed569 100644
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
     "url-loader": "0.5.7",
     "webpack": "2.1.0-beta.20",
     "webpack-isomorphic-tools": "2.5.7",
+    "react-intl": "2.1.5",
     "winston": "1.1.2",
     "react-inlinesvg": "0.5.4"
   },
@@ -135,6 +136,7 @@
     "karma-chai": "0.1.0",
     "karma-chai-sinon": "0.1.5",
     "karma-chrome-launcher": "0.2.0",
+    "karma-intl-shim": "1.0.3",
     "karma-junit-reporter": "0.3.4",
     "karma-mocha": "0.2.0",
     "karma-phantomjs-launcher": "~0.2.1",
diff --git a/src/client.js b/src/client.js
index 2be5baf31..92ccb4b3c 100644
--- a/src/client.js
+++ b/src/client.js
@@ -12,6 +12,7 @@ import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
 import useScroll from 'react-router-scroll';
 import { ReduxAsyncConnect } from 'redux-connect';
 import { syncHistoryWithStore } from 'react-router-redux';
+import { IntlProvider } from 'react-intl';
 
 import debug from 'debug';
 
@@ -19,6 +20,7 @@ import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
+import {getLocalMessages} from './helpers/setLocal';
 
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
@@ -38,6 +40,9 @@ window.clearCookies = () => {
   reactCookie.remove('content');
   reactCookie.remove('audio');
   reactCookie.remove('isFirstTime');
+  reactCookie.remove('currentLocale');
+  reactCookie.remove('smartbanner-closed');
+  reactCookie.remove('smartbanner-installed');
 };
 
 match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
@@ -60,9 +65,11 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
   debug('client', 'React Rendering');
 
   ReactDOM.render(
-    <Provider store={store} key="provider">
+    <IntlProvider locale='en' messages={getLocalMessages()}>
+      <Provider  store={store} key="provider">
       {component}
-    </Provider>, mountNode, () => {
+      </Provider>
+    </IntlProvider>, mountNode, () => {
       debug('client', 'React Rendered');
     }
   );
diff --git a/src/components/Audioplayer/RepeatDropdown/index.js b/src/components/Audioplayer/RepeatDropdown/index.js
index 3f222830f..ef90239ae 100644
--- a/src/components/Audioplayer/RepeatDropdown/index.js
+++ b/src/components/Audioplayer/RepeatDropdown/index.js
@@ -6,12 +6,14 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 import FormControl from 'react-bootstrap/lib/FormControl';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
+import { intlShape, injectIntl } from 'react-intl';
 
 import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('../style.scss');
 
-export default class RepeatButton extends Component {
+class RepeatButton extends Component {
   static propTypes = {
     surah: PropTypes.object.isRequired,
     repeat: PropTypes.shape({
@@ -20,7 +22,8 @@ export default class RepeatButton extends Component {
       times: PropTypes.number
     }).isRequired,
     setRepeat: PropTypes.func.isRequired,
-    current: PropTypes.number.isRequired
+    current: PropTypes.number.isRequired,
+    intl: intlShape.isRequired
   };
 
   handleToggle = () => {
@@ -59,9 +62,13 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        From - To: <br />
         <ul className="list-inline" style={{marginBottom: 0}}>
           <li>
+            <LocaleFormattedMessage
+              id={ "player.repeat.rangeStart" }
+              defaultMessage={'From'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.from}
@@ -82,6 +89,11 @@ export default class RepeatButton extends Component {
           </li>
           <li> - </li>
           <li>
+            <LocaleFormattedMessage
+              id={ "player.repeat.rangeEnd" }
+              defaultMessage={'To'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.to}
@@ -107,7 +119,10 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        Ayah: <br />
+        <LocaleFormattedMessage
+          id={ "player.currentAyah" }
+          defaultMessage={'Ayah'}
+        />{' '}: <br />
         <FormControl
           componentClass="select"
           value={repeat.from}
@@ -141,10 +156,16 @@ export default class RepeatButton extends Component {
             onSelect={this.handleNavChange}
           >
             <NavItem eventKey={1} title="Single Ayah" className={style.pill}>
-              Single
+              <LocaleFormattedMessage
+                id={ "player.repeat.single" }
+                defaultMessage={'Single'}
+              />
             </NavItem>
             <NavItem eventKey={2} title="Range" className={style.pill}>
-              Range
+              <LocaleFormattedMessage
+                id={ "player.repeat.range" }
+                defaultMessage={'Range'}
+              />
             </NavItem>
           </Nav>
         </Col>
@@ -163,13 +184,16 @@ export default class RepeatButton extends Component {
   }
 
   renderTimes() {
-    const { repeat, setRepeat } = this.props;
+    const { repeat, setRepeat, intl } = this.props;
     const times = Array(10).join().split(',');
 
     return (
       <Row className={!repeat.from && style.disabled}>
         <Col md={12} style={{paddingTop: 15}}>
-          Times: <br />
+          <LocaleFormattedMessage
+            id={ "player.repeat.title" }
+            defaultMessage={'Repeat'}
+          />: <br />
           <FormControl
             componentClass="select"
             value={repeat.times}
@@ -178,8 +202,10 @@ export default class RepeatButton extends Component {
               times: parseInt(event.target.value, 10)
             })}
           >
-            <option value={Infinity}>
-              Loop
+            <option value={'Infinity'}>
+              {
+                intl.formatMessage({id: "player.repeat.loop", defaultMessage: 'Loop'})
+              }
             </option>
             {
               times.map((ayah, index) => (
@@ -204,7 +230,10 @@ export default class RepeatButton extends Component {
         title={
           <Row>
             <Col md={12} className="text-center">
-              Toggle repeat{'  '}
+              <LocaleFormattedMessage
+                id={ "player.repeat.title" }
+                defaultMessage={'TOGGLE REPEAT'}
+              />{'  '}
               <SwitchToggle
                 checked={!!repeat.from}
                 onToggle={this.handleToggle}
@@ -237,3 +266,5 @@ export default class RepeatButton extends Component {
     );
   }
 }
+
+export default injectIntl(RepeatButton);
diff --git a/src/components/Audioplayer/RepeatDropdown/spec.js b/src/components/Audioplayer/RepeatDropdown/spec.js
index 59ff9107a..5528ce645 100644
--- a/src/components/Audioplayer/RepeatDropdown/spec.js
+++ b/src/components/Audioplayer/RepeatDropdown/spec.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithIntl } from '../../../../tests/helpers/intl-enzyme-test-helper.js';
 
 import RepeatDropdown from './index';
 
@@ -11,7 +11,7 @@ const surah = {
 makeComponent = (repeat) => {
   setRepeat = sinon.stub();
 
-  component = mount(
+  component = mountWithIntl(
     <RepeatDropdown
       repeat={repeat}
       setRepeat={setRepeat}
@@ -20,7 +20,7 @@ makeComponent = (repeat) => {
     />
   );
 
-  overlay = mount(component.find('OverlayTrigger').first().props().overlay);
+  overlay = mountWithIntl(component.find('OverlayTrigger').first().props().overlay);
 }
 
 describe('<RepeatDropdown />', () => {
diff --git a/src/components/Audioplayer/ScrollButton/index.js b/src/components/Audioplayer/ScrollButton/index.js
index be57620d8..314212625 100644
--- a/src/components/Audioplayer/ScrollButton/index.js
+++ b/src/components/Audioplayer/ScrollButton/index.js
@@ -1,13 +1,17 @@
 import React, { PropTypes } from 'react';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('../style.scss');
 
 const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
   const tooltip = (
     <Tooltip id="scroll-button-tooltip">
-      Automatically scrolls to the currently playing ayah on transitions...
+      <LocaleFormattedMessage
+        id={ "player.scrollButtonTip" }
+        defaultMessage={'Automatically scrolls to the currently playing ayah on transitions...'}
+      />
     </Tooltip>
   );
 
diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
index 6ecea05dc..e5bc42620 100644
--- a/src/components/Audioplayer/index.js
+++ b/src/components/Audioplayer/index.js
@@ -11,6 +11,7 @@ import Track from './Track';
 import Segments from './Segments';
 import ScrollButton from './ScrollButton';
 import RepeatDropdown from './RepeatDropdown';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 // Helpers
 import debug from 'helpers/debug';
@@ -392,7 +393,12 @@ export class Audioplayer extends Component {
     if (isLoading || !currentAyah) {
       return (
         <li className={`${style.container} ${className}`}>
-          <div>Loading...</div>
+          <div>
+            <LocaleFormattedMessage
+              id='app.loading'
+              defaultMessage={ 'Loading...' }
+            />
+          </div>
         </li>
       );
     }
@@ -419,7 +425,10 @@ export class Audioplayer extends Component {
         </div>
         <ul className={`list-inline ${style.controls}`}>
           <li className={style.controlItem}>
-            Ayah: {currentAyah.split(':')[1]}
+            <LocaleFormattedMessage
+              id='player.currentAyah'
+              defaultMessage={ 'Ayah' }
+            />: {currentAyah.split(':')[1]}
           </li>
           <li className={style.controlItem}>
             {this.renderPreviousButton()}
diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index e6f4125de..6a9d18fa2 100644
--- a/src/components/Ayah/index.js
+++ b/src/components/Ayah/index.js
@@ -3,6 +3,7 @@ import Link from 'react-router/lib/Link';
 import { Element } from 'react-scroll';
 
 import Copy from 'components/Copy';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 import debug from 'helpers/debug';
 
@@ -61,12 +62,12 @@ export default class Ayah extends Component {
   }
 
   handlePlay(ayah) {
-    const { isPlaying, audioActions } = this.props;
+    const { isPlaying, audioActions, currentAyah } = this.props;
     const { pause, setAyah, play } = audioActions;
+    const  isPreviouslyPlaying = isPlaying;
 
-    if (isPlaying) {
+    if (isPlaying)
       pause();
-    }
     setAyah(ayah);
     play();
   }
@@ -100,9 +101,9 @@ export default class Ayah extends Component {
   }
 
   renderMedia() {
-    const { ayah, mediaActions } = this.props;
+    const { ayah, mediaActions, isSearched } = this.props;
 
-    if (!ayah.mediaContent) return false;
+    if (isSearched || !ayah.mediaContent) return false;
 
     return (
       <div>
@@ -122,7 +123,11 @@ export default class Ayah extends Component {
                     data-metrics-media-content-id={content.id}
                     data-metrics-media-content-ayah-key={ayah.ayahKey}
                   >
-                    Watch lecture by {content.resource.name}
+                    <LocaleFormattedMessage
+                      id={'ayah.media.lectureFrom'}
+                      defaultMessage={"Watch lecture by {from}"}
+                      values={{from: content.resource.name}}
+                      />
                   </a>
                 </small>
               </h2>
@@ -134,7 +139,7 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    const { ayah, audioActions, tooltip } = this.props;
+    const { ayah, audioActions, tooltip, isSearched } = this.props;
 
     if (!ayah.words[0].code) {
       return false;
@@ -163,7 +168,7 @@ export default class Ayah extends Component {
             id={id}
             rel="tooltip"
             onClick={event =>
-              audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
+              !isSearched && audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
             }
             data-key={`${word.ayahKey}:${position}`}
             className={`${className}`}
@@ -172,13 +177,12 @@ export default class Ayah extends Component {
           />
         );
       }
-
       const label = isLast ? { title: `Verse ${ayah.ayahNum}` } : {};
       return (
         <b
           id={id}
           onClick={event =>
-            audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
+            !isSearched && audioActions.setCurrentWord && audioActions.setCurrentWord(event.target.dataset.key)
           }
           data-key={`${word.ayahKey}:${position}`}
           rel="tooltip"
@@ -204,7 +208,8 @@ export default class Ayah extends Component {
   }
 
   renderPlayLink() {
-    const { isSearched, ayah } = this.props;
+    const { isSearched, ayah, currentAyah, isPlaying } = this.props;
+    const playing = ayah.ayahKey == currentAyah && isPlaying;
 
     if (!isSearched) {
       return (
@@ -212,7 +217,11 @@ export default class Ayah extends Component {
           onClick={() => this.handlePlay(ayah.ayahKey)}
           className="text-muted"
         >
-          <i className="ss-icon ss-play" /> Play
+          <i className={`ss-icon ${playing ? 'ss-pause' : 'ss-play'}`} />
+          <LocaleFormattedMessage
+            id={ playing ? 'actions.pause' : 'actions.play' }
+            defaultMessage={ playing ? 'Pause' : 'Play'}
+          />
         </a>
       );
     }
@@ -233,9 +242,9 @@ export default class Ayah extends Component {
   }
 
   renderBookmark() {
-    const { ayah, bookmarked, isAuthenticated, bookmarkActions } = this.props;
+    const { ayah, bookmarked, isAuthenticated, bookmarkActions, isSearched } = this.props;
 
-    if (!isAuthenticated) return false;
+    if (isSearched || !isAuthenticated) return false;
 
     if (bookmarked) {
       return (
@@ -243,7 +252,12 @@ export default class Ayah extends Component {
           onClick={() => bookmarkActions.removeBookmark(ayah.ayahKey)}
           className="text-muted"
         >
-          <strong><i className="ss-icon ss-bookmark" /> Bookmarked</strong>
+          <strong><i className="ss-icon ss-bookmark" />
+            <LocaleFormattedMessage
+              id={'ayah.bookmarked'}
+              defaultMessage={"Bookmarked"}
+            />
+          </strong>
         </a>
       );
     }
@@ -253,7 +267,11 @@ export default class Ayah extends Component {
         onClick={() => bookmarkActions.addBookmark(ayah.ayahKey)}
         className="text-muted"
       >
-        <i className="ss-icon ss-bookmark" /> Bookmark
+        <i className="ss-icon ss-bookmark" />
+        <LocaleFormattedMessage
+          id={'ayah.bookmark'}
+          defaultMessage={"Bookmark"}
+        />
       </a>
     );
   }
diff --git a/src/components/Ayah/style.scss b/src/components/Ayah/style.scss
index 57842c1d6..09bf14987 100644
--- a/src/components/Ayah/style.scss
+++ b/src/components/Ayah/style.scss
@@ -145,11 +145,6 @@
     margin-top: 5px;
     margin-bottom: 25px;
   }
-
-  .urdu, .punjabi{
-    direction: rtl;
-    font-family: 'Nafees';
-  }
 }
 
 .word_font{
diff --git a/src/components/ContentDropdown/index.js b/src/components/ContentDropdown/index.js
index 190b2915c..3806ed6d7 100644
--- a/src/components/ContentDropdown/index.js
+++ b/src/components/ContentDropdown/index.js
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 
 import MenuItem from 'react-bootstrap/lib/MenuItem';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 
 const style = require('./style.scss');
 
@@ -524,18 +526,25 @@ export default class ContentDropdown extends Component {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          Translations
+          <LocaleFormattedMessage id={'setting.translations.title'} defaultMessage={'Translations'}/>
+
           <span className="caret" />
         </button>
         <ul className="dropdown-menu" aria-labelledby="reciters-dropdown">
           {
             content.length &&
-              <MenuItem eventKey={1} onClick={this.handleRemoveContent}>Remove all</MenuItem>
+              <MenuItem eventKey={1} onClick={this.handleRemoveContent}>
+                <LocaleFormattedMessage id={'setting.translations.removeAll'} defaultMessage={'Remove all'}/>
+              </MenuItem>
           }
-          <MenuItem header>English</MenuItem>
+          <MenuItem header>
+            <LocaleFormattedMessage id={'setting.translations.english'} defaultMessage={'English'}/>
+          </MenuItem>
           {this.renderEnglishList()}
           <MenuItem divider />
-          <MenuItem header>Other Languages</MenuItem>
+          <MenuItem header>
+            <LocaleFormattedMessage id={'setting.translations.other'} defaultMessage={'Other Languages'}/>
+          </MenuItem>
           {this.renderLanguagesList()}
         </ul>
       </div>
diff --git a/src/components/ContentDropdown/spec.js b/src/components/ContentDropdown/spec.js
index e3cb8537b..a97516e36 100644
--- a/src/components/ContentDropdown/spec.js
+++ b/src/components/ContentDropdown/spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
+import { mountWithIntl } from '../../../tests/helpers/intl-enzyme-test-helper.js';
 
 import ContentDropdown, { slugs } from './index';
 
@@ -11,7 +11,7 @@ let defaultOption = 19
 describe('<ContentDropdown />', () => {
   beforeEach(() => {
     onOptionChange = sinon.stub();
-    wrapper = shallow(<ContentDropdown options={{content: [defaultOption]}} onOptionChange={onOptionChange} />);
+    wrapper = mountWithIntl(<ContentDropdown options={{content: [defaultOption]}} onOptionChange={onOptionChange} />);
   });
 
   it('should render', () => {
diff --git a/src/components/Copy/index.js b/src/components/Copy/index.js
index ab407ccfa..eaefa42c9 100644
--- a/src/components/Copy/index.js
+++ b/src/components/Copy/index.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 export default class Copy extends Component {
   static propTypes = {
@@ -26,7 +27,11 @@ export default class Copy extends Component {
         className={!isCopied && 'text-muted'}
         data-metrics-event-name="Ayah:Copy"
       >
-        <i className="ss-icon ss-attach" /> {isCopied ? 'Copied!' : 'Copy'}
+        <i className="ss-icon ss-attach" />
+        <LocaleFormattedMessage
+          id={ isCopied ? 'actions.copied' : 'actions.copy' }
+          defaultMessage={ isCopied ? 'Copied!' : 'Copy'}
+        />
       </a>
     );
   }
diff --git a/src/components/FontSizeDropdown/index.js b/src/components/FontSizeDropdown/index.js
index a17fc75a4..3da3d8ba6 100644
--- a/src/components/FontSizeDropdown/index.js
+++ b/src/components/FontSizeDropdown/index.js
@@ -5,6 +5,8 @@ import Popover from 'react-bootstrap/lib/Popover';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const style = require('./style.scss');
 
 export default class FontSizeDropdown extends Component {
@@ -29,8 +31,10 @@ export default class FontSizeDropdown extends Component {
   }
 
   renderPopup() {
+    const title = <LocaleFormattedMessage id={'setting.fontSize'} defaultMessage={'Font size'}/>
+
     return (
-      <Popover id="FontSizeDropdown" title="Font Size" className={style.popover}>
+      <Popover id="FontSizeDropdown" title={title} className={style.popover}>
         <Row>
           <Col xs={3}>
             <a onClick={() => this.handleOptionSelected('arabic', -1)} className="pointer">
@@ -38,7 +42,7 @@ export default class FontSizeDropdown extends Component {
             </a>
           </Col>
           <Col xs={6} className="text-center">
-            Arabic
+            <LocaleFormattedMessage id={'setting.fontSize.arabic'} defaultMessage={'Arabic'}/>
           </Col>
           <Col xs={3} className="text-right">
             <a onClick={() => this.handleOptionSelected('arabic', 1)} className="pointer">
@@ -54,7 +58,7 @@ export default class FontSizeDropdown extends Component {
             </a>
           </Col>
           <Col xs={6} className="text-center">
-            Translations
+            <LocaleFormattedMessage id={'setting.translations.title'} defaultMessage={'Translations'}/>
           </Col>
           <Col xs={3} className="text-right">
             <a onClick={() => this.handleOptionSelected('translation', 1)} className="pointer">
@@ -74,7 +78,7 @@ export default class FontSizeDropdown extends Component {
           className="text-color"
           data-metrics-event-name="FontSizeDropdown"
         >
-          Font size
+          <LocaleFormattedMessage id={'setting.fontSize'} defaultMessage={'Font size'}/>
         </a>
       </OverlayTrigger>
     );
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 6b7300302..eecfacf9c 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -5,6 +5,9 @@ import Grid from 'react-bootstrap/lib/Grid';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import LocaleSwitcher from 'components/LocaleSwitcher'
+
 const styles = require('./style.scss');
 
 const Footer = () => (
@@ -13,19 +16,42 @@ const Footer = () => (
       <Col md={10} mdOffset={1}>
         <Row>
           <Col md={2} sm={4} xs={12} className={styles.about}>
-            <p>Navigate</p>
+            <p className={styles.header}>Navigate</p>
             <ul className={`source-sans ${styles.list}`}>
-              <li><Link to="/about">About</Link></li>
-              <li><Link to="/contact">Contact</Link></li>
+              <li>
+                <Link to="/about">
+                  <LocaleFormattedMessage
+                    id={'nav.aboutUs'}
+                    defaultMessage={'About Us'}
+                  />
+                </Link>
+              </li>
+              <li>
+                <Link to="/contact">
+                  <LocaleFormattedMessage
+                    id={'nav.contactUs'}
+                    defaultMessage={'Contact Us'}
+                  />
+                </Link>
+              </li>
               <li>
                 <a href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="Footer:Link:Developer">
-                  Developers
+                  <LocaleFormattedMessage
+                    id={'nav.developers'}
+                    defaultMessage={'Developers'}
+                  />
                 </a>
               </li>
             </ul>
           </Col>
+
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>Useful sites</p>
+            <p className={styles.header}>
+              <LocaleFormattedMessage
+                id={'nav.usefulSites'}
+                defaultMessage={'USEFUL SITES'}
+              />
+            </p>
             <ul className={`source-sans ${styles.list}`}>
               <li><a target="_blank" href="http://sunnah.com/" data-metrics-event-name="Footer:Link:Sunnah">Sunnah.com</a></li>
               <li><a target="_blank" href="http://salah.com/" data-metrics-event-name="Footer:Link:Salah">Salah.com</a></li>
@@ -37,8 +63,14 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>Other links</p>
+            <p className={styles.header}>
+              <LocaleFormattedMessage
+                id={'nav.otherLinks'}
+                defaultMessage={'Other links'}
+              />
+            </p>
             <ul className={`source-sans ${styles.list}`}>
               <li><a href="/sitemap.xml">Sitemap</a></li>
               <li>
@@ -61,13 +93,27 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={4} sm={12} xs={12} className={styles.links}>
-            <p className="monserrat">
-              Quran.com ( also known as The Noble Quran, Al Quran, Holy Quran, Koran ){' '}
-              is a pro bono project.
+            <p className={styles.header}>
+              <LocaleFormattedMessage
+                id={'local.selectLabel'}
+                defaultMessage={'Site Language'}
+              />
             </p>
 
-            <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
+            <div className={styles.list}>
+              <LocaleSwitcher/>
+
+              <p className="monserrat">
+                <LocaleFormattedMessage
+                  id={'nav.aboutQuranProject'}
+                defaultMessage={'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.'}
+                />
+              </p>
+
+              <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
+            </div>
           </Col>
         </Row>
       </Col>
diff --git a/src/components/Footer/style.scss b/src/components/Footer/style.scss
index ea87437a2..beabe666b 100644
--- a/src/components/Footer/style.scss
+++ b/src/components/Footer/style.scss
@@ -8,6 +8,11 @@
     padding-top: 30px;
     text-transform: uppercase;
 
+    .header{
+      line-height: 30px;
+      color: #fff;
+    }
+
     .list{
       padding-left: 0px;
       :global(li){
@@ -16,11 +21,6 @@
       }
     }
 
-    p{
-      line-height: 30px;
-      color: #fff;
-    }
-
     a{
       font-size: 13px;
       color: rgba(#fff, 0.5);
@@ -38,13 +38,4 @@
     -ms-transition: color .15s ease-in-out;
     transition: color .15s ease-in-out;
   }
-
-  .links {
-    &:last-child{
-      p{
-        color: rgba(#fff, 0.5);
-      }
-    }
-  }
-
 }
diff --git a/src/components/Home/QuickSurahs/index.js b/src/components/Home/QuickSurahs/index.js
index 8def0c064..bd7a996a9 100644
--- a/src/components/Home/QuickSurahs/index.js
+++ b/src/components/Home/QuickSurahs/index.js
@@ -2,6 +2,8 @@ import React from 'react';
 import debug from 'helpers/debug';
 import Link from 'react-router/lib/Link';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const styles = require('containers/Home/style.scss');
 
 export default () => {
@@ -12,7 +14,7 @@ export default () => {
   return (
     <div className="">
       <h4 className={`text-muted ${styles.title}`}>
-        <span>Quick links:</span>
+        <LocaleFormattedMessage id={'surah.index.quickLinks'} defaultMessage={'Quick links :'}/>
         {
           isFriday &&
             <span>
diff --git a/src/components/Home/QuickSurahs/spec.js b/src/components/Home/QuickSurahs/spec.js
index fe352eaf8..375c0fb0d 100644
--- a/src/components/Home/QuickSurahs/spec.js
+++ b/src/components/Home/QuickSurahs/spec.js
@@ -2,18 +2,21 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Link from 'react-router/lib/Link';
 import QuickSurahs from './index.js';
+import { mountWithIntl } from '../../../../tests/helpers/intl-enzyme-test-helper.js';
+
 
 describe("<QuickSurahs />", () => {
   const count = new Date().getDay() === 5 ? 5 : 4;
 
   it("Should render QuickSurahs component", () => {
-    let component = mount(<QuickSurahs />);
+    let component = mountWithIntl(<QuickSurahs />);
+
     expect(component).to.be.ok;
     expect(component.find('a').length).to.equal(count);
   });
 
   it("Should render QuickSurahs component with Surah Al-Kahf", () => {
-    let component = mount(<QuickSurahs />);
+    let component = mountWithIntl(<QuickSurahs />);
     expect(component).to.be.ok;
     expect(component.find('a').length).to.equal(count);
   })
diff --git a/src/components/IndexHeader/Nav/index.js b/src/components/IndexHeader/Nav/index.js
index 55396965c..1d683a34d 100644
--- a/src/components/IndexHeader/Nav/index.js
+++ b/src/components/IndexHeader/Nav/index.js
@@ -2,6 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
 import { connect } from 'react-redux';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 export class IndexHeaderNav extends Component {
   static propTypes = {
     user: PropTypes.object
@@ -25,25 +27,42 @@ export class IndexHeaderNav extends Component {
       <ul className={classNames}>
         <li>
           <Link to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
-            Mobile
+            <LocaleFormattedMessage
+              id={'nav.mobile'}
+              defaultMessage={'Mobile'}
+            />
           </Link>
         </li>
         <li>
           <a href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="IndexHeader:Link:Developer">
-            Developers
+            <LocaleFormattedMessage
+              id={'nav.developers'}
+              defaultMessage={'Developers'}
+            />
           </a>
         </li>
         <li>
-          <a href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">Legacy Quran.com</a>
+          <a href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">
+            <LocaleFormattedMessage
+              id={'nav.legacySite'}
+              defaultMessage={'Legacy Quran.com'}
+            />
+          </a>
         </li>
         <li>
           <Link to="/donations" data-metrics-event-name="IndexHeader:Link:Contribute">
-            Contribute
+            <LocaleFormattedMessage
+              id={'nav.contribute'}
+              defaultMessage={'Contribute'}
+            />
           </Link>
         </li>
         <li>
           <a href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
-            Contact us
+            <LocaleFormattedMessage
+              id={'nav.contactUs'}
+              defaultMessage={'Contact Us'}
+            />
           </a>
         </li>
         {
diff --git a/src/components/InformationToggle/index.js b/src/components/InformationToggle/index.js
index ed027a98a..5d24d0462 100644
--- a/src/components/InformationToggle/index.js
+++ b/src/components/InformationToggle/index.js
@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 export default class InformationToggle extends Component {
   static propTypes = {
     isShowingSurahInfo: PropTypes.bool.isRequired,
@@ -23,7 +25,7 @@ export default class InformationToggle extends Component {
         className={`${isShowingSurahInfo ? ' text-primary' : 'text-color'} pointer`}
         onClick={this.toggleInformationMode}
       >
-        Surah Info
+        <LocaleFormattedMessage id={'surah.info'} defaultMessage={'Surah Info'}/>
       </a>
     );
   }
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
index 792b233ef..3de95aaaf 100644
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@@ -1,10 +1,12 @@
 import React from 'react';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const styles = require('./style.scss');
 
 const Loader = () => (
   <div className={styles.loader}>
-    Loading...
+    <LocaleFormattedMessage id={'app.loading'} defaultMessage={'Loading...'}/>
   </div>
 );
 
diff --git a/src/components/LocaleFormattedMessage/index.js b/src/components/LocaleFormattedMessage/index.js
new file mode 100644
index 000000000..3448f3756
--- /dev/null
+++ b/src/components/LocaleFormattedMessage/index.js
@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
+
+class LocaleFormattedMessage extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string,
+    intl: intlShape.isRequired,
+    values: PropTypes.any
+  };
+
+  render() {
+    const {id, defaultMessage, intl, values } = this.props;
+   
+    return (
+      <span className={intl.messages.local}>
+        <FormattedMessage id={id} defaultMessage={defaultMessage} values={values}/>
+      </span>
+    );
+  }
+};
+
+export default injectIntl(LocaleFormattedMessage);
diff --git a/src/components/LocaleSwitcher/index.js b/src/components/LocaleSwitcher/index.js
new file mode 100644
index 000000000..1c646984a
--- /dev/null
+++ b/src/components/LocaleSwitcher/index.js
@@ -0,0 +1,65 @@
+import React, { Component, PropTypes } from "react";
+
+import { locales, defaultLocale } from "../../config";
+import cookie from 'react-cookie';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+export default class LocaleSwitcher extends Component {
+  state = {
+    currentLocale: defaultLocale,
+  };
+
+  componentDidMount() {
+    if (__CLIENT__) {
+      this.setState({currentLocale: cookie.load('currentLocale') || defaultLocale});
+    }
+  }
+
+  handleLocaleClick(locale, e) {
+    e.preventDefault();
+    let expireDate = new Date();
+    expireDate.setYear(expireDate.getFullYear()+1);
+
+    this.setState({currentLocale: locale});
+
+    cookie.save('currentLocale', locale, {
+      path: '/',
+      expires: new Date(expireDate),
+    });
+
+    window.location.reload();
+  }
+
+  renderLocaleLink(locale, native) {
+
+    let className = "local-switch-link";
+    if (locale === this.state.currentLocale) {
+      className = `btn ${className} ${className}-active`;
+    }
+
+    return (
+      <a key={ locale }
+         className={className}
+         onClick={ this.handleLocaleClick.bind(this, locale) }
+         href={ `?local=${locale}` }
+      >
+        { locales[locale] }
+      </a>
+    );
+  }
+
+  render() {
+    const keys = Object.keys(locales);
+
+    return (
+      <div className='local-switcher'>
+        <p>
+          <LocaleFormattedMessage id={'local.changeLocal'} defaultMessage={'Choose language '} />
+        </p>
+
+        { keys.map(this.renderLocaleLink, this) }
+      </div>
+    );
+  }
+
+}
diff --git a/src/components/LocaleSwitcher/style.scss b/src/components/LocaleSwitcher/style.scss
new file mode 100644
index 000000000..7b777ea43
--- /dev/null
+++ b/src/components/LocaleSwitcher/style.scss
@@ -0,0 +1,10 @@
+.local-switcher{
+  color: red;
+}
+.local-switch-link{
+
+}
+
+.local-switch-link-active{
+  color: #2CA4AB;
+}
diff --git a/src/components/NightModeToggle/index.js b/src/components/NightModeToggle/index.js
index 1eaddaa7f..81ada91c9 100644
--- a/src/components/NightModeToggle/index.js
+++ b/src/components/NightModeToggle/index.js
@@ -1,42 +1,52 @@
 import React, { Component, PropTypes } from 'react';
+import { intlShape, injectIntl } from 'react-intl';
 
-import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-export default class NightModeToggle extends Component {
+import bindTooltip from 'utils/bindTooltip';
+
+class NightModeToggle extends Component {
   static propTypes = {
-    isNightMode: PropTypes.bool.isRequired,
-    onToggle: PropTypes.func.isRequired
+    intl: intlShape.isRequired
   };
 
-  static defaultProps = {
-    isNightMode: false
+  state = {
+    isNightMode: false,
   };
 
-  toggleNightMode = () => {
-    const { isNightMode } = this.props;
+  componentDidUpdate() {
+    bindTooltip();
+   }
 
-    if(isNightMode)
-      document.body.classList.add('night-mode');
-    else
-      document.body.classList.remove('night-mode');
+  toggleNightMode = () => {
+    document.body.classList.toggle('night-mode');
 
-    this.props.onToggle({isNightMode: !isNightMode});
+    this.setState({isNightMode: !this.state.isNightMode});
   }
 
   render() {
-    const { isNightMode } = this.props;
+    const { intl } = this.props;
+
+    let title =  intl.formatMessage({
+      id: this.state.isNightMode ? 'setting.nightMode.dayTip' : 'setting.nightMode.nightTip',
+      defaultMessage: this.state.isNightMode? 'Switch to day mode' : 'switch to night mode'
+    }) ;
 
     return(
     <div>
       <a
-        title={isNightMode ? "Switch to day mode" : "Switch to night mode"}
-        className={`${isNightMode ? 'text-primary' : 'text-color'} pointer`}
+        title={title}
+        rel="tooltip"
+        className={`${this.state.isNightMode ? 'text-primary' : 'text-color'} pointer`}
         onClick={this.toggleNightMode}
       >
-        Night Mode:{' '}
+        <LocaleFormattedMessage id={'setting.nightMode'} defaultMessage={'Night Mode'}/>
+        :{' '}
         <i className="ss-icon ss-lightbulb"/>
       </a>
     </div>
     );
   }
 }
+
+export default injectIntl(NightModeToggle);
diff --git a/src/components/NoScriptWarning/index.js b/src/components/NoScriptWarning/index.js
deleted file mode 100644
index 312acbc30..000000000
--- a/src/components/NoScriptWarning/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Link from 'react-router/lib/Link';
-
-import Row from 'react-bootstrap/lib/Row';
-import Col from 'react-bootstrap/lib/Col';
-
-const styles = require('./style.scss');
-
-const NoScriptWarning = () => (
-  <noscript>
-    {/* <Row>
-      <Col md={12} className={styles.noscript_warning}>
-        <p> Looks like either your browser does not support Javascript or its disabled. Quran.com workes best with JavaScript enabled.
-          For more instruction on how to enable javascript
-
-          <Link to="http://www.enable-javascript.com/"> Click here</Link>
-        </p>
-        </Col>
-      </Row> */}
-  </noscript>
-);
-
-export default NoScriptWarning;
diff --git a/src/components/PageBreak/spec.js b/src/components/PageBreak/spec.js
index 82dae4b56..02621d5c8 100644
--- a/src/components/PageBreak/spec.js
+++ b/src/components/PageBreak/spec.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
+import {shallow} from 'enzyme';
 
 import PageBreak from './index';
 
 let wrapper;
 let pageNum = 15;
 
-describe('<ContentDropdown />', () => {
+describe('<PageBreak />', () => {
   beforeEach(() => {
     wrapper = shallow(<PageBreak pageNum={pageNum} />);
   });
diff --git a/src/components/QuranNav/index.js b/src/components/QuranNav/index.js
index 20bae9086..849b63db6 100644
--- a/src/components/QuranNav/index.js
+++ b/src/components/QuranNav/index.js
@@ -13,6 +13,9 @@ import { connect } from 'react-redux';
 
 import userType from 'types/userType';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+
 const styles = require('./style.scss');
 
 export const QuranNav = ({ user }) => (
@@ -25,22 +28,34 @@ export const QuranNav = ({ user }) => (
       <Nav pullRight>
         <LinkContainer to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
           <NavItem>
-            Mobile
+            <LocaleFormattedMessage
+              id={'nav.mobile'}
+              defaultMessage={'Mobile'}
+            />
           </NavItem>
         </LinkContainer>
         <NavItem href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="IndexHeader:Link:Developer">
-          Developers
+          <LocaleFormattedMessage
+            id={'nav.developers'}
+            defaultMessage={'Developers'}
+          />
         </NavItem>
         <NavItem href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">
           Legacy Quran.com
         </NavItem>
         <LinkContainer to="/donations" data-metrics-event-name="IndexHeader:Link:Contribute">
           <NavItem>
-            Contribute
+            <LocaleFormattedMessage
+              id={'nav.contribute'}
+              defaultMessage={'Contribute'}
+            />
           </NavItem>
         </LinkContainer>
         <NavItem href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
-          Contact us
+          <LocaleFormattedMessage
+            id={'nav.contactUs'}
+            defaultMessage={'Contact Us'}
+          />
         </NavItem>
         {
           user &&
diff --git a/src/components/ReadingModeToggle/index.js b/src/components/ReadingModeToggle/index.js
index dcf91f146..c8b390dfc 100644
--- a/src/components/ReadingModeToggle/index.js
+++ b/src/components/ReadingModeToggle/index.js
@@ -1,10 +1,11 @@
 import React, { PropTypes } from 'react';
 
 import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const ReadingModeToggle = ({ onReadingModeToggle, isToggled }) => (
   <div>
-    Reading:{' '}
+    <LocaleFormattedMessage id={'setting.reading'} defaultMessage={'Reading'}/>:{' '}
     <SwitchToggle
       checked={isToggled}
       onToggle={onReadingModeToggle}
diff --git a/src/components/ReciterDropdown/index.js b/src/components/ReciterDropdown/index.js
index e6c697cd0..ccc89ca2c 100644
--- a/src/components/ReciterDropdown/index.js
+++ b/src/components/ReciterDropdown/index.js
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const style = require('./style.scss');
 
 // To save API calls.
@@ -229,7 +231,7 @@ export default class ReciterDropdown extends Component {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          Reciters
+          <LocaleFormattedMessage id={'setting.reciters'} defaultMessage={'Reciters'}/>
           <span className="caret" />
         </button>
         <ul className="dropdown-menu" aria-labelledby="reciters-dropdown">
diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
index fe8a4fabc..6f62d3b80 100644
--- a/src/components/SearchInput/index.js
+++ b/src/components/SearchInput/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { PropTypes as MetricsPropTypes } from 'react-metrics';
 import { push } from 'react-router-redux';
 import { connect } from 'react-redux';
+import { intlShape, injectIntl } from 'react-intl';
 
 import SearchAutocomplete from 'components/SearchAutocomplete';
 
@@ -12,7 +13,8 @@ import debug from 'helpers/debug';
 class SearchInput extends Component {
   static propTypes = {
     push: PropTypes.func.isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    intl: intlShape.isRequired
   };
 
   static contextTypes = {
@@ -91,7 +93,8 @@ class SearchInput extends Component {
 
   render() {
     const { showAutocomplete } = this.state;
-    const { className } = this.props;
+    const { className, intl } = this.props;
+    const placeholder = intl.formatMessage({id: 'search.placeholder', defaultMessage: 'Search'});
 
     debug('component:SearchInput', 'Render');
 
@@ -100,7 +103,7 @@ class SearchInput extends Component {
         <i className="ss-icon ss-search" onClick={this.search} />
         <input
           type="search"
-          placeholder="Search"
+          placeholder={placeholder}
           ref="search"
           onFocus={() => this.setState({ showAutocomplete: true })}
           onBlur={() => this.setState({ showAutocomplete: false })}
@@ -118,4 +121,4 @@ class SearchInput extends Component {
   }
 }
 
-export default connect(null, { push })(SearchInput);
+export default injectIntl(connect(null, { push })(SearchInput));
diff --git a/src/components/SmartBanner/index.js b/src/components/SmartBanner/index.js
index ee306d183..640d57711 100644
--- a/src/components/SmartBanner/index.js
+++ b/src/components/SmartBanner/index.js
@@ -101,17 +101,24 @@ class SmartBanner extends Component {
 
   close() {
     this.hide();
+
+    let expireDate = new Date();
+    expireDate = new Date(expireDate.setDate(expireDate.getDate()+this.props.daysHidden));
+
     cookie.save('smartbanner-closed', 'true', {
       path: '/',
-      expires: +new Date() + this.props.daysHidden * 1000 * 60 * 60 * 24,
+      expires: expireDate,
     });
   }
 
   install() {
+    let expireDate = new Date();
+    expireDate = new Date(expireDate.setDate(expireDate.getDate()+this.props.daysReminder));
+
     this.hide();
     cookie.save('smartbanner-installed', 'true', {
       path: '/',
-      expires: +new Date() + this.props.daysReminder * 1000 * 60 * 60 * 24,
+      expires: expireDate,
     });
   }
 
diff --git a/src/components/SurahsDropdown/index.js b/src/components/SurahsDropdown/index.js
index 4d9859a9e..271bf8027 100644
--- a/src/components/SurahsDropdown/index.js
+++ b/src/components/SurahsDropdown/index.js
@@ -5,6 +5,9 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+
 const styles = require('./style.scss');
 
 export default class SurahsDropdown extends Component {
@@ -60,7 +63,7 @@ export default class SurahsDropdown extends Component {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          Surahs
+          <LocaleFormattedMessage id={'setting.surahs'} defaultMessage={'Surahs'}/>
           <span className="caret"></span>
         </button>
         <ul className="dropdown-menu" aria-labelledby="surahs-dropdown">
diff --git a/src/components/TooltipDropdown/index.js b/src/components/TooltipDropdown/index.js
index db1b762a3..00c3aa0b6 100644
--- a/src/components/TooltipDropdown/index.js
+++ b/src/components/TooltipDropdown/index.js
@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
 import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('./style.scss');
 
@@ -25,19 +26,22 @@ export default class TooltipDropdown extends Component {
 
   renderPopup() {
     const { options: { tooltip }} = this.props;
+    const tooltipTitle = <LocaleFormattedMessage id={'setting.tooltip.title'} defaultMessage={'DISPLAY TOOLTIP'}/>;
 
     return (
-      <Popover id="TooltipDropdown" title="Tooltip display" className={style.popover}>
+      <Popover id="TooltipDropdown" title={tooltipTitle} className={style.popover}>
         <Row>
           <Col xs={12}>
-            Translation{' '}
+            <LocaleFormattedMessage id={'setting.tooltip.translation'} defaultMessage={'Translation'}/>
+            {' '}
             <SwitchToggle
               checked={tooltip === 'transliteration'}
               onToggle={this.handleOptionSelected}
               id="tooltip-toggle"
               flat
             />
-            {' '}Transliteration
+            {' '}
+            <LocaleFormattedMessage id={'setting.tooltip.transliteration'} defaultMessage={'Transliteration'}/>
           </Col>
         </Row>
       </Popover>
@@ -52,7 +56,7 @@ export default class TooltipDropdown extends Component {
           className="text-color"
           data-metrics-event-name="TooltipDropdown"
         >
-          Tooltip
+          <LocaleFormattedMessage id={'setting.tooltip'} defaultMessage={'Tooltip'} />
         </a>
       </OverlayTrigger>
     );
diff --git a/src/components/TopOptions/index.js b/src/components/TopOptions/index.js
index 49b9ae56d..bca006cb9 100644
--- a/src/components/TopOptions/index.js
+++ b/src/components/TopOptions/index.js
@@ -46,10 +46,7 @@ const TopOptions = ({ options, surah, actions }) => (
         </li>
         <li>|</li>
         <li>
-          <NightModeToggle
-            isNightMode={options.isNightMode}
-            onToggle={actions.options.setOption}
-          />
+          <NightModeToggle />
         </li>
         <li><Share surah={surah} /></li>
       </ul>
diff --git a/src/components/VersesDropdown/index.js b/src/components/VersesDropdown/index.js
index 5bc448ece..1b578969b 100644
--- a/src/components/VersesDropdown/index.js
+++ b/src/components/VersesDropdown/index.js
@@ -2,6 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import { Link } from 'react-scroll';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const style = require('./style.scss');
 
 export default class VersesDropdown extends Component {
@@ -55,9 +57,7 @@ export default class VersesDropdown extends Component {
     const { className } = this.props;
 
     const title = (
-      <span>
-        Go to verse
-      </span>
+      <LocaleFormattedMessage id={'setting.verses'} defaultMessage={'Go to verse'} />
     );
 
     return (
diff --git a/src/config.js b/src/config.js
index 1f729c683..13f2c942d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -18,6 +18,9 @@ module.exports = Object.assign({
   sentryClient: process.env.SENTRY_KEY_CLIENT,
   sentryServer: process.env.SENTRY_KEY_SERVER,
   facebookAppId: process.env.FACEBOOK_APP_ID,
+  // Supported locales
+  locales: {"en": 'English', "ar": 'العربية', "ur": 'اردو'},
+  defaultLocale: 'en',
   app: {
     head: {
       titleTemplate: `%s - ${title}`,
@@ -87,6 +90,7 @@ module.exports = Object.assign({
       /* SEO: https://developers.google.com/structured-data/slsb-overview#markup_examples */
       /* SEO: https://developers.google.com/structured-data/site-name#markup_requirements */
       script: [
+        { src: "https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"},
         {
           type: 'application/ld+json',
           innerHTML: `{
diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js
index 26b9f330f..463eee285 100644
--- a/src/containers/Home/index.js
+++ b/src/containers/Home/index.js
@@ -8,6 +8,8 @@ import { isAllLoaded, loadAll } from 'redux/actions/surahs.js';
 
 import SurahsList from 'components/Home/SurahsList';
 import QuickSurahs from 'components/Home/QuickSurahs';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 
 const styles = require('./style.scss');
 
@@ -24,7 +26,7 @@ function Home(props) {
           <div className="col-md-10 col-md-offset-1">
             <QuickSurahs />
             <h4 className={`text-muted ${styles.title}`}>
-              SURAHS (CHAPTERS)
+              <LocaleFormattedMessage id={'surah.index.heading'} defaultMessage={'SURAHS (CHAPTERS)'}/>
             </h4>
             <div className="row">
               <SurahsList surahs={Object.values(props.surahs).slice(0, 38)} />
diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js
index 44a770443..2658dc8d2 100644
--- a/src/containers/Search/index.js
+++ b/src/containers/Search/index.js
@@ -18,6 +18,9 @@ import Loader from 'components/Loader';
 
 import { search } from 'redux/actions/search.js';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import {FormattedHTMLMessage} from 'react-intl'
+
 const style = require('./style.scss');
 
 class Search extends Component {
@@ -65,6 +68,8 @@ class Search extends Component {
 
   renderStatsBar() {
     const { total, size, page, from, query } = this.props;
+    const values = {from: 2, to: from +size - 1, total: 10, query: query};
+
 
     if (total) {
       const pageNum = Math.ceil(total / size);
@@ -73,11 +78,12 @@ class Search extends Component {
         <div className={style.header}>
           <Grid>
             <Row>
-              <Col md={6} className="text-uppercase">
-                {from}-{from + size - 1} OF
-                <span className={style.colored}> {total} </span>
-                SEARCH RESULTS FOR:
-                <span className={style.colored}> {query}</span>
+              <Col md={6} className="text-uppercase search-status">
+                <FormattedHTMLMessage
+                  id={'search.resultHeading'}
+                  defaultMessage={"{from}-{to} OF {total} SEARCH RESULTS FOR: {query}"}
+                  values={values}
+                  />
               </Col>
               <Col className="text-right">
                 <ReactPaginate
@@ -118,7 +124,7 @@ class Search extends Component {
     if (isErrored) {
       return (
         <h3 className="text-center" style={{padding: '15%'}}>
-          Sorry, there was an error with your search.
+          <LocaleFormattedMessage id={'search.error'} defaultMessage={'Sorry, there was an error with your search.'}/>
         </h3>
       );
     }
@@ -128,7 +134,9 @@ class Search extends Component {
     }
 
     if (!results.length) {
-      return <h3 className="text-center" style={{ padding: '15%' }}>No results found.</h3>;
+      return <h3 className="text-center" style={{ padding: '15%' }}>
+        <LocaleFormattedMessage id={'search.noResult'} defaultMessage={'No results found.'}/>
+      </h3>;
     }
 
     return results.map(result => (
diff --git a/src/containers/Surah/Header/index.js b/src/containers/Surah/Header/index.js
index 756d236a4..b22f4b1c2 100644
--- a/src/containers/Surah/Header/index.js
+++ b/src/containers/Surah/Header/index.js
@@ -5,6 +5,8 @@ import Col from 'react-bootstrap/lib/Col';
 import Navbar from 'react-bootstrap/lib/Navbar';
 const Header = Navbar.Header;
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 import debug from 'helpers/debug';
 
 // const ornamentLeft = require('../../../../static/images/ornament-left.png');
@@ -41,7 +43,9 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
                         data-metrics-event-name="Title:PreviousSurah"
                         className="ss-icon ss-navigateleft"
                       />
-                      <span className="hidden-xs hidden-sm"> PREVIOUS SURAH </span>
+                      <span className="hidden-xs hidden-sm">
+                        <LocaleFormattedMessage id={'surah.previous'} defaultMessage={'PREVIOUS SURAH'} />
+                      </span>
                     </Link>
                 }
               </li>
@@ -61,7 +65,9 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
                       className="navbar-text next-chapter"
                       to={`/${surah.id + 1}`}
                     >
-                      <span className="hidden-xs hidden-sm"> NEXT SURAH </span>
+                      <span className="hidden-xs hidden-sm">
+                        <LocaleFormattedMessage id={'surah.next'} defaultMessage={'NEXT SURAH'} />
+                      </span>
                       <i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
                     </Link>
                 }
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index b4b13c60d..1f7c6f013 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -31,6 +31,8 @@ import Line from 'components/Line';
 import SearchInput from 'components/SearchInput';
 import Bismillah from 'components/Bismillah';
 import TopOptions from 'components/TopOptions';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 
 // utils
 import scroller from 'utils/scroller';
@@ -273,20 +275,31 @@ class Surah extends Component {
               surah.id > 1 &&
                 <li className="previous">
                   <Link to={`/${surah.id * 1 - 1}`}>
-                    &larr; Previous Surah
+                    &larr;
+                    <LocaleFormattedMessage
+                      id='surah.previous'
+                      defaultMessage={ 'Previous Surah' }
+                    />
                   </Link>
                 </li>
             }
             <li className="text-center">
               <Link to={`/${surah.id}`}>
-                Beginning of Surah
+                <LocaleFormattedMessage
+                  id='surah.goToBeginning'
+                  defaultMessage={ 'Beginning of Surah' }
+                />
               </Link>
             </li>
             {
               surah.id < 114 &&
                 <li className="next">
                   <Link to={`/${surah.id * 1 + 1}`}>
-                    Next Surah &rarr;
+                    <LocaleFormattedMessage
+                      id='surah.next'
+                      defaultMessage={ 'Next Surah' }
+                    />
+                    &rarr;
                   </Link>
                 </li>
             }
@@ -351,7 +364,9 @@ class Surah extends Component {
       <div>
         <Navbar static fluid>
           <NavbarHeader>
-            <p className={`navbar-text ${style.sidebarTitle}`}>Options</p>
+            <p className={`navbar-text ${style.sidebarTitle}`}>
+              <LocaleFormattedMessage id={'setting.title'} defaultMessage={'Options'}/>
+            </p>
           </NavbarHeader>
         </Navbar>
         <SearchInput
diff --git a/src/helpers/setLocal.js b/src/helpers/setLocal.js
new file mode 100644
index 000000000..885fe74d1
--- /dev/null
+++ b/src/helpers/setLocal.js
@@ -0,0 +1,29 @@
+import config from '../config';
+import cookie from 'react-cookie';
+
+export function getLocalMessages(req) {
+  let currentLocal;
+  const expireDate = new Date();
+  expireDate.setYear(expireDate.getFullYear() + 1);
+  const availableLocals = Object.keys(config.locales);
+
+  if (req && req.query.local) {
+    currentLocal = req.query.local;
+  }
+  else { // eslint-disable-line
+    currentLocal = cookie.load('currentLocale');
+  }
+
+  if (availableLocals.indexOf(currentLocal) === -1) {
+    currentLocal = config.defaultLocale;
+  }
+
+  cookie.save('currentLocale', currentLocal, {
+    path: '/',
+    expires: new Date(expireDate),
+  });
+
+  const localeData = require('../locale/' + currentLocal + '.js'); // eslint-disable-line
+
+  return localeData.messages;
+}
diff --git a/src/locale/ar.js b/src/locale/ar.js
new file mode 100644
index 000000000..945ef68d2
--- /dev/null
+++ b/src/locale/ar.js
@@ -0,0 +1,71 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  messages: {
+    local: 'arabic',
+    'local.changeLocal': 'اختر اللغة التي تود عرض الموقع بها',
+    'local.navtiveName': 'العربية',
+    'local.selectLabel': 'اللغة',
+    'setting.title': 'خيارات',
+    'setting.surahs': 'السورة',
+    'setting.verses': 'الذهاب إلى الآية',
+    'setting.reciters': 'القراء',
+    'setting.translations.title': 'الترجمات',
+    'setting.translations.removeAll': 'حذف الكل',
+    'setting.translations.english': 'الإنجليزية',
+    'setting.translations.other': 'لغات اخرى',
+    'setting.fontSize': 'حجم الخطز',
+    'setting.fontSize.arabic': 'العربية',
+    'setting.reading': 'قراءة',
+    'setting.tooltip': 'اتلميح',
+    'setting.tooltip.title': 'العرض تلميح الأدوات',
+    'setting.tooltip.translation': 'ترجمة',
+    'setting.tooltip.transliteration': 'حرفي',
+    'setting.nightMode': 'الوضع الليلي',
+    'setting.nightMode.dayTip': 'التبديل إلى الوضع اليوم',
+    'setting.nightMode.nightTip': 'التبديل إلى الوضع الليلي',
+
+    'ayah.media.lectureFrom': 'مشاهدة محاضرة {from}',
+    'ayah.bookmarked': 'إشارة مرجعية',
+    'ayah.bookmark': 'المرجعية',
+
+    'search.placeholder': 'بحث',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
+    'search.error': 'آسف، كان هناك خطأ مع بحثك.',
+    'search.noResult': 'لا توجد نتائج.ا',
+
+    'surah.next': 'تالية سورة',
+    'surah.previous': 'السابقة سورة',
+    'surah.info': 'سورہ معلومات',
+    'surah.index.heading': 'السور',
+    'surah.index.quickLinks': 'روابط سريعة',
+    'surah.goToBeginning': 'ابتداء من سورة',
+
+    'player.currentAyah': 'آية',
+    'player.nextAyah': 'آية القادمة',
+    'player.previousAyah': 'آية السابقة',
+    'player.repeat.title': 'تكرار التبديل',
+    'player.repeat.single': 'وحيد',
+    'player.repeat.range': 'نطاق',
+    'player.repeat.rangeStart': 'من',
+    'player.repeat.rangeEnd': 'إلى',
+    'player.repeat.times': 'مرات',
+    'player.repeat.loop': 'أنشوطة',
+    'player.scrollButtonTip': 'مخطوطات تلقائيا إلى يلعب حاليا الآية على التحولات ...',
+
+    'app.loading': 'جار التحميل ...',
+    'actions.copy': 'نسخ',
+    'actions.copied': 'نسخه',
+    'actions.play': 'لعب',
+    'actions.pause': 'وقفة',
+
+    'nav.contribute': 'يساهم',
+    'nav.aboutUs': 'معلومات عنا',
+    'nav.developers': 'المطورين',
+    'nav.usefulSites': 'مواقع مفيدة',
+    'nav.otherLinks': 'روابط اخرى',
+    'nav.contactUs': 'اتصل بنا',
+    'nav.aboutQuranProject': 'Quran.com المعروف أيضا باسم القرآن الكريم، قناة القرآن الكريم، القرآن الكريم، القرآن الكريم) هو مشروع خيري)',  // eslint-disable-line max-len
+    'nav.mobile': 'التليفون المحمول',
+    'nav.legacySite': 'الموقع القديم'
+  }
+};
diff --git a/src/locale/en.js b/src/locale/en.js
new file mode 100644
index 000000000..589ca585a
--- /dev/null
+++ b/src/locale/en.js
@@ -0,0 +1,71 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  messages: {
+    local: 'english',
+    'local.changeLocal': 'Choose the language you want the site to display with',
+    'local.navtiveName': 'English',
+    'local.selectLabel': 'Language',
+    'setting.title': 'Options',
+    'setting.surahs': 'Surahs',
+    'setting.verses': 'Go to verse',
+    'setting.reciters': 'Reciters',
+    'setting.translations.title': 'Translations',
+    'setting.translations.removeAll': 'Remove all',
+    'setting.translations.english': 'English',
+    'setting.translations.other': 'Other Languages',
+    'setting.fontSize': 'Font size',
+    'setting.fontSize.arabic': 'Arabic',
+    'setting.reading': 'Reading',
+    'setting.tooltip': 'tooltip',
+    'setting.tooltip.title': 'TOOLTIP DISPLAY',
+    'setting.tooltip.translation': 'Translation',
+    'setting.tooltip.transliteration': 'Transliteration',
+    'setting.nightMode': 'Night Mode',
+    'setting.nightMode.dayTip': 'Switch to day mode',
+    'setting.nightMode.nightTip': 'Switch to night mode',
+
+    'ayah.media.lectureFrom': 'Watch lecture of {from}',
+    'ayah.bookmarked': 'Bookmarked',
+    'ayah.bookmark': 'Bookmark',
+
+    'search.placeholder': 'Search',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
+    'search.error': 'Sorry, there was an error with your search.',
+    'search.noResult': 'No results found.',
+
+    'surah.next': 'NEXT SURAH',
+    'surah.previous': 'PREVIOUS SURAH',
+    'surah.info': 'Surah Info',
+    'surah.index.heading': 'SURAHS (CHAPTERS)',
+    'surah.index.quickLinks': 'Quick links',
+    'surah.goToBeginning': 'Beginning of Surah',
+
+    'player.currentAyah': 'Ayah',
+    'player.nextAyah': 'Next Ayah',
+    'player.previousAyah': 'Previous Ayah',
+    'player.repeat.title': 'TOGGLE REPEAT',
+    'player.repeat.single': 'Single',
+    'player.repeat.range': 'Range',
+    'player.repeat.rangeStart': 'From',
+    'player.repeat.rangeEnd': 'To',
+    'player.repeat.times': 'Times',
+    'player.repeat.loop': 'loop',
+    'player.scrollButtonTip': 'Automatically scrolls to the currently playing ayah on transitions...', // eslint-disable-line max-len
+
+    'app.loading': 'Loading ...',
+    'actions.copy': 'Copy',
+    'actions.copied': 'Copied!',
+    'actions.play': 'Play',
+    'actions.pause': 'Pause',
+
+    'nav.contribute': 'Contribute',
+    'nav.aboutUs': 'About us',
+    'nav.developers': 'developers',
+    'nav.usefulSites': 'Useful sites',
+    'nav.otherLinks': 'Other links',
+    'nav.contactUs': 'Contact us',
+    'nav.aboutQuranProject': 'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.', // eslint-disable-line max-len
+    'nav.mobile': 'Mobile',
+    'nav.legacySite': 'Legacy Quran.com'
+  }
+};
diff --git a/src/locale/ur.js b/src/locale/ur.js
new file mode 100644
index 000000000..ebca72592
--- /dev/null
+++ b/src/locale/ur.js
@@ -0,0 +1,71 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  messages: {
+    local: 'urdu',
+    'local.changeLocal': 'جس زبان میں سایٹ دیکہنا چاہتے ہیں اس زبان کا انتخاب کریں',
+    'local.navtiveName': 'اردو',
+    'local.selectLabel': 'زبان',
+    'setting.title': 'اختیارات',
+    'setting.surahs': 'سورة',
+    'setting.verses': 'آیت منتخب کریں',
+    'setting.reciters': 'قاری منتخب کریں',
+    'setting.translations.title': 'ترجمے',
+    'setting.translations.removeAll': 'سب کو ہٹا دیں',
+    'setting.translations.english': 'انگریزی',
+    'setting.translations.other': 'دوسری زبانیں',
+    'setting.fontSize': 'حرف کا سائز',
+    'setting.fontSize.arabic': 'عربی',
+    'setting.reading': 'پڑہائی',
+    'setting.tooltip': 'لفظ کے اوپر',
+    'setting.tooltip.title': 'لفظ کے اوپر کیا ہو',
+    'setting.tooltip.translation': 'ترجمہ',
+    'setting.tooltip.transliteration': 'تلفظ',
+    'setting.nightMode': 'رات کا وقت',
+    'setting.nightMode.dayTip': 'دن کے موڈ میں دیکھیں',
+    'setting.nightMode.nightTip': 'رات کے موڈ میں دیکھیں',
+
+    'ayah.media.lectureFrom': 'کے لیکچر دیکھے  {from}',
+    'ayah.bookmarked': 'حوالہ ہے',
+    'ayah.bookmark': 'حوالہ',
+
+    'search.placeholder': 'تلاش کر یں',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
+    'search.error': 'معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.',
+    'search.noResult': 'کوئی نتیجہ نہیں ملا',
+
+    'surah.next': 'اگلی سورت',
+    'surah.previous': 'پچھلی سورت',
+    'surah.info': 'سورہ کی معلومات',
+    'surah.index.heading': 'سورتیں',
+    'surah.index.quickLinks': 'فوری لنک',
+    'surah.goToBeginning': 'سورہ کے شروع میں جائیں',
+
+    'player.currentAyah': 'آیت',
+    'player.nextAyah': 'اگلی آیت',
+    'player.previousAyah': 'پچھلی آیت',
+    'player.repeat.title': ' دہرائیں',
+    'player.repeat.single': 'اکیلی آیت',
+    'player.repeat.range': 'مخصوص آیات',
+    'player.repeat.rangeStart': 'سے',
+    'player.repeat.rangeEnd': 'تک',
+    'player.repeat.times': 'کتنی بار',
+    'player.repeat.loop': 'چلاتے رہو',
+    'player.scrollButtonTip': 'جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو',
+
+    'app.loading': 'لوڈ ہو رہا ہے',
+    'actions.copy': 'کاپی',
+    'actions.copied': 'کاپی کر لیا',
+    'actions.play': 'چلاو',
+    'actions.pause': 'روک دیں',
+
+    'nav.contribute': 'تعاون کریں',
+    'nav.aboutUs': 'ہمارے متعلق',
+    'nav.developers': 'ڈویلپرز',
+    'nav.usefulSites': 'مفید سائٹس',
+    'nav.otherLinks': 'دیگر لنکس',
+    'nav.contactUs': 'ہم سے رابطہ',
+    'nav.aboutQuranProject': 'قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے',
+    'nav.mobile': 'موبائل',
+    'nav.legacySite': 'پرانی سائٹ'
+  }
+};
diff --git a/src/redux/modules/audioplayer.js b/src/redux/modules/audioplayer.js
index ff6e069d3..3a0724c58 100644
--- a/src/redux/modules/audioplayer.js
+++ b/src/redux/modules/audioplayer.js
@@ -178,7 +178,6 @@ export default function reducer(state = initialState, action = {}) {
 
       return state;
 
-
     }
     case NEXT: {
       const [surahId, ayahNum] = action.currentAyah.split(':');
diff --git a/src/redux/modules/options.js b/src/redux/modules/options.js
index d1946f887..5ad635a28 100644
--- a/src/redux/modules/options.js
+++ b/src/redux/modules/options.js
@@ -4,7 +4,6 @@ import { TOGGLE_READING_MODE, SET_OPTION } from 'redux/constants/options.js';
 const initialState = {
   isReadingMode: false,
   isShowingSurahInfo: false,
-  isNightMode: false,
   audio: 8,
   quran: 1,
   content: [19],
diff --git a/src/server.js b/src/server.js
index ba7607a59..8f60eed66 100644
--- a/src/server.js
+++ b/src/server.js
@@ -22,11 +22,13 @@ import routes from './routes';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import debug from './helpers/debug';
+import { IntlProvider } from 'react-intl';
 
 import Html from './helpers/Html';
 
 import { setUserAgent } from './redux/actions/audioplayer.js';
 import { setOption } from './redux/actions/options.js';
+import { getLocalMessages } from './helpers/setLocal';
 
 // Use varnish for the static routes, which will cache too
 server.use(raven.middleware.express.requestHandler(config.sentryServer));
@@ -36,6 +38,7 @@ server.use((req, res, next) => {
   const client = new ApiClient(req);
   const history = createHistory(req.originalUrl);
   const store = createStore(history, client);
+  const localMessages = getLocalMessages(req);
 
   if (process.env.NODE_ENV === 'development') {
     webpack_isomorphic_tools.refresh()
@@ -43,10 +46,12 @@ server.use((req, res, next) => {
 
   if (req.query.DISABLE_SSR) {
     return res.status(200).send('<!doctype html>\n' + ReactDOM.renderToString(
-      <Html
-        store={store}
-        assets={webpack_isomorphic_tools.assets()}
-      />
+        <IntlProvider locale='en' messages={localMessages}>
+          <Html
+          store={store}
+          assets={webpack_isomorphic_tools.assets()}
+          />
+        </IntlProvider>
     ));
   }
 
@@ -68,9 +73,11 @@ server.use((req, res, next) => {
 
       loadOnServer({...renderProps, store, helpers: { client }}).then(() => {
         const component = (
-          <Provider store={store}>
-            <ReduxAsyncConnect {...renderProps} />
-          </Provider>
+          <IntlProvider messages={localMessages} locale='en' >
+            <Provider store={store}>
+              <ReduxAsyncConnect {...renderProps}  />
+            </Provider>
+          </IntlProvider>
         );
 
         res.type('html');
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ce3004a4e..fe32fe638 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,6 +14,7 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 @import 'partials/modal';
 @import 'partials/tooltip';
 @import 'partials/highlight';
+@import 'partials/local-switcher';
 @import 'nightmode';
 @import 'partials/no-script';
 
@@ -168,3 +169,8 @@ li em{
   top: 0px;
   transform: translateY(-40%);
 }
+
+.urdu, .punjabi{
+  direction: rtl;
+  font-family: 'Nafees';
+}
diff --git a/src/styles/nightmode.scss b/src/styles/nightmode.scss
index 5344323f4..d0f562ae7 100644
--- a/src/styles/nightmode.scss
+++ b/src/styles/nightmode.scss
@@ -14,7 +14,7 @@
     background-color: #2d2d2d;
   }
 
-  .surah-info, .tooltip, .dropdown-menu{
+  .surah-info, .tooltip, .dropdown-menu, .popover-content{
     color: #000;
   }
 
diff --git a/src/styles/partials/_local-switcher.scss b/src/styles/partials/_local-switcher.scss
new file mode 100644
index 000000000..87959d90e
--- /dev/null
+++ b/src/styles/partials/_local-switcher.scss
@@ -0,0 +1,16 @@
+.local-switch-link{
+  &:after{
+    content: '|';
+    margin: 0 5px;
+  }
+
+  &:last-child{
+    &:after{
+      content: '';
+    }
+  }
+}
+
+.local-switch-link-active{
+  color: #2CA4AB !important;
+}
diff --git a/src/styles/partials/_search-input.scss b/src/styles/partials/_search-input.scss
index 5969345a7..130bc127d 100644
--- a/src/styles/partials/_search-input.scss
+++ b/src/styles/partials/_search-input.scss
@@ -82,3 +82,9 @@
     }
   }
 }
+
+
+.search-status{
+  span span{color: #2CA4AB}
+}
+
diff --git a/src/utils/bindTooltip.js b/src/utils/bindTooltip.js
index 64e40759b..82d0b4925 100644
--- a/src/utils/bindTooltip.js
+++ b/src/utils/bindTooltip.js
@@ -13,7 +13,7 @@ export default function bindTooltip() {
       tooltip.id = 'tooltip';
 
       if (tip && tip !== '') {
-        target.removeAttribute('title');
+        // target.removeAttribute('title');
         tooltip.style.opacity = 0;
         tooltip.innerHTML = tip;
         document.body.appendChild(tooltip);
@@ -64,7 +64,7 @@ export default function bindTooltip() {
           if (document.querySelector('#tooltip')) {
             document.body.removeChild(document.querySelector('#tooltip'));
           }
-          target.setAttribute('title', tip);
+          // target.setAttribute('title', tip);
         };
 
         target.addEventListener('mouseleave', removeTooltip);
diff --git a/tests/helpers/intl-enzyme-test-helper.js b/tests/helpers/intl-enzyme-test-helper.js
new file mode 100644
index 000000000..bc01b9079
--- /dev/null
+++ b/tests/helpers/intl-enzyme-test-helper.js
@@ -0,0 +1,39 @@
+
+/**
+ * Based on: https://gist.github.com/mirague/c05f4da0d781a9b339b501f1d5d33c37/
+ *
+ * Components using the react-intl module require access to the intl context.
+ * This is not available when mounting single components in Enzyme.
+ * These helper functions aim to address that and wrap a valid,
+ * English-locale intl context around them.
+ */
+
+import React from 'react';
+import { IntlProvider, intlShape } from 'react-intl';
+import { mount, shallow } from 'enzyme';
+
+
+// Create the IntlProvider to retrieve context for wrapping around.
+var intlProvider = new IntlProvider({ locale: 'en' }, {});
+var intl  = intlProvider.getChildContext();
+
+/**
+ * When using React-Intl `injectIntl` on components, props.intl is required.
+ */
+function nodeWithIntlProp(node) {
+  return React.cloneElement(node,  intl );
+}
+
+/**
+ * Export these methods.
+ */
+export function shallowWithIntl(node) {
+  return shallow(nodeWithIntlProp(node), { context: intl  });
+}
+
+export function mountWithIntl(node) {
+  return mount(nodeWithIntlProp(node), {
+    context: intl ,
+    childContextTypes: { intl: intlShape }
+  });
+}