diff --git a/frontend/src/views/DatabaseUnavailable.vue b/frontend/src/views/DatabaseUnavailable.vue
index 932b812..a478b6e 100644
--- a/frontend/src/views/DatabaseUnavailable.vue
+++ b/frontend/src/views/DatabaseUnavailable.vue
@@ -2,12 +2,12 @@
     <b-container>
         <b-row class="my-3">
             <b-col>
-                <v-icon label="Database Error" scale="5">
-                    <v-icon name="database" style="color: black"></v-icon>
-                    <v-icon name="ban" scale="2" style="color: red"></v-icon>
-                </v-icon>
+                <v-icon name="desktop" style="color: black" scale="5"></v-icon>
+                <v-icon class="mx-5 heartbeat" name="unlink" style="color: black" scale="4"></v-icon>
+                <v-icon name="database" style="color: black" scale="5"></v-icon>
             </b-col>
         </b-row>
+        <br/>
         <b-row class="my-3">
             <b-col>
                 <h1>Database Unavailable</h1>
@@ -24,11 +24,88 @@
 
 <script>
 import "vue-awesome/icons/database";
-import "vue-awesome/icons/ban";
+import "vue-awesome/icons/unlink";
+import "vue-awesome/icons/desktop";
 export default {
   name: "DatabaseUnavailable"
 };
 </script>
 
 <style scoped>
+.heartbeat {
+  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+/* ----------------------------------------------
+ * Generated by Animista on 2018-10-11
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+@-webkit-keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+@keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
 </style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index ce58938..7f931a1 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -2,32 +2,52 @@
     <b-container>
         <b-row>
             <b-col>
-                <h1>Training Observations Database</h1>
+                <h1 class="tracking-in-expand-fwd">Training Observations Database</h1>
             </b-col>
         </b-row>
-        <b-row class="my-3">
-            <b-col>
-                <b-button size="lg" to="/new" variant="primary">Start a new observation</b-button>
+        <b-row class="my-3" align-h="center">
+            <b-col lg="6" sm="12">
+                <b-button class="scale-in-center" size="lg" to="/new" variant="primary" block><v-icon name="file-alt"/> 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-row class="my-3" align-h="center">
+            <b-col lg="6" sm="12">
+                <b-button class="scale-in-center" size="lg" to="/observations" block><v-icon name="th-list"/> 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-row class="my-3" align-h="center">
+            <b-col lg="6" sm="12">
+                <b-button class="scale-in-center" size="lg" to="/stats" block><v-icon name="chart-line"/> View daily observation statistics</b-button>
             </b-col>
         </b-row>
     </b-container>
 </template>
 
 <script>
+import "vue-awesome/icons/file-alt";
+import "vue-awesome/icons/th-list";
+import "vue-awesome/icons/chart-line";
 export default {
   name: "Home"
 };
 </script>
 
+<!--suppress CssUnusedSymbol -->
 <style scoped>
+.fa-icon {
+  width: auto;
+  height: 1em; /* or any other relative font sizes */
+
+  /* You would have to include the following two lines to make this work in Safari */
+  max-width: 100%;
+  max-height: 100%;
+}
+.scale-in-center{-webkit-animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both}
+.tracking-in-expand-fwd{-webkit-animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both}
+/* ----------------------------------------------
+* Generated by Animista on 2018-10-11
+* w: http://animista.net, t: @cssanimista
+* ---------------------------------------------- */
+@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
+@-webkit-keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
 </style>