diff --git a/src/client.js b/src/client.js
index e913d3a1f..8d8fc1933 100644
--- a/src/client.js
+++ b/src/client.js
@@ -50,7 +50,7 @@ if (typeof window !== 'undefined') {
   });
 }
 
-match({ history, routes: routes() }, (error, redirectLocation, renderProps) => {
+match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
   const component = (
     <Router
       {...renderProps}
diff --git a/src/components/FacebookButton/index.js b/src/components/FacebookButton/index.js
index 42086f9ad..07a1066af 100644
--- a/src/components/FacebookButton/index.js
+++ b/src/components/FacebookButton/index.js
@@ -39,7 +39,7 @@ export default class FacebookLogin extends Component {
     size: 'md',
     fields: 'first_name,name,picture',
     cssClass: 'btn btn-facebook btn-',
-    version: '2.5'
+    version: '2.7'
   };
 
   componentDidMount() {
diff --git a/src/components/IndexHeader/Nav/index.js b/src/components/IndexHeader/Nav/index.js
index 5954e430b..cdb076cdb 100644
--- a/src/components/IndexHeader/Nav/index.js
+++ b/src/components/IndexHeader/Nav/index.js
@@ -1,9 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
+import { connect } from 'react-redux';
 
-class IndexHeaderNav extends Component {
+
+export class IndexHeaderNav extends Component {
   static propTypes = {
-    navlink: PropTypes.bool
+    user: PropTypes.object
   };
 
   state = {
@@ -17,33 +19,9 @@ class IndexHeaderNav extends Component {
   }
 
   links() {
+    const { user } = this.props;
     let classNames = `links ${this.state.open ? 'open' : ''}`;
 
-    if (this.props.navlink === false) {
-      return (
-        <ul className={classNames}>
-          <li>
-            <Link to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
-              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
-            </a>
-          </li>
-          <li>
-            <a href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">Legacy Quran.com</a>
-          </li>
-          <li>
-            <a href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
-              Contact us
-            </a>
-          </li>
-        </ul>
-      );
-    }
-
     return (
       <ul className={classNames}>
         <li>
@@ -69,6 +47,14 @@ class IndexHeaderNav extends Component {
             Contact us
           </a>
         </li>
+        {
+          user &&
+            <li>
+              <Link to="/profile" data-metrics-event-name="IndexHeader:Link:Profile">
+                {user.firstName}
+              </Link>
+            </li>
+        }
       </ul>
     );
   }
@@ -82,4 +68,8 @@ class IndexHeaderNav extends Component {
   }
 }
 
-export default IndexHeaderNav;
+export default connect(
+  state => ({
+    user: state.auth.user
+  })
+)(IndexHeaderNav);
diff --git a/src/components/IndexHeader/index.js b/src/components/IndexHeader/index.js
index 37f7fbfa2..e2baaecdb 100644
--- a/src/components/IndexHeader/index.js
+++ b/src/components/IndexHeader/index.js
@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
 
 import SearchInput from '../SearchInput';
-import IndexHeaderNav from './Nav';
+import Nav from './Nav';
 
 import debug from '../../helpers/debug';
 
@@ -10,8 +10,7 @@ const logo = require('../../../static/images/logo-lg-w.png');
 
 export default class IndexHeader extends Component {
   static propTypes = {
-    noSearch: PropTypes.bool,
-    navlink: PropTypes.any
+    noSearch: PropTypes.bool
   };
 
   renderSearch() {
@@ -29,7 +28,7 @@ export default class IndexHeader extends Component {
 
     return (
       <div className="index-header" style={{backgroundColor: '#2CA4AB'}}>
-        <IndexHeaderNav navlink={this.props.navlink} />
+        <Nav />
         <div className="container">
           <div className="row">
             <div className="col-md-10 col-md-offset-1 text-center">
diff --git a/src/components/QuranNav/index.js b/src/components/QuranNav/index.js
new file mode 100644
index 000000000..b26c1092c
--- /dev/null
+++ b/src/components/QuranNav/index.js
@@ -0,0 +1,76 @@
+import React, { PropTypes } from 'react';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+import Navbar from 'react-bootstrap/lib/Navbar';
+import Nav from 'react-bootstrap/lib/Nav';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import NavItem from 'react-bootstrap/lib/NavItem';
+import Image from 'react-bootstrap/lib/Image';
+const Header = Navbar.Header;
+const Collapse = Navbar.Collapse;
+const Toggle = Navbar.Toggle;
+import { connect } from 'react-redux';
+
+const styles = require('./style.scss');
+
+export const QuranNav = ({ user }) => (
+  <Navbar inverse fluid className={styles.nav}>
+    <Header>
+      <Toggle />
+    </Header>
+    <Collapse>
+      <Nav />
+      <Nav pullRight>
+        <LinkContainer to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
+          <NavItem>
+            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
+        </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
+          </NavItem>
+        </LinkContainer>
+        <NavItem href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
+          Contact us
+        </NavItem>
+        {
+          user &&
+            <NavDropdown
+              title={
+                <span className={styles.name}>
+                  <Image src={user.image} className={styles.image} circle />
+                  {user.firstName}
+                </span>
+              }
+              id="user-dropdown"
+            >
+              <LinkContainer
+                to="/profile"
+                data-metrics-event-name="IndexHeader:Link:Profile"
+              >
+                <MenuItem eventKey={3.1}>Profile</MenuItem>
+              </LinkContainer>
+              <MenuItem eventKey={3.3}>Logout</MenuItem>
+            </NavDropdown>
+        }
+      </Nav>
+    </Collapse>
+  </Navbar>
+);
+
+QuranNav.propTypes = {
+  user: PropTypes.object
+};
+
+export default connect(
+  state => ({
+    user: state.auth.user
+  })
+)(QuranNav);
diff --git a/src/components/QuranNav/style.scss b/src/components/QuranNav/style.scss
new file mode 100644
index 000000000..58612775b
--- /dev/null
+++ b/src/components/QuranNav/style.scss
@@ -0,0 +1,27 @@
+$navbar-height: 40px;
+.nav {
+  min-height: $navbar-height;
+  border-radius: 0px;
+  margin-bottom: 0px;
+
+  :global(.navbar-nav > li > a) {
+    padding-top: ($navbar-height - 20) / 2;
+    padding-bottom: ($navbar-height - 20) / 2;
+  }
+
+  &.transparent{
+    background: transparent;
+  }
+}
+
+.name{
+  padding-left: 25px;
+}
+
+.image{
+  width: 30px;
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+}
diff --git a/src/containers/Profile/index.js b/src/containers/Profile/index.js
new file mode 100644
index 000000000..7c29e964e
--- /dev/null
+++ b/src/containers/Profile/index.js
@@ -0,0 +1,45 @@
+import React, { Component, PropTypes } from 'react';
+import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+import Grid from 'react-bootstrap/lib/Grid';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Image from 'react-bootstrap/lib/Image';
+
+import QuranNav from 'components/QuranNav';
+
+const styles = require('./style.scss');
+
+@connect(
+  state => ({
+    user: state.auth.user
+  })
+)
+export default class Profile extends Component {
+  static propTypes = {
+    user: PropTypes.object
+  };
+
+  something() {}
+  render() {
+    const { user } = this.props;
+
+    return (
+      <div>
+        <Helmet title="The Noble Quran - القرآن الكريم" titleTemplate="%s" />
+        <QuranNav />
+        <div className={styles.header} />
+        <Grid>
+          <Row>
+            <Col md={12} className="text-center">
+              <Image src={`${user.image}?type=large`} circle className={styles.image} />
+              <h2>
+                {user.name}
+              </h2>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
diff --git a/src/containers/Profile/style.scss b/src/containers/Profile/style.scss
new file mode 100644
index 000000000..35cbded3f
--- /dev/null
+++ b/src/containers/Profile/style.scss
@@ -0,0 +1,13 @@
+@import '../../styles/variables.scss';
+
+.header{
+  background: $brand-primary;
+  height: 7rem;
+  padding-top: 15px;
+}
+
+.image{
+  margin: -70px auto 40px;
+  display: block;
+  height: 10rem;
+}
diff --git a/src/containers/Surah/Header/index.js b/src/containers/Surah/Header/index.js
index f178c4204..51e6ba622 100644
--- a/src/containers/Surah/Header/index.js
+++ b/src/containers/Surah/Header/index.js
@@ -14,7 +14,7 @@ const SurahHeader = ({ surah, children }) => {
   debug('component:SurahHeader', 'Render');
 
   return (
-    <Navbar className="montserrat" fixedTop fluid>
+    <Navbar className="montserrat surah" fixedTop fluid>
       <Header>
         <Brand>
           <Title surah={surah} />
diff --git a/src/helpers/ApiClient.js b/src/helpers/ApiClient.js
index 6116691b0..84e3e4bc7 100644
--- a/src/helpers/ApiClient.js
+++ b/src/helpers/ApiClient.js
@@ -1,6 +1,7 @@
 import superagent from 'superagent';
 import qs from 'qs';
 import { decamelizeKeys } from 'humps';
+import cookie from 'react-cookie';
 
 import config from '../config';
 
@@ -33,6 +34,10 @@ export default class {
           }));
         }
 
+        if (cookie.load('accessToken')) {
+          request.set('Authorization', `Bearer ${cookie.load('accessToken')}`);
+        }
+
         if (__SERVER__ && req.get('cookie')) {
           request.set('cookie', req.get('cookie'));
         }
diff --git a/src/redux/actions/auth.js b/src/redux/actions/auth.js
index f9bb29df8..a38386751 100644
--- a/src/redux/actions/auth.js
+++ b/src/redux/actions/auth.js
@@ -1,15 +1,25 @@
-import { FACEBOOK, FACEBOOK_SUCCESS, FACEBOOK_FAILURE, LOGOUT_SUCCESS } from '../constants/auth';
+import cookie from 'react-cookie';
+
+import {
+  FACEBOOK,
+  FACEBOOK_SUCCESS,
+  FACEBOOK_FAILURE,
+  LOGOUT_SUCCESS,
+  LOAD,
+  LOAD_SUCCESS,
+  LOAD_FAILURE
+} from '../constants/auth';
 
 export function isLoaded(globalState) {
   return globalState.auth && globalState.auth.loaded;
 }
 
-// export function load() {
-//   return {
-//     types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
-//     promise: (client) => client.get('/users/load_user')
-//   };
-// }
+export function load() {
+  return {
+    types: [LOAD, LOAD_SUCCESS, LOAD_FAILURE],
+    promise: (client) => client.get('/onequran/api/v1/auth/current')
+  };
+}
 
 export function facebook() {
   return {
@@ -23,7 +33,7 @@ export function logout() {
     type: LOGOUT_SUCCESS
   };
 }
-//
-// export function hasAccessToken() {
-//   return !!cookie.load('accessToken');
-// }
+
+export function hasAccessToken() {
+  return !!cookie.load('accessToken');
+}
diff --git a/src/redux/constants/auth.js b/src/redux/constants/auth.js
index eca63eaaa..1e6f3eb9a 100644
--- a/src/redux/constants/auth.js
+++ b/src/redux/constants/auth.js
@@ -2,3 +2,6 @@ export const FACEBOOK = '@@quran/auth/FACEBOOK';
 export const FACEBOOK_SUCCESS = '@@quran/auth/FACEBOOK_SUCCESS';
 export const FACEBOOK_FAILURE = '@@quran/auth/FACEBOOK_FAILURE';
 export const LOGOUT_SUCCESS = '@@quran/auth/LOGOUT_SUCCESS';
+export const LOAD = '@@quran/auth/LOAD';
+export const LOAD_SUCCESS = '@@quran/auth/LOAD_SUCCESS';
+export const LOAD_FAILURE = '@@quran/auth/LOAD_FAILURE';
diff --git a/src/redux/modules/auth.js b/src/redux/modules/auth.js
index 9f35548cf..71a5aa306 100644
--- a/src/redux/modules/auth.js
+++ b/src/redux/modules/auth.js
@@ -1,9 +1,10 @@
-// import cookie from 'react-cookie';
+import cookie from 'react-cookie';
 
 import {
-  FACEBOOK,
   FACEBOOK_SUCCESS,
   FACEBOOK_FAILURE,
+  LOGOUT_SUCCESS,
+  LOAD_SUCCESS
 } from '../constants/auth';
 
 const initialState = {
@@ -12,10 +13,14 @@ const initialState = {
 
 export default function reducer(state = initialState, action = {}) {
   switch (action.type) {
-    case FACEBOOK:
-      return state;
+    case LOAD_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        user: action.result.user
+      };
     case FACEBOOK_SUCCESS:
-      cookie.save('oauthToken', action.result.user.oauthToken);
+      cookie.save('accessToken', action.result.user.accessToken);
 
       return {
         ...state,
@@ -25,7 +30,7 @@ export default function reducer(state = initialState, action = {}) {
     case FACEBOOK_FAILURE:
       return state;
     case LOGOUT_SUCCESS:
-      cookie.remove('oauthToken');
+      cookie.remove('accessToken');
 
       return {
         ...state,
diff --git a/src/redux/modules/reducer.js b/src/redux/modules/reducer.js
index 0a94699c1..5336d010c 100644
--- a/src/redux/modules/reducer.js
+++ b/src/redux/modules/reducer.js
@@ -9,10 +9,12 @@ import lines from './lines';
 import options from './options';
 import searchResults from './searchResults';
 import fontFaces from './fontFaces';
+import auth from './auth';
 
 export default combineReducers({
   routing: routerReducer,
   reduxAsyncConnect,
+  auth,
   surahs,
   ayahs,
   audioplayer,
diff --git a/src/routes.js b/src/routes.js
index bf6981921..665772da1 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,40 +2,74 @@
 import React from 'react';
 import IndexRoute from 'react-router/lib/IndexRoute';
 import Route from 'react-router/lib/Route';
+
+import { isLoaded as isAuthLoaded, load as loadAuth, hasAccessToken } from 'redux/actions/auth';
+
 import checkValidSurah from './utils/checkValidSurah';
 import App from './containers/App';
 
-export default () => (
-  <Route path="/" component={App}>
-    <IndexRoute getComponent={(nextState, cb) => System.import('./containers/Home').then(module => cb(null, module))} />
+export default (store) => {
+  const requireLogin = (nextState, replace, cb) => {
+    function checkAuth() {
+      const { auth: { user }} = store.getState();
+      if (!user) {
+        // oops, not logged in, so can't be here!
+        replace('/');
+      }
+      cb();
+    }
+
+    if (!isAuthLoaded(store.getState())) {
+      store.dispatch(loadAuth()).then(checkAuth);
+    } else {
+      checkAuth();
+    }
+  };
+
+  const shouldAuth = (nextState, replace, cb) => {
+    if (!isAuthLoaded(store.getState()) && hasAccessToken()) {
+      return store.dispatch(loadAuth()).then(() => cb());
+    }
+
+    return cb();
+  };
+
+  return (
+    <Route path="/" component={App} onEnter={shouldAuth}>
+      <IndexRoute getComponent={(nextState, cb) => System.import('./containers/Home').then(module => cb(null, module))} />
+
+      <Route path="/donations" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module))} />
+      <Route path="/contributions" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module))} />
 
-    <Route path="/donations" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module))} />
-    <Route path="/contributions" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module))} />
+      <Route path="/about" getComponent={(nextState, cb) => System.import('./containers/About').then(module => cb(null, module))} />
 
-    <Route path="/about" getComponent={(nextState, cb) => System.import('./containers/About').then(module => cb(null, module))} />
+      <Route path="/contact" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module))} />
+      <Route path="/contactus" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module))} />
 
-    <Route path="/contact" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module))} />
-    <Route path="/contactus" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module))} />
+      <Route path="/mobile" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module))} />
+      <Route path="/apps" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module))} />
 
