diff --git a/README.md b/README.md
index ed19943..2d7e909 100644
--- a/README.md
+++ b/README.md
@@ -77,3 +77,4 @@ There are no code listings in this chapter.
 
 ### Chapter 10: Bootstrap
    * Bootstrap Installation: [Full source](../../tree/10-bootstrap-installation) | [Diffs from previous step](../../compare/09-using-delete-api...10-bootstrap-installation)
+   * Navigation: [Full source](../../tree/10-navigation) | [Diffs from previous step](../../compare/10-bootstrap-installation...10-navigation)
diff --git a/package.json b/package.json
index 11920b7..d6b9dc7 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "react-bootstrap": "^0.30.6",
     "react-dom": "^15.3.1",
     "react-router": "^2.7.0",
+    "react-router-bootstrap": "^0.23.1",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.0",
     "whatwg-fetch": "^1.0.0"
diff --git a/src/App.jsx b/src/App.jsx
index 21484a9..c2f94c5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,8 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, Redirect, browserHistory, withRouter } from 'react-router';
+import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
 
 import IssueList from './IssueList.jsx';
 import IssueEdit from './IssueEdit.jsx';
@@ -9,17 +11,38 @@ import IssueEdit from './IssueEdit.jsx';
 const contentNode = document.getElementById('contents');
 const NoMatch = () => <p>Page Not Found</p>;
 
+const Header = () => (
+  <Navbar fluid>
+    <Navbar.Header>
+      <Navbar.Brand>Issue Tracker</Navbar.Brand>
+    </Navbar.Header>
+    <Nav>
+      <LinkContainer to="/issues">
+        <NavItem>Issues</NavItem>
+      </LinkContainer>
+      <LinkContainer to="/reports">
+        <NavItem>Reports</NavItem>
+      </LinkContainer>
+    </Nav>
+    <Nav pullRight>
+      <NavItem><Glyphicon glyph="plus" /> Create Issue</NavItem>
+      <NavDropdown id="user-dropdown" title={<Glyphicon glyph="option-horizontal" />} noCaret>
+        <MenuItem>Logout</MenuItem>
+      </NavDropdown>
+    </Nav>
+  </Navbar>
+);
+
 const App = (props) => (
   <div>
-    <div className="header">
-      <h1>Issue Tracker</h1>
-    </div>
+    <Header />
     <div className="container-fluid">
       {props.children}
-    </div>
-    <div className="footer">
-      Full source code available at this <a href="/vasansr/pro-mern-stack">
-      GitHub repository</a>.
+      <hr />
+      <h5><small>
+        Full source code available at this <a href="/vasansr/pro-mern-stack">
+        GitHub repository</a>.
+      </small></h5>
     </div>
   </div>
 );
diff --git a/static/index.html b/static/index.html
index 1de67e8..fd3aeba 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,15 +4,11 @@
 <head>
   <meta charset="UTF-8" />
   <title>Pro MERN Stack</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" >
   <style>
     table.bordered-table th, td {border: 1px solid silver; padding: 4px;}
     table.bordered-table {border-collapse: collapse;}
-    .header {border-bottom: 1px solid silver; margin-bottom: 20px;}
-    .footer {
-      border-top: 1px solid silver; padding-top: 5px; margin-top: 20px;
-      font-family: Helvetica; font-size: 10px; color: grey;
-    }
     input.invalid {border-color: red;}
     div.error {color: red;}
   </style>
diff --git a/webpack.config.js b/webpack.config.js
index 6d9fdf4..5f0830b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,7 @@ module.exports = {
   entry: {
     app: './src/App.jsx',
     vendor: [
-      'react', 'react-dom', 'react-router', 'react-bootstrap',
+      'react', 'react-dom', 'react-router', 'react-bootstrap', 'react-router-bootstrap',
       'whatwg-fetch', 'babel-polyfill',
     ],
   },
