diff --git a/src/App.scss b/src/App.scss
index 47886e31..d96cecd7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -263,3 +263,10 @@ attention {
 nav {
     z-index: 1000;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .2s
+}
+.fade-enter, .fade-leave-active {
+  opacity: 0
+}
diff --git a/src/App.vue b/src/App.vue
index dd05c569..e46419e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,9 @@
         <nav-panel></nav-panel>
         <notifications v-if="currentUser"></notifications>
       </sidebar>
-      <router-view></router-view>
+      <transition name="fade">
+        <router-view></router-view>
+      </transition>
     </div>
   </div>
 </template>