diff --git a/2-react-router/src/js/components/layout/Nav.js b/2-react-router/src/js/components/layout/Nav.js
index 5657e27b..b768499b 100644
--- a/2-react-router/src/js/components/layout/Nav.js
+++ b/2-react-router/src/js/components/layout/Nav.js
@@ -17,9 +17,9 @@ export default class Nav extends React.Component {
   render() {
     const { location } = this.props;
     const { collapsed } = this.state;
-    const featuredClass = location.pathname === "/" ? "active" : "";
-    const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
-    const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
+    // const featuredClass = location.pathname === "/" ? "active" : "";
+    // const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
+    // const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
     const navClass = collapsed ? "collapse" : "";
 
     return (
@@ -35,13 +35,13 @@ export default class Nav extends React.Component {
           </div>
           <div class={"navbar-collapse " + navClass} id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav">
-              <li class={featuredClass}>
+              <li activeClassName="active" onlyActiveOnIndex={true}>
                 <IndexLink to="/" onClick={this.toggleCollapse.bind(this)}>Featured</IndexLink>
               </li>
-              <li class={archivesClass}>
+              <li activeClassName="active">
                 <Link to="archives" onClick={this.toggleCollapse.bind(this)}>Archives</Link>
               </li>
-              <li class={settingsClass}>
+              <li activeClassName="active">
                 <Link to="settings" onClick={this.toggleCollapse.bind(this)}>Settings</Link>
               </li>
             </ul>