diff --git a/css/main.css b/css/main.css
index b2f2393a..07f8ce3f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,6 @@
+#main {
+    padding-top: 70px;
+}
 
 /* Taken from http://stackoverflow.com/a/20548578 */
 .vcenter {
@@ -47,4 +50,4 @@
 .ascribe-table-item-column > * {
     display:table-cell;
     vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 093b06dd..7d19c1b0 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -11,9 +11,9 @@ let AscribeApp = React.createClass({
         return (
             <div>
                 <Header />
-                <navigation>
+                <nav>
                     <Link to="pieces">pieces</Link>
-                </navigation>
+                </nav>
                 <RouteHandler />
             </div> 
         );
diff --git a/js/components/header.js b/js/components/header.js
index 71d67197..c7ad3965 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -21,7 +21,37 @@ let Header = React.createClass({
 
     render() {
         return (
-            <div>hello {this.state.currentUser.username}</div>
+            <nav className="navbar navbar-default navbar-fixed-top">
+              <div className="container">
+                <div className="navbar-header">
+                  <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                    <span className="sr-only">Toggle navigation</span>
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                  </button>
+                  <a className="navbar-brand" href="#">
+                       <span>ascribe</span> 
+                       <span className="glyph-ascribe-spool-chunked"></span>
+                  </a>
+                </div>
+                <div id="navbar" className="navbar-collapse collapse">
+                  <ul className="nav navbar-nav navbar-right">
+                    <li className="dropdown">
+                      <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{this.state.currentUser.username} <span className="caret"></span></a>
+                      <ul className="dropdown-menu" role="menu">
+                        <li><a href="/art/faq/">Account Settings</a></li>
+                        <li className="divider"></li>
+                        <li><a href="/art/faq/">FAQ</a></li>
+                        <li><a href="/art/terms/">Terms of Service</a></li>
+                        <li className="divider"></li>
+                        <li><a href="/api/users/logout/">Log out</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </nav>
         )
     }
 });