-    <Route path="/mobile" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module))} />
-    <Route path="/apps" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module))} />
+      <Route path="/error/:errorKey" getComponent={(nextState, cb) => System.import('./containers/Error').then(module => cb(null, module))} />
 
-    <Route path="/error/:errorKey" getComponent={(nextState, cb) => System.import('./containers/Error').then(module => cb(null, module))} />
+      <Route path="/search" getComponent={(nextState, cb) => System.import('./containers/Search').then(module => cb(null, module))} />
 
-    <Route path="/search" getComponent={(nextState, cb) => System.import('./containers/Search').then(module => cb(null, module))} />
+      <Route path="/login" getComponent={(nextState, cb) => System.import('./containers/Login').then(module => cb(null, module))} />
 
-    <Route path="/login" getComponent={(nextState, cb) => System.import('./containers/Login').then(module => cb(null, module))} />
+      <Route onEnter={requireLogin}>
+        <Route path="/profile" getComponent={(nextState, cb) => System.import('./containers/Profile').then(module => cb(null, module))} />
+      </Route>
 
-    <Route
-      path="/:surahId:(:range)"
-      getComponent={(nextState, cb) => System.import('./containers/Surah').then(module => cb(null, module)).catch(err => console.trace(err))}
-      onEnter={checkValidSurah}
-    />
+      <Route
+        path="/:surahId:(:range)"
+        getComponent={(nextState, cb) => System.import('./containers/Surah').then(module => cb(null, module)).catch(err => console.trace(err))}
+        onEnter={checkValidSurah}
+      />
 
