diff --git a/src/components/GlobalNav/Surah/index.js b/src/components/GlobalNav/Surah/index.js
index babde9eea..5d002191c 100644
--- a/src/components/GlobalNav/Surah/index.js
+++ b/src/components/GlobalNav/Surah/index.js
@@ -40,7 +40,10 @@ const GlobalNavSurah = ({ chapter, chapters, setOption, options, ...props }) =>
           isToggled={options.isReadingMode}
           onToggle={setOption}
         />
-        <NightModeToggle />
+        <NightModeToggle
+          isNightMode={options.isNightMode}
+          onToggle={setOption}
+        />
       </NavDropdown>,
       <div className="navbar-form navbar-left hidden-xs hidden-sm">
         <SearchInput className="search-input" />
@@ -64,7 +67,10 @@ const GlobalNavSurah = ({ chapter, chapters, setOption, options, ...props }) =>
         isToggled={options.isReadingMode}
         onToggle={setOption}
       />,
-      <NightModeToggle />
+      <NightModeToggle
+        isNightMode={options.isNightMode}
+        onToggle={setOption}
+      />
     ]}
   />
 );
diff --git a/src/components/NightModeToggle/index.js b/src/components/NightModeToggle/index.js
index 23d41296a..8f78cfb51 100644
--- a/src/components/NightModeToggle/index.js
+++ b/src/components/NightModeToggle/index.js
@@ -1,21 +1,38 @@
 /* global document */
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 class NightModeToggle extends Component {
-  state = {
-    isNightMode: false,
-  };
+  static propTypes = {
+    isNightMode: PropTypes.bool.isRequired,
+    onToggle: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    const { isNightMode } = this.props;
+
+    if (isNightMode) {
+      document.body.classList.add('night-mode');
+    }
+  }
 
   toggleNightMode = () => {
-    document.body.classList.toggle('night-mode');
+    const { isNightMode, onToggle } = this.props;
+
+    if (isNightMode) {
+      document.body.classList.remove('night-mode');
+    } else {
+      document.body.classList.add('night-mode');
+    }
 
-    this.setState({ isNightMode: !this.state.isNightMode });
+    onToggle({ isNightMode: !isNightMode });
   }
 
   render() {
+    const { isNightMode } = this.props;
+
     return (
-      <li className={this.state.isNightMode && 'active'}>
+      <li className={isNightMode && 'active'}>
         <a
           tabIndex="-1"
           className="pointer"
diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js
index 7485f8525..5d14e1090 100644
--- a/src/components/SurahInfo/index.js
+++ b/src/components/SurahInfo/index.js
@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react';
 import { surahType } from 'types';
 import Loader from 'quran-components/lib/Loader';
 
-
 const style = require('./style.scss');
 
 const SurahInfo = ({ chapter, isShowingSurahInfo, onClose }) => {
diff --git a/src/redux/actions/options.js b/src/redux/actions/options.js
index e04b461e1..ece49a38c 100644
--- a/src/redux/actions/options.js
+++ b/src/redux/actions/options.js
@@ -14,6 +14,10 @@ export function isReadingMode(globalState) {
   return globalState.options.isReadingMode;
 }
 
+export function isNightMode(globalState) {
+  return globalState.options.isNightMode;
+}
+
 export function setOption(payload) {
   const options = cookie.load('options') || {}; // protect against first timers.
 
diff --git a/src/redux/modules/options.js b/src/redux/modules/options.js
index 2b522ee7e..5ff6e2639 100644
--- a/src/redux/modules/options.js
+++ b/src/redux/modules/options.js
@@ -9,6 +9,7 @@ import {
 
 const initialState = {
   isReadingMode: false,
+  isNightMode: false,
   isShowingSurahInfo: false,
   loadingRecitations: false,
   loadingTranslations: false,
diff --git a/src/styles/nightmode.scss b/src/styles/nightmode.scss
index b5da92a82..b9cc190d8 100644
--- a/src/styles/nightmode.scss
+++ b/src/styles/nightmode.scss
@@ -6,7 +6,7 @@
     fill: #fff;
   }
 
-  .bismillah, .text-arabic b{
+  #bismillah, .text-arabic b{
     color: #fff;
   }