diff --git a/frontend/src/main.js b/frontend/src/main.js
index b85c515..7aa78b5 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -10,9 +10,11 @@ import "bootstrap-vue/dist/bootstrap-vue.css";
 import datePicker from "vue-bootstrap-datetimepicker";
 import "pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css";
 import Icon from "vue-awesome/components/Icon";
+import titleMixin from './mixins/titleMixin';
 
 Vue.config.productionTip = false;
 axios.defaults.baseURL = "/api";
+Vue.mixin(titleMixin);
 Vue.use(VueAxios, axios);
 Vue.use(BootstrapVue);
 Vue.use(datePicker);
diff --git a/frontend/src/mixins/titleMixin.js b/frontend/src/mixins/titleMixin.js
new file mode 100644
index 0000000..f984743
--- /dev/null
+++ b/frontend/src/mixins/titleMixin.js
@@ -0,0 +1,15 @@
+function getTitle(vm) {
+  const { title } = vm.$options;
+  if (title) {
+    return typeof title === "function" ? title.call(vm) : title;
+  }
+}
+
+export default {
+  created() {
+    const title = getTitle(this);
+    if (title) {
+      document.title = title;
+    }
+  }
+};
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index e537df2..e86f8b5 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -25,7 +25,8 @@
 import "vue-awesome/icons/briefcase";
 import "vue-awesome/icons/home";
 export default {
-  name: "About"
+  name: "About",
+  title: "About"
 };
 </script>
 
diff --git a/frontend/src/views/DatabaseUnavailable.vue b/frontend/src/views/DatabaseUnavailable.vue
index a478b6e..1857933 100644
--- a/frontend/src/views/DatabaseUnavailable.vue
+++ b/frontend/src/views/DatabaseUnavailable.vue
@@ -27,7 +27,8 @@ import "vue-awesome/icons/database";
 import "vue-awesome/icons/unlink";
 import "vue-awesome/icons/desktop";
 export default {
-  name: "DatabaseUnavailable"
+  name: "DatabaseUnavailable",
+  title: "Database Error"
 };
 </script>
 
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index d238ded..f2e78b0 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -28,7 +28,8 @@ import "vue-awesome/icons/file-alt";
 import "vue-awesome/icons/th-list";
 import "vue-awesome/icons/chart-line";
 export default {
-  name: "Home"
+  name: "Home",
+  title: "Observations Database"
 };
 </script>
 
diff --git a/frontend/src/views/NewSite.vue b/frontend/src/views/NewSite.vue
index 558f4f7..60ae137 100644
--- a/frontend/src/views/NewSite.vue
+++ b/frontend/src/views/NewSite.vue
@@ -23,6 +23,7 @@ import Vue from "vue";
 
 export default {
   name: "newSite",
+  title: "New Site",
   data: function() {
     return {
       siteName: null,
diff --git a/frontend/src/views/NewTutor.vue b/frontend/src/views/NewTutor.vue
index a454f47..1af5f61 100644
--- a/frontend/src/views/NewTutor.vue
+++ b/frontend/src/views/NewTutor.vue
@@ -24,6 +24,7 @@
 import Vue from "vue";
 export default {
   name: "newTutor",
+  title: "New Tutor",
   data() {
     return {
       siteOptions: [],
diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index da08020..b937517 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -127,6 +127,7 @@ import Vue from "vue";
 
 export default {
   name: "observation",
+  title: "Observation",
   data: function() {
     return {
       observations: [
diff --git a/frontend/src/views/ObservationComplete.vue b/frontend/src/views/ObservationComplete.vue
index 88e2d84..2fd39df 100644
--- a/frontend/src/views/ObservationComplete.vue
+++ b/frontend/src/views/ObservationComplete.vue
@@ -12,6 +12,7 @@
 import { mapState } from "vuex";
 export default {
   name: "ObservationComplete",
+  title: "Observation Complete",
   computed: {
     ...mapState(["description", "type", "whom", "site", "tutors"])
   }
diff --git a/frontend/src/views/StartNew.vue b/frontend/src/views/StartNew.vue
index 2bb6cb6..512967e 100644
--- a/frontend/src/views/StartNew.vue
+++ b/frontend/src/views/StartNew.vue
@@ -87,6 +87,7 @@ import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "startnew",
+  title: "Start New Observation",
   data() {
     return {
       siteOptions: [],
diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue
index 62c387e..87fa81e 100644
--- a/frontend/src/views/Stats.vue
+++ b/frontend/src/views/Stats.vue
@@ -67,6 +67,7 @@ var moment = require("moment");
 
 export default {
   name: "stats",
+  title: "Statistics",
   components: { StatsView },
   data: function() {
     return {
diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 5f05e5f..c5ca098 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/frontend/src/views/ViewObservations.vue
@@ -108,6 +108,7 @@ import "vue-awesome/icons/search";
 var moment = require("moment");
 export default {
   name: "viewobservations",
+  title: "Observations History",
   data: function() {
     return {
       startDate: moment().subtract(7, "days"),