-    <Route
-      path="/:surahId(/:range)"
-      getComponent={(nextState, cb) => System.import('./containers/Surah').then(module => cb(null, module)).catch(err => console.trace(err))}
-      onEnter={checkValidSurah}
-    />
-  </Route>
-);
+      <Route
+        path="/:surahId(/:range)"
+        getComponent={(nextState, cb) => System.import('./containers/Surah').then(module => cb(null, module)).catch(err => console.trace(err))}
+        onEnter={checkValidSurah}
+      />
+    </Route>
+  );
+};
diff --git a/src/server.js b/src/server.js
index 0c35c5d6c..6c95fe28b 100644
--- a/src/server.js
+++ b/src/server.js
@@ -53,7 +53,7 @@ server.use((req, res, next) => {
   store.dispatch(setUserAgent(req.useragent));
   store.dispatch(setOption(cookie.load('options') || {}));
   debug('Server', 'Executing navigate action');
-  match({ history, routes: routes(), location: req.originalUrl }, (error, redirectLocation, renderProps) => {
+  match({ history, routes: routes(store), location: req.originalUrl }, (error, redirectLocation, renderProps) => {
     debug('Server', 'Route match callback');
 
     if (redirectLocation) {
diff --git a/src/styles/components/MasterHeader.scss b/src/styles/components/MasterHeader.scss
index bf7497e0c..05b38fa20 100644
--- a/src/styles/components/MasterHeader.scss
+++ b/src/styles/components/MasterHeader.scss
@@ -1,6 +1,6 @@
 $content-padding: 10px 15px 5px 15px !important;
 $label-padding: 5px 20px;
-nav.navbar{
+nav.navbar.surah{
   background-color: $beige;
   width: 100%;
   right: 0px;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ff5f4a49f..728f51c67 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -31,6 +31,12 @@ $navbar-height: 240px * $proportion-factor;
 $navbar-default-bg: $beige;
 $navbar-default-link-active-bg: transparent;
 $navbar-default-border: transparent;
+
+$navbar-inverse-bg: $brand-primary;
+$navbar-inverse-link-color: #fff;
+$navbar-inverse-link-active-bg: transparent;
+$navbar-inverse-border: transparent;
+
 $navbar-collapse-width: 1000px;
 $navbar-scroll-up-height: 90px;