diff --git a/webapp/config/HomeContent.html b/webapp/config/HomeContent.html
new file mode 100644
index 0000000..08e4d6d
--- /dev/null
+++ b/webapp/config/HomeContent.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html lang="en">
+
+</html>
\ No newline at end of file
diff --git a/webapp/src/components/HomePage.vue b/webapp/src/components/HomePage.vue
new file mode 100644
index 0000000..6a1ae23
--- /dev/null
+++ b/webapp/src/components/HomePage.vue
@@ -0,0 +1,36 @@
+<template>
+    <v-card>
+        <v-card-title class="big-title">
+            Welcome to WIS2 in a box!
+        </v-card-title>
+        <v-card-item>
+            At this page you can submit FM 12 SYNOP bulletin and monitor notifications from topics found in your wis2box.
+        </v-card-item>
+        <v-card-item v-html="homeContent"></v-card-item>
+    </v-card>
+</template>
+
+<script setup>
+
+import { ref, onMounted } from 'vue';
+
+const homeContent = ref('If you encounter any issues, please contact: <a href = "mailto: abc@example.com">abc@example.com</a>')
+
+if (import.meta.env.VITE_HOME_CONTENT_PATH != undefined) {
+    onMounted(async () => {
+        const response = await fetch(import.meta.env.VITE_HOME_CONTENT_PATH);
+        if (response.ok) {
+            homeContent.value = await response.text();
+        }
+    });
+}
+</script>
+
+<style scoped>
+
+.big-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+
+</style>
diff --git a/webapp/src/components/MonitoringPage.vue b/webapp/src/components/MonitoringPage.vue
index c39edf8..4e55c3b 100644
--- a/webapp/src/components/MonitoringPage.vue
+++ b/webapp/src/components/MonitoringPage.vue
@@ -1,15 +1,17 @@
 <template>
   <v-card-title class="big-title">Monitoring Dashboard</v-card-title>
 
-  <!-- Drop down selection for the dataset the user wants to monitor -->
-  <v-select label="Choose a dataset to monitor" v-model="selectedTitle" :items="titles" v-if="titles.length"></v-select>
+  <v-card-item>
+    <!-- Drop down selection for the topic the user wants to monitor -->
+    <v-select label="Choose a topic to monitor" v-model="selectedTopic" :items="topics" v-if="topics.length"></v-select>
+    
+    <!-- Search bar to search for a WSI and only monitor that station -->
+    <v-text-field label="Search a station to monitor (optional)" clearable />
+  </v-card-item>
 
-  <!-- Search bar to search for a WSI and only monitor that station -->
-  <v-text-field label="Search a station to monitor (optional)" clearable/>
-  
-  <!-- Dashboard visualising the notifications of the dataset selected -->
-  <NotificationDashboard :topicHierarchy="datasets[selectedTitle]" v-if="selectedTitle"/>
 
+  <!-- Dashboard visualising the notifications of the topic selected -->
+  <NotificationDashboard :topicHierarchy="selectedTopic" v-if="selectedTopic" />
 </template>
 
 <script>
