diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c50521b..3033463 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,21 @@
 <template>
   <div id="app">
+    <!--
     <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/observation">Observation</router-link>
     </div>
-    <router-view/>
+    -->
+    <b-navbar id="nav" variant="info">
+      <b-navbar-brand href="#">Training Observations</b-navbar-brand>
+      <b-navbar-nav class="ml-auto">
+        <b-nav-item to="/">New Observation</b-nav-item>
+      </b-navbar-nav>
+    </b-navbar>
+    <br />
+    <transition>
+      <router-view/>
+    </transition>
   </div>
 </template>
 
@@ -17,12 +28,7 @@
   color: #2c3e50;
 }
 #nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
+  padding: 10px;
 }
 
 #nav a.router-link-exact-active {