diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7454046..f53eca6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -19,12 +19,13 @@
             </b-collapse>
         </b-navbar>
         <br/>
-        <transition>
+        <transition name="fade" mode="out-in" appear>
             <router-view/>
         </transition>
     </div>
 </template>
 
+<!--suppress CssUnusedSymbol -->
 <style>
     #app {
         font-family: "Avenir", Helvetica, Arial, sans-serif;
@@ -33,4 +34,10 @@
         text-align: center;
         color: #2c3e50;
     }
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .5s;
+    }
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+        opacity: 0;
+    }
 </style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 99c7587..9375a5a 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Router from "vue-router";
+import Home from "./views/Home.vue";
 import StartNew from "./views/StartNew.vue";
 import Observation from "./views/Observation.vue";
 import Stats from "./views/Stats.vue";
@@ -12,6 +13,11 @@ Vue.use(Router);
 
 export default new Router({
     routes: [
+        {
+            path: "/",
+            name: "home",
+            component: Home
+        },
         {
             path: "/new",
             name: "startnew",
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
new file mode 100644
index 0000000..b600cba
--- /dev/null
+++ b/frontend/src/views/Home.vue
@@ -0,0 +1,34 @@
+<template>
+    <b-container>
+        <b-row>
+            <b-col>
+                <h1>Training Observations Database</h1>
+            </b-col>
+        </b-row>
+        <b-row class="my-3">
+            <b-col>
+                <b-button size="lg" to="/new">Start a new observation</b-button>
+            </b-col>
+        </b-row>
+        <b-row class="my-3">
+            <b-col>
+                <b-button size="lg" to="/observations">Read past observations</b-button>
+            </b-col>
+        </b-row>
+        <b-row class="my-3">
+            <b-col>
+                <b-button size="lg" to="/stats">View daily observation statistics</b-button>
+            </b-col>
+        </b-row>
+    </b-container>
+</template>
+
+<script>
+    export default {
+        name: "Home"
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file