@@ -26,30 +28,20 @@ export default defineComponent({
   data() {
     return {
       // Options for user to filter the dashboard (surface, upper air, etc)
-      datasets: {},
+      topics: [],
       // Title selected by the user, used to get the topic hierarchy
-      // from the datasets dictionary
-      selectedTitle: null
-    }
-  },
-  computed: {
-    // Get titles (the keys) from datasets dictionary by using Object.keys,
-    // used for the selection at the top of the page
-    titles() {
-      return Object.keys(this.datasets);
+      // from the topics array
+      selectedTopic: null
     }
   },
   methods: {
     // Method to get topic hierarchies and corresponding titles from the 
-    // discovery metadata, in order to allow the user to select the dataset
+    // discovery metadata, in order to allow the user to select the topic
     // dsisplayed in the dashboard
-    async getDatasets() {
+    async getTopics() {
       if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
-        console.log("Use test datasets");
-        this.datasets = {
-          "Synoptic weather observations from Romania": "rou/rnimh/data/core/weather/surface-based-observations/synop",
-          "Surface weather observations from Malawi": "mwi/mwi_met_centre/data/core/weather/surface-based-observations/synop"
-        };
+        console.log("Use test topics");
+        this.topics = ["rou/rnimh/data/core/weather/surface-based-observations/synop", "mwi/mwi_met_centre/data/core/weather/surface-based-observations/synop"];
       }
       else {
         const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
@@ -63,15 +55,13 @@ export default defineComponent({
             const data = await response.json();
             // If the features object is in the data
             if (data.features) {
-              // Populate the datasets dictionary with the titles as keys
-              // and corresponding topic hierarchies as items
-              this.datasets = data.features.reduce((acc, feature) => {
-                acc[feature.properties.title] = feature.properties["wmo:topicHierarchy"];
-                // acc: accumulator object, used to iteratively build
-                // this datasets dictionary
-                return acc;
-              }, {});
-              console.log("Datasets:", this.datasets);
+              // Use Array.map to create a new array of the topic hierarchies
+              this.topics = data.features.map(feature => {
+                if (feature.properties && feature.properties['wmo:topicHierarchy']) {
+                  return feature.properties['wmo:topicHierarchy']
+                }
+              });
+              console.log("Topics:", this.topics);
             }
             else {
               console.error("API response does not have features property");
@@ -85,8 +75,8 @@ export default defineComponent({
     }
   },
   mounted() {
-    // Get topic hierarchies and titles for the user to select a dataset
-    this.getDatasets();
+    // Get topic hierarchies and titles for the user to select a topic
+    this.getTopics();
   }
 });  
 </script>
diff --git a/webapp/src/components/SynopForm.vue b/webapp/src/components/SynopForm.vue
index c2ad418..c05c963 100644
--- a/webapp/src/components/SynopForm.vue
+++ b/webapp/src/components/SynopForm.vue
@@ -38,7 +38,7 @@
 
               <!-- Topic hierarchy selection -->
               <v-card-item>
-                <v-select label="Topic" v-model="hierarchy" :items="hierarchyList" v-if="hierarchyList.length"
+                <v-select label="Topic" v-model="topic" :items="topicList" v-if="topicList.length"
                   hint="Topic hierarchy for ingestion of data" persistent-hint></v-select>
               </v-card-item>
 
@@ -46,10 +46,10 @@
             <v-card-item>
               <!-- Show switch above the submit button on mobile -->
               <v-switch class="hidden-sm-and-up"
-                :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
+                :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !topic"
                 v-model="notificationsOnPending" label="Publish on WIS2" color="primary" hide-details></v-switch>
               <div class="button-align">
-                <v-btn :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
+                <v-btn :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !topic"
                   append-icon="mdi-cloud-upload" :loading="loading" @click="submit">Submit
                   <template v-slot:loader>
                     <v-progress-linear indeterminate></v-progress-linear>
@@ -57,7 +57,7 @@
                 </v-btn>
                 <!-- Show switch on the right of submit button on tablet and desktop -->
                 <v-switch class="hidden-xs"
-                  :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
+                  :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !topic"
                   v-model="notificationsOnPending" label="Publish on WIS2" color="primary" hide-details></v-switch>
               </div>
             </v-card-item>
@@ -218,9 +218,9 @@ export default defineComponent({
       bulletin: "", // FM 12 data
       aaxxPresent: true, // Boolean to check if AAXX is in bulletin
       equalsPresent: true, // Boolean to check if = delimiter is in bulletin
-      hierarchyList: ["test1", "test2", "test3"], // List of topic hierarchies 
+      topicList: ["test1", "test2", "test3"], // List of topic hierarchies 
       // before they are obtained from discovery metadata
-      hierarchy: "", // Topic hierarchy selected by user
+      topic: "", // Topic hierarchy selected by user
       notificationsOnPending: true, // Realtime variable for if user has 
       // selected notifications or not
       notificationsOn: true, // Variable that updates to the pending variable 
@@ -259,14 +259,14 @@ export default defineComponent({
       this.equalsPresent = this.bulletin.includes('=');
     },
     // Allows us to get the current topic hierarchies available
-    async fetchHierarchy() {
+    async fetchTopics() {
       const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
       // check if TEST=True is set in .env file
       console.log(import.meta.env);
       // check if TEST_MODE is set in .env file or if VITE_API_URL is not set
       if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
         console.log("TEST_MODE is enabled");
-        this.hierachyList = ["test1", "test2", "test3"];
+        this.topicList = ["test1", "test2", "test3"];
       }
       else {
         console.log("Fetching topic hierarchy from:", apiUrl);
@@ -277,14 +277,15 @@ export default defineComponent({
           }
           else {
             const data = await response.json();
+            // If the features object is in the data
             if (data.features) {
               // Use Array.map to create a new array of the topic hierarchies
-              this.hierarchyList = data.features.map(feature => {
+              this.topicList = data.features.map(feature => {
                 if (feature.properties && feature.properties['wmo:topicHierarchy']) {
                   return feature.properties['wmo:topicHierarchy']
                 }
               });
-              console.log(this.hierarchyList)
+              console.log(this.topicList)
             }
             else {
               console.error("API response is not an object");
@@ -363,7 +364,7 @@ export default defineComponent({
           year: this.date.year, // Year of data
           month: this.date.month + 1, // Month of data, +1 as JS starts 
           // from 0 for months
-          channel: this.hierarchy, // Topic hierarchy
+          channel: this.topic, // Topic hierarchy
           notify: this.notificationsOn // Boolean for WIS2 notifications
         }
       };
@@ -466,7 +467,7 @@ export default defineComponent({
     DownloadButton
   },
   mounted() {
-    this.fetchHierarchy();
+    this.fetchTopics();
   }
 });
 </script>
diff --git a/webapp/src/views/Home.vue b/webapp/src/views/Home.vue
index f685572..7434f64 100644
--- a/webapp/src/views/Home.vue
+++ b/webapp/src/views/Home.vue
@@ -1,6 +1,7 @@
 <template>
+    <HomePage />
 </template>
 
 <script setup>
-    //
+import HomePage from '@/components/HomePage.vue'
 </script>
\ No newline at end of file
