diff --git a/frontend/index.html b/frontend/index.html
index 50f2ae5..334ecab 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,11 +5,11 @@
     <title>Outrigger Dashboard</title>
 
     <link rel="shortcut icon" href="favicon.ico">
-
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
 
     <!-- Fonts  -->
     <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,700|Source+Sans+Pro:200,300,400,600" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
     <!-- Custom styling -->
     <style>
@@ -28,4 +28,8 @@
     <div id="app"></div>
     <script src="dist/build.js"></script>
   </body>
+
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
 </html>
diff --git a/frontend/src/components/App.vue b/frontend/src/components/App.vue
index 91c8347..9b3f3ab 100644
--- a/frontend/src/components/App.vue
+++ b/frontend/src/components/App.vue
@@ -1,21 +1,44 @@
 <template>
   <div id="app" class="container">
-    <div class="jumbotron">
-      <div class="project-title__wrapper">
-        <div class="media-left media-middle">
-          <img class="logo-image" src="../assets/logo.png">
-        </div>
-        <div class="media-body">
-          <h1 class="project-name">Outrigger Dashboard</h1>
-        </div>
+
+    <nav class="navbar navbar-light bg-light navbar-expand-lg fixed-top">
+      <a class="navbar-brand" href="#"><img src="../assets/logo.png" height="40" width="40" alt="Outrigger Logo" /></a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item"><a class="nav-link" href="http://outrigger.sh" title="Outrigger Homepage">What is Outrigger?</a></li>
+          <li class="nav-item"><a class="nav-link" href="http://docs.outrigger.sh" title="Technical Documentation">Documentation</a></li>
+          <li class="nav-item"><a class="nav-link" href="https://github.com/search?o=desc&q=topic%3Aoutrigger+org%3Aphase2&s=updated&type=Repositories" title="Review all the Outrigger repositories on Github"><i class="fa fa-github" aria-hidden="true"></i>&thinsp;Contribute</a></li>
+          <li class="nav-item"><a class="nav-link" href="http://slack.outrigger.sh/" title="Join us on Slack!"><i class="fa fa-slack" aria-hidden="true"></i>&thinsp;Slack</a></li>
+        </ul>
+        <ul class="navbar-nav ml-auto">
+          <li role="separator" class="dropdown-divider"></li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="supportDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              File an Issue
+            </a>
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="supportDropdown">
+              <a class="dropdown-item" href="https://github.com/phase2/outrigger-dashboard/issues">Dashboard issues</a>
+              <a class="dropdown-item" href="https://github.com/phase2/outrigger-docs/issues">Documentation issues</a>
+              <a class="dropdown-item" href="https://github.com/phase2/rig/issues">Outrigger CLI (rig) issues</a>
+            </div>
+          </li>
+        </ul>
       </div>
-    </div>
-    <div class="container">
+    </nav>
+
+    <header class="jumbotron">
+      <h1 class="display-3 mt-5">Outrigger Dashboard</h1>
+    </header>
+
+    <main class="container">
       <div class="row">
         <dns-records :entries="dnsRecords"></dns-records>
       </div>
       <project-list :projects="projects"></project-list>
-    </div>
+    </main>
   </div>
 </template>
 
diff --git a/frontend/src/components/Project.vue b/frontend/src/components/Project.vue
index 19f48aa..4747b96 100644
--- a/frontend/src/components/Project.vue
+++ b/frontend/src/components/Project.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col project table-responsive">
+  <div class="project table-responsive">
     <h2>{{ name }}</h2>
     <table class="table table-striped table-hover table-bordered">
       <thead>
diff --git a/frontend/src/components/ProjectList.vue b/frontend/src/components/ProjectList.vue
index 0fa7609..b6218f5 100644
--- a/frontend/src/components/ProjectList.vue
+++ b/frontend/src/components/ProjectList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="project-list" class="row">
+  <div id="project-list">
     <project v-for="(containers, name) in projects" :name="name" :containers="containers"></project>
   </div>
 </template>