diff --git a/app/app.component.html b/app/app.component.html
index 85ae5ad..6665d52 100644
--- a/app/app.component.html
+++ b/app/app.component.html
@@ -1,3 +1,4 @@
+<duckbook-header></duckbook-header>
 <a routerLink="/dashboard">Dashboard</a>
 <a routerLink="/ducks">Ducks</a>
 <router-outlet></router-outlet>
diff --git a/app/app.module.ts b/app/app.module.ts
index 882df90..b057e3f 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -12,6 +12,7 @@ import { AppComponent } from "./app.component";
 import { DuckDetailComponent } from "./duck-detail.component";
 import { DashboardComponent } from "./dashboard.component";
 import { DucksComponent } from "./ducks.component";
+import { HeaderComponent } from "./header.component";
 
 import { DuckService } from "./duck.service";
 import { UserService } from "./user.service";
@@ -27,7 +28,8 @@ import { UserService } from "./user.service";
         AppComponent,
         DashboardComponent,
         DuckDetailComponent,
-        DucksComponent
+        DucksComponent,
+        HeaderComponent
     ],
     providers: [
         DuckService,
diff --git a/app/header.component.html b/app/header.component.html
new file mode 100644
index 0000000..5daff73
--- /dev/null
+++ b/app/header.component.html
@@ -0,0 +1,26 @@
+<header>
+    <nav class="navbar navbar-default">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <button type="button"
+                        class="navbar-toggle collapsed"
+                        data-toggle="collapse"
+                        data-target="#duckbook-header-inner"
+                        aria-expanded="false">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">Rubber Duck Booking Tool</a>
+            </div>
+            <div class="collapse navbar-collapse" id="duckbook-header-inner">
+                <ul class="nav navbar-nav navbar-right">
+                    <li *ngIf="!userService.currentUser">
+                        <a href="#">Login</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
diff --git a/app/header.component.ts b/app/header.component.ts
new file mode 100644
index 0000000..84bd40e
--- /dev/null
+++ b/app/header.component.ts
@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UserService } from "./user.service";
+
+@Component({
+    moduleId: module.id,
+    selector: "duckbook-header",
+    templateUrl: "header.component.html"
+})
+export class HeaderComponent {
+    constructor(private userService: UserService) {}
+}