diff --git a/webapp/index.html b/webapp/index.html
index fff1426..06571d0 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
+  <link rel="icon" href="/src/assets/logo-small.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>FM-12 Form</title>
+  <title>wis2box</title>
 </head>
 
 <body>
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 76f18ea..3844d3c 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -10,11 +10,12 @@
       "dependencies": {
         "@mdi/font": "7.0.96",
         "@vuepic/vue-datepicker": "^5.4.0",
-        "axios": "^1.4.0",
+        "apexcharts": "^3.41.1",
         "core-js": "^3.29.0",
         "roboto-fontface": "*",
         "vue": "^3.2.0",
         "vue-router": "^4.0.0",
+        "vue3-apexcharts": "^1.4.4",
         "vuetify": "^3.0.0",
         "webfontloader": "^1.0.0"
       },
@@ -745,27 +746,25 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.41.1",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.41.1.tgz",
+      "integrity": "sha512-kta8fhXrfZYqW7K9kF7FqZ6imQaC6moyRgcUZjwIky/oeHVVISSN/2rjUIvZXnwxWHiSdDHMqLy+TqJhB4DXFA==",
+      "dependencies": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-    },
-    "node_modules/axios": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
-      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
-      "dependencies": {
-        "follow-redirects": "^1.15.0",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -891,17 +890,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -1001,14 +989,6 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1342,38 +1322,6 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1679,25 +1627,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1994,11 +1923,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -2220,6 +2144,89 @@
         "node": ">=8"
       }
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -2410,6 +2417,15 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-apexcharts": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.4.tgz",
+      "integrity": "sha512-TH89uZrxGjaDvkaYAISvj8+k6Bf1rUKFillc8oJirs5XZEPiwM1ELKZQ786wz0rfPqkSHHny2lqqUCK7Rw+LcQ==",
+      "peerDependencies": {
+        "apexcharts": "> 3.0.0",
+        "vue": "> 3.0.0"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.8.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 7170ce8..0390de6 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -11,10 +11,12 @@
   "dependencies": {
     "@mdi/font": "7.0.96",
     "@vuepic/vue-datepicker": "^5.4.0",
+    "apexcharts": "^3.41.1",
     "core-js": "^3.29.0",
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
+    "vue3-apexcharts": "^1.4.4",
     "vuetify": "^3.0.0",
     "webfontloader": "^1.0.0"
   },
diff --git a/webapp/public/favicon.ico b/webapp/public/favicon.ico
deleted file mode 100644
index 8fb9f91..0000000
Binary files a/webapp/public/favicon.ico and /dev/null differ
diff --git a/webapp/src/App_old.vue b/webapp/src/App_old.vue
deleted file mode 100644
index e4e2270..0000000
--- a/webapp/src/App_old.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <v-app>
-    <v-main>
-      <SynopForm  api="processes/" path="x-wmo:synop2bufr/execution"/>
-    </v-main>
-  </v-app>
-</template>
-<script setup>
-  import SynopForm from '@/components/SynopForm.vue'
-</script>
\ No newline at end of file
diff --git a/webapp/src/assets/banner.png b/webapp/src/assets/banner.png
new file mode 100644
index 0000000..af1f4bb
Binary files /dev/null and b/webapp/src/assets/banner.png differ
diff --git a/webapp/src/assets/foot.png b/webapp/src/assets/foot.png
new file mode 100644
index 0000000..75f7f7b
Binary files /dev/null and b/webapp/src/assets/foot.png differ
diff --git a/webapp/src/assets/logo-large.png b/webapp/src/assets/logo-large.png
new file mode 100644
index 0000000..ba12a41
Binary files /dev/null and b/webapp/src/assets/logo-large.png differ
diff --git a/webapp/src/assets/logo-small.png b/webapp/src/assets/logo-small.png
new file mode 100644
index 0000000..174364c
Binary files /dev/null and b/webapp/src/assets/logo-small.png differ
diff --git a/webapp/src/assets/logo.png b/webapp/src/assets/logo.png
deleted file mode 100644
index a5f23ae..0000000
Binary files a/webapp/src/assets/logo.png and /dev/null differ
diff --git a/webapp/src/assets/logo.svg b/webapp/src/assets/logo.svg
deleted file mode 100644
index d57771c..0000000
--- a/webapp/src/assets/logo.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
-<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
-<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
-<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
-</svg>
diff --git a/webapp/src/components/DownloadButton.vue b/webapp/src/components/DownloadButton.vue
index 94ea44c..90e9710 100644
--- a/webapp/src/components/DownloadButton.vue
+++ b/webapp/src/components/DownloadButton.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-btn color="primary" @click="downloadFile">Download</v-btn>
+  <v-btn color="#00BD9D" append-icon="mdi-download" @click="downloadFile">Download</v-btn>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import { VBtn } from 'vuetify/lib/components/index.mjs';
 
 export default defineComponent({
@@ -18,11 +18,11 @@ export default defineComponent({
         VBtn
     },
     setup(props) {
-        const fileName = ref("");
+        // Extract the file name from the URL
+        const fileName = props.fileUrl.split('/').pop();
+
         // function to download file
         const downloadFile = () => {
-            // Extract the file name from the URL
-            fileName.value = props.fileUrl.substring(props.fileUrl.lastIndexOf('/') + 1);
             // Create a temporary anchor element to initiate the download
             const link = document.createElement('a');
             link.href = props.fileUrl;
@@ -31,8 +31,8 @@ export default defineComponent({
             link.click();
         };
         return {
-            downloadFile,
-            fileName
+            fileName,
+            downloadFile
         };
     },
 });  
diff --git a/webapp/src/components/InspectBufrButton.vue b/webapp/src/components/InspectBufrButton.vue
index c9f053d..7260b3c 100644
--- a/webapp/src/components/InspectBufrButton.vue
+++ b/webapp/src/components/InspectBufrButton.vue
@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="dialog" width="auto">
     <template v-slot:activator="{ props }">
-      <v-btn color="secondary" v-bind="props" @click="inspectFile">Inspect</v-btn>
+      <v-btn color="#49C6E5" append-icon="mdi-feature-search" v-bind="props" @click="inspectFile">Inspect</v-btn>
     </template>
       <v-card class="inspect-content">
         <v-card-title>{{ fileName }}</v-card-title>
@@ -13,7 +13,7 @@
           </div>
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
+          <v-btn color="#1994b3" block @click="dialog = false">Close Dialog</v-btn>
         </v-card-actions>
       </v-card>
   </v-dialog>
@@ -42,21 +42,12 @@ export default defineComponent({
         VSelect,
     },
     setup(props) {
-        const fileName = ref("");
+        // Extract the file name from the URL
+        const fileName = props.fileUrl.split('/').pop();
         const itemsInBufr = ref([]);
         const dialog = ref(false);
         // function to create new object and to add to store
         const inspectFile = async () => {
-            if(props.fileUrl == undefined) {
-                console.log("props.fileUrl is undefined");
-                return;
-            }
-            // check if fileUrl contains / 
-            if(props.fileUrl.indexOf("/") == -1) {
-                console.log("props.fileUrl does not contain /");
-                return;
-            }
-            fileName.value = props.fileUrl.substring(props.fileUrl.lastIndexOf('/') + 1);
             dialog.value = true;
             // 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) {
@@ -99,7 +90,6 @@ export default defineComponent({
         };
         const callInspect = async () => {
             // set items_from_bufr back to empty array
-            console.log("execute wis2box-bufr2geojson process on file: " + props.fileUrl);
             itemsInBufr.value = [];
             var payload = {
                 inputs: {
diff --git a/webapp/src/components/MonitoringPage.vue b/webapp/src/components/MonitoringPage.vue
new file mode 100644
index 0000000..c39edf8
--- /dev/null
+++ b/webapp/src/components/MonitoringPage.vue
@@ -0,0 +1,98 @@
+<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>
+
+  <!-- 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"/>
+
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { VCardTitle } from 'vuetify/lib/components/index.mjs';
+import NotificationDashboard from '@/components/NotificationDashboard.vue';
+
+export default defineComponent({
+  name: 'MonitoringPage',
+  components: {
+    VCardTitle,
+    NotificationDashboard
+  },
+  data() {
+    return {
+      // Options for user to filter the dashboard (surface, upper air, etc)
+      datasets: {},
+      // 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);
+    }
+  },
+  methods: {
+    // Method to get topic hierarchies and corresponding titles from the 
+    // discovery metadata, in order to allow the user to select the dataset
+    // dsisplayed in the dashboard
+    async getDatasets() {
+      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"
+        };
+      }
+      else {
+        const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
+        console.log("Fetching topic hierarchy from:", apiUrl);
+        try {
+          const response = await fetch(apiUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          else {
+            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);
+            }
+            else {
+              console.error("API response does not have features property");
+            }
+          }
+        }
+        catch (error) {
+          console.error("Error fetching topic hierarchy:", error)
+        }
+      }
+    }
+  },
+  mounted() {
+    // Get topic hierarchies and titles for the user to select a dataset
+    this.getDatasets();
+  }
+});  
+</script>
+<style scoped>
+.big-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+</style>
\ No newline at end of file
diff --git a/webapp/src/components/NotificationDashboard.vue b/webapp/src/components/NotificationDashboard.vue
new file mode 100644
index 0000000..578c6d1
--- /dev/null
+++ b/webapp/src/components/NotificationDashboard.vue
@@ -0,0 +1,566 @@
+<template>
+  <!-- Dashboard -->
+  <v-row>
+    <v-col cols="12">
+
+      <v-row>
+        <!-- ApexCharts bar graph for latest notifications received -->
+        <v-col cols="6">
+          <v-fade-transition appear>
+            <v-card>
+
+              <v-card-title class="text-center">
+                Latest Notifcations
+              </v-card-title>
+              <v-col class="text-center">
+
+                <v-btn variant="outlined" density="compact" class="mr-3" id="one_hour" @click="updateData('one_hour')"
+                  :class="selectedZoom === 'one_hour' ? 'selected-zoom' : 'secondary'">
+                  1H
+                </v-btn>
+
+                <v-btn variant="outlined" density="compact" class="mr-3" id="three_hours"
+                  @click="updateData('three_hours')"
+                  :class="selectedZoom === 'three_hours' ? 'selected-zoom' : 'secondary'">
+                  3H
+                </v-btn>
+
+                <v-btn variant="outlined" density="compact" class="mr-3" id="six_hours" @click="updateData('six_hours')"
+                  :class="selectedZoom === 'six_hours' ? 'selected-zoom' : 'secondary'">
+                  6H
+                </v-btn>
+
+                <v-btn variant="outlined" density="compact" class="mr-3" id="twenty_four_hours"
+                  @click="updateData('twenty_four_hours')"
+                  :class="selectedZoom === 'twenty_four_hours' ? 'selected-zoom' : 'secondary'">
+                  24H
+                </v-btn>
+              </v-col>
+
+              <vue-apex-charts ref="chart" type="bar" height="400" :options="chartOptions"
+                :series="chartSeries"></vue-apex-charts>
+            </v-card>
+          </v-fade-transition>
+        </v-col>
+
+        <v-col cols="6">
+          <!-- Top right -->
+          <v-row>
+            <!-- Total number of BUFR files submitted in the last hour -->
+            <v-col cols="6">
+              <v-fade-transition appear>
+
+                <v-card>
+                  <v-card-title class="text-center">
+                    Total BUFR files in last hour:
+                  </v-card-title>
+                  <h1 class="text-center">{{ summaryStats.totalFilesLastHour }}</h1>
+                </v-card>
+              </v-fade-transition>
+            </v-col>
+
+            <!-- Total number of BUFR files submitted in the last 24 hours -->
+            <v-col cols="6">
+              <v-fade-transition appear>
+                <v-card>
+                  <v-card-title class="text-center">
+                    Total BUFR files in last 24 hours:
+                  </v-card-title>
+                  <h1 class="text-center">{{ summaryStats.totalFilesLastDay }}</h1>
+                </v-card>
+              </v-fade-transition>
+            </v-col>
+          </v-row>
+
+          <!-- Bottom right -->
+          <!-- Latest BUFR files published, ready to download and inspect -->
+          <v-row>
+            <v-col cols="12">
+              <v-fade-transition appear>
+                <v-card>
+                  <v-card-title class="text-left">
+                    Published Data
+                  </v-card-title>
+                  <!-- Limit the size of the list and add scroll feature -->
+                  <div class="scrollable-file-list">
+                    <v-text-field placeholder="Search for a file..." clearable/>
+                    <v-list-item v-for="(file_url, index) in notificationData.fileUrls.reverse()" :key="index">
+                      <div class="file-actions">
+                        <div>
+                          <!-- Display the timestamp -->
+                          <div class="secondary">
+                            {{ formatTime(notificationData.publishTimes[notificationData.publishTimes.length - 1 - index])
+                            }}
+                          </div>
+
+                          <!-- Display the file name -->
+                          <div>
+                            {{ getFileName(file_url) }}
+                          </div>
+                        </div>
+                        <div class="file-actions">
+                          <DownloadButton :fileUrl="file_url" />
+                          <InspectBufrButton :fileUrl="file_url" />
+                        </div>
+                      </div>
+                      <v-divider v-if="index < notificationData.fileUrls.length - 1" class="divider-spacing"></v-divider>
+                    </v-list-item>
+                  </div>
+                </v-card>
+              </v-fade-transition>
+            </v-col>
+          </v-row>
+
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { VCard, VCardTitle, VBtn } from 'vuetify/lib/components/index.mjs';
+import VueApexCharts from 'vue3-apexcharts'
+import InspectBufrButton from '@/components/InspectBufrButton.vue';
+import DownloadButton from '@/components/DownloadButton.vue';
+
+export default defineComponent({
+  name: 'NotificationDashboard',
+  props: {
+    topicHierarchy: {
+      type: String,
+      required: true
+    }
+  },
+  watch: {
+    // Watcher for the topicHierarchy prop, so that this component
+    // is updated when the user selects another dataset in MonitoringPage.vue
+    topicHierarchy(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        // Run all important methods
+        this.getNotifications();
+        this.getTimestampCounts();
+        this.getWsiCounts();
+        this.getSummary();
+        this.initChartData();
+      }
+    }
+  },
+  components: {
+    VCard,
+    VCardTitle,
+    VBtn,
+    VueApexCharts,
+    InspectBufrButton,
+    DownloadButton,
+  },
+  data() {
+    return {
+      // Messages from API call
+      messages: [],
+      // Example message when Romania synoptic dataset selected by user
+      testMessageSynoptic: [
+        {
+          "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d",
+          "properties": {
+            "data_id": "wis2/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15020_20220331T000000",
+            "datetime": "2022-03-31T00:00:00Z",
+            "pubtime": "2023-08-24T13:58:20Z",
+            "wigos_station_identifier": "0-20000-0-15020",
+            "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d"
+          },
+          "links": [
+            {
+              "rel": "canonical",
+              "type": "application/x-bufr",
+              "href": "http://3.73.37.35/data/2022-03-31/wis/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15020_20220331T000000.bufr4",
+            },
+            {
+              "rel": "via",
+              "type": "text/html",
+              "href": "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/0-20000-0-15015"
+            }]
+        }
+      ],
+      // Example message when Malawi surface dataset selected by user
+      testMessageSurface: [
+        {
+          "id": "af14d8c4-5f63-45af-8171-7730ec9932ba",
+          "properties": {
+            "data_id": "wis2/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15015_20220331T000000",
+            "datetime": "2022-03-31T00:00:00Z",
+            "pubtime": "2023-08-24T13:40:49Z",
+            "wigos_station_identifier": "0-20000-0-15015",
+            "id": "af14d8c4-5f63-45af-8171-7730ec9932ba"
+          },
+          "links": [
+            {
+              "rel": "canonical",
+              "type": "application/x-bufr",
+              "href": "http://3.73.37.35/data/2022-03-31/wis/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15015_20220331T000000.bufr4",
+            },
+            {
+              "rel": "via",
+              "type": "text/html",
+              "href": "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/0-20000-0-15015"
+            }]
+        }
+      ],
+      // Object containing the publish time and associated file URLs of
+      // each notification from the last 24 hours
+      notificationData: {
+        "publishTimes": [],
+        "fileUrls": []
+      },
+      // Count for how many files were published at a given time, rounded
+      // to the nearest minute
+      timestampCounts: {},
+      // Count for how files were published from a given WSI
+      wsiCounts: {},
+      // Object for notification summary statistics
+      summaryStats: {
+        "totalFilesLastHour": 0,
+        "totalFilesLastDay": 0
+      },
+      // One minute in milliseconds
+      mins: 60 * 1000,
+      // Variable to update the ApexCharts graph in realtime
+      updateInterval: null,
+      // ApexCharts time zoom selected. Defaults to the last hour
+      selectedZoom: "one_hour",
+      // Initiate ApexCharts series to be filled with data later
+      chartSeries: [
+        {
+          name: 'BUFR files published',
+          data: []
+        }
+      ]
+    }
+  },
+  computed: {
+    // Get current time
+    now() {
+      return new Date();
+    },
+    // Get time 1 hour ago from now
+    oneHourAgo() {
+      return new Date(this.now.getTime() - 1 * 60 * this.mins);
+    },
+    // Get time 24 hours ago from now
+    oneDayAgo() {
+      return new Date(this.now.getTime() - 24 * 60 * this.mins);
+    },
+    // Options for the ApexChart bar graph
+    chartOptions() {
+      return {
+        chart: {
+          type: 'bar',
+          id: 'realtime',
+          animations: {
+            enable: true,
+            easy: 'linear'
+          },
+          toolbar: {
+            show: false
+          }
+        },
+        plotOptions: {
+          bar: {
+            borderRadius: 2,
+            columnWidth: '10%',
+            dataLabels: {
+              position: 'top',
+            },
+          }
+        },
+        dataLabels: {
+          enabled: true,
+          offsetY: -20,
+          style: {
+            fontSize: '12px',
+            colors: ["#304758"]
+          }
+        },
+        stroke: {
+          curve: 'straight'
+        },
+        tooltip: {
+          x: {
+            format: 'dd MMM HH:mm'
+          }
+        },
+        colors: ['#00BD9D'], // Colour of bars
+        xaxis: {
+          type: 'datetime',
+          // Earliest displayed time 1 hour from current
+          min: this.oneHourAgo.getTime(),
+          // Latest displayed time is current time
+          max: this.now.getTime()
+        },
+        yaxis: {
+          min: 0,
+          labels: {
+            show: false
+          },
+          axisBorder: {
+            show: false
+          },
+          axisTicks: {
+            show: false
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    // Builds a topic hierarchy dependent url and fetches the notifications
+    async apiCall() {
+      // If in TEST_MODE or API URL is not defined, just return.
+      if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
+        return;
+      }
+
+      const apiUrl = `${import.meta.env.VITE_API_URL}/collections/messages/items`;
+      console.log("Fetching notifications from:", apiUrl);
+
+      try {
+        const params = new URLSearchParams({
+          f: 'json', // Specify the response format as JSON
+          data_id: `${this.topicHierarchy}%`, // Filter by data_id that starts with the provided topic hierarchy
+          sortBy: '-datetime', // Sort by time in descending order
+          limit: 9999, // Limit the results to the last 9999 features
+          datetime: `${this.oneDayAgo.toISOString()}/${this.now.toISOString()}`, // Filter to last 24 hours
+        });
+        // Make the HTTP GET request
+        console.log("API request:", `${apiUrl}?${params}`)
+        const response = await fetch(`${apiUrl}?${params}`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        else {
+          const data = await response.json();
+          if (data.features) {
+            this.messages = data.features;
+            console.log("Messages:", this.messages);
+          }
+          else {
+            console.error("API response does not contain features:", data);
+          }
+        }
+      }
+      catch (error) {
+        console.error("Error fetching notifications:", error)
+      }
+    },
+    // Method to get summary statistics of total published files in the
+    // past hour and past 24 hours
+    async getSummary() {
+      // Get the number of publish times from the last hour
+      const timesWithinHour = this.notificationData.publishTimes.filter(time => {
+        return time >= this.oneHourAgo;
+      }).length;
+
+      // Get the number of publish times from the last 24 hours
+      // (which is all of the publish times by the way we call the API)
+      const timesWithinDay = this.notificationData.publishTimes.length;
+
+      // Update the summary statistics object
+      this.summaryStats.totalFilesLastHour = timesWithinHour;
+      this.summaryStats.totalFilesLastDay = timesWithinDay;
+    },
+    // Loads notification data of publish times and file urls
+    async getNotifications() {
+      // 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");
+        console.log("Dataset selected: ", this.topicHierarchy);
+        // Use example data selected by user
+        if (this.topicHierarchy == "rou/rnimh/data/core/weather/surface-based-observations/synop") {
+          this.messages = this.testMessageSynoptic;
+        }
+        else if (this.topicHierarchy == "mwi/mwi_met_centre/data/core/weather/surface-based-observations/synop") {
+          this.messages = this.testMessageSurface;
+        }
+      }
+      else {
+        await this.apiCall();
+      }
+
+      this.notificationData = {
+        // Get the publish times of the notifications as an array
+        publishTimes: this.messages.map(item =>
+          new Date(item.properties.pubtime)),
+        // Get the file urls of the notifications as an array
+        fileUrls: this.messages.map(item => {
+          const canonicalLink = item.links.find(link => link.rel === "canonical");
+          // The file url is the href value associated with the canonical relation
+          return canonicalLink ? canonicalLink.href : null;
+        })
+      }
+
+      // Get summary statistics of notification data
+      await this.getSummary();
+
+      console.log("Publish times and URLs: ", this.notificationData);
+    },
+    roundToNearestMinute(time) {
+      // Get minutes and seconds of the datetime
+      let minutes = time.getMinutes();
+      let seconds = time.getSeconds();
+
+      if (seconds >= 30) {
+        // Round to the next minute
+        time.setMinutes(minutes + 1);
+      }
+      // As rounded to the nearest minute, set the seconds/ms to 0
+      time.setSeconds(0);
+      time.setMilliseconds(0);
+
+      return time;
+    },
+    // Builds the timestamp count array used in the ApexCharts bar graph
+    async getTimestampCounts() {
+      // Reset the timestamp counts
+      this.timestampCounts = {};
+
+      // For each publish time, round to the nearest minute and update
+      // the count
+      this.notificationData["publishTimes"].forEach(time => {
+
+        const roundedTime = this.roundToNearestMinute(time);
+
+        // Update timestampCount object with this rounded publish time
+        if (this.timestampCounts[roundedTime]) {
+          // If the key already exists, add to the count
+          this.timestampCounts[roundedTime]++;
+        }
+        else {
+          // Otherwise begin the count at 1
+          this.timestampCounts[roundedTime] = 1;
+        }
+      });
+
+      console.log("Timestamp counts: ", this.timestampCounts)
+    },
+    // Builds the wsiCounts object
+    async getWsiCounts() {
+
+      // Reset the wsi counts
+      this.wsiCounts = {};
+
+      // 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) {
+        // Use example data selected by user
+        if (this.topicHierarchy == "rou/rnimh/data/core/weather/surface-based-observations/synop") {
+          this.messages = this.testMessageSynoptic;
+        }
+        else if (this.topicHierarchy == "mwi/mwi_met_centre/data/core/weather/surface-based-observations/synop") {
+          this.messages = this.testMessageSurface;
+        }
+      }
+      else {
+        await this.apiCall();
+      }
+
+      // Group the messages based on 'wigos_station_identifier' add canonical_url property to each item
+      this.messages.forEach((item) => {
+        const canonicalLink = item.links.find(link => link.rel === "canonical");
+        if (canonicalLink) {
+          item.canonical_url = canonicalLink.href;
+        }
+        const identifier = item.properties.wigos_station_identifier;
+        if (this.wsiCounts[identifier]) {
+          this.wsiCounts[identifier]++;
+        }
+        else {
+          this.wsiCounts[identifier] = 1
+        }
+      })
+
+      console.log("WSI counts: ", this.wsiCounts);
+    },
+    // Initialise the data for ApexCharts series bar graph based on 
+    // allNotifications
+    initChartData() {
+      // Creates a nested array structure of form [[timestamp1, count1],...]
+      const chartData = Object.entries(this.timestampCounts);
+
+      // Update the chartSeries data with the above
+      this.chartSeries[0].data = chartData;
+    },
+    // Enables zoom functionality on bar graph
+    updateData: function (timeline) {
+      this.selectedZoom = timeline;
+      // Get current time
+      const now = new Date().getTime();
+
+      // Depending on the button pressed, zoom the x-axis of the bar graph accordingly
+      switch (timeline) {
+        case 'one_hour':
+          this.$refs.chart.zoomX(now - (60 * this.mins), now);
+          break;
+        case 'three_hours':
+          this.$refs.chart.zoomX(now - (3 * 60 * this.mins), now);
+          break;
+        case 'six_hours':
+          this.$refs.chart.zoomX(now - (6 * 60 * this.mins), now);
+          break;
+        case 'twenty_four_hours':
+          this.$refs.chart.zoomX(now - (24 * 60 * this.mins), now);
+          break;
+        default:
+      }
+    },
+    // Shows the HH:mm timestamp for the newest notifications
+    formatTime(timestamp) {
+      const hours = String(timestamp.getHours()).padStart(2, '0');
+      const minutes = String(timestamp.getMinutes()).padStart(2, '0');
+      return `${hours}:${minutes}`;
+    },
+    // Gets the filename from the canonical href
+    getFileName(url) {
+      const urlParts = url.split('/');
+      return urlParts[urlParts.length - 1];
+    },
+  },
+  mounted() {
+    this.apiCall();
+    // Get notification data
+    this.getNotifications();
+    // Get timestamp count data
+    this.getTimestampCounts();
+    // Get WSI file count data
+    this.getWsiCounts();
+    // Get summary statistics
+    this.getSummary();
+    // Fill ApexCharts with latest data
+    this.initChartData();
+  }
+});
+</script>
+
+<style scoped>
+.selected-zoom {
+  color: #00BD9D;
+}
+
+.secondary {
+  color: #767B91;
+}
+
+.scrollable-file-list {
+  max-height: 345px;
+  overflow-y: auto;
+}
+
+.file-actions {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  padding: 2px;
+}
+
+.divider-spacing {
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/webapp/src/components/NotificationsButton.vue b/webapp/src/components/NotificationsButton.vue
deleted file mode 100644
index 413a30b..0000000
--- a/webapp/src/components/NotificationsButton.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-    <v-dialog v-model="dialog" width="auto">
-      <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" @click="getNotifications" class="dataset-button">
-            {{ title }}
-        </v-btn>
-      </template>
-        <v-card class="messages">
-          <v-card-title>{{ title }}</v-card-title>
-          <v-card-subtitle>Messages seen in the last 24 hours </v-card-subtitle>
-          <v-card-actions>
-            <v-btn @click="getNotifications" block>Update</v-btn>
-          </v-card-actions>
-          <v-card-text>
-            <v-card-title>Number of messages by WIGOS station identifier</v-card-title>
-            <v-card-item v-for="(item, index) in groupedMessages" :key="index">
-                {{ index }}: {{ item.count }}
-            </v-card-item>
-        </v-card-text>
-          <v-card-text>
-            <v-card-title>Messages</v-card-title>
-            <!-- Check if messages array is empty -->
-            <div v-if="messages.length === 0" class="no-notifications-message">
-                No notifications found for dataset
-            </div>
-            <!-- If messages array is not empty, render notifications -->
-            <div v-else>
-                <div v-for="(item, index) in messages" :key="index" class="item-container">
-                    <v-card-item>Published at: {{ item.properties.pubtime }}</v-card-item>
-                    <v-card-item>WIGOS station identifier: {{ item.properties.wigos_station_identifier }}</v-card-item>
-                    <v-card-item>
-                        <div class="file-info">
-                            Data: {{ getFileName( item.canonical_url ) }}
-                        </div>
-                        <div class="file-actions">
-                            <DownloadButton :fileUrl="item.canonical_url"/>
-                            <InspectBufrButton :fileUrl="item.canonical_url"/>
-                    </div>
-                    </v-card-item>
-                </div>
-            </div>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
-          </v-card-actions>
-        </v-card>
-    </v-dialog>
-  </template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import { VCard, VCardTitle, VCardText, VCardItem, VForm, VTextarea, VBtn, VSelect } from 'vuetify/lib/components/index.mjs';
-import InspectBufrButton from '@/components/InspectBufrButton.vue';
-import DownloadButton from '@/components/DownloadButton.vue';
-
-export default defineComponent({
-    name: 'NotificationsButton',
-    props: {
-        dataset: {
-            type: String,
-            required: true,
-        },
-        title: {
-            type: String,
-            required: true,
-        },
-    },
-    components: {
-        VCard,
-        VCardTitle,
-        VCardText,
-        VCardItem,
-        VTextarea,
-        VForm,
-        VBtn,
-        VSelect,
-        InspectBufrButton,
-        DownloadButton
-    },
-    setup(props) {
-        const messages = ref([]);
-        const groupedMessages = ref({});
-        const dialog = ref(false);
-        const wigos_id = ref("")
-
-        const getNotifications = async () => {
-            dialog.value = true;
-            // 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");
-                // prepare dummy data
-                messages.value = [
-                    {
-                    "id": "af14d8c4-5f63-45af-8171-7730ec9932ba",
-                    "properties": {
-                        "data_id": "wis2/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15015_20220331T000000",
-                        "datetime": "2022-03-31T00:00:00Z",
-                        "pubtime": "2023-07-25T14:31:49Z",
-                        "wigos_station_identifier": "0-20000-0-15015",
-                        "id": "af14d8c4-5f63-45af-8171-7730ec9932ba"
-                    },
-                    "links": [
-                        {
-                            "rel": "canonical",
-                            "type": "application/x-bufr",
-                            "href": "http://3.73.37.35/data/2022-03-31/wis/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15015_20220331T000000.bufr4",
-                        },
-                        {
-                            "rel": "via",
-                            "type": "text/html",
-                            "href": "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/0-20000-0-15015"
-                        }]
-                    },
-                    {
-                    "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d",
-                    "properties": {
-                        "data_id": "wis2/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15020_20220331T000000",
-                        "datetime": "2022-03-31T00:00:00Z",
-                        "pubtime": "2023-07-25T14:32:43Z",
-                        "wigos_station_identifier": "0-20000-0-15020",
-                        "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d"
-                    },
-                    "links": [
-                        {
-                            "rel": "canonical",
-                            "type": "application/x-bufr",
-                            "href": "http://3.73.37.35/data/2022-03-31/wis/rou/rnimh/data/core/weather/surface-based-observations/synop/WIGOS_0-20000-0-15020_20220331T000000.bufr4",
-                        },
-                        {
-                            "rel": "via",
-                            "type": "text/html",
-                            "href": "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/0-20000-0-15015"
-                        }]
-                    }
-                ];
-            }
-            else {
-                await apiCall();
-            }
-            // Group the messages based on 'wigos_station_identifier' add canonical_url property to each item
-            const grouped = {};
-            messages.value.forEach((item) => {
-                const canonicalLink = item.links.find(link => link.rel === "canonical");
-                if (canonicalLink) {
-                    item.canonical_url = canonicalLink.href;
-                }
-                const identifier = item.properties.wigos_station_identifier;
-                if (!grouped[identifier]) {
-                    grouped[identifier] = {};
-                    grouped[identifier].count = 0;
-                }
-                grouped[identifier].count++;
-            });
-            groupedMessages.value = grouped;
-        };
-        const apiCall = async () => {
-          // set messages back to empty array
-          messages.value = [];
-          const apiUrl = `${import.meta.env.VITE_API_URL}/collections/messages/items`;
-          try {
-            // get current time in UTC minus 24 hours
-            const now = new Date();
-            const now_minus_24hours = new Date(now.getTime() - (24 * 60 * 60 * 1000));
-            const params = new URLSearchParams({
-                f: 'json', // Specify the response format as JSON
-                data_id: `${props.dataset}%`, // Filter by data_id that starts with the provided value
-                sortby: '-pubtime', // Sort by time in descending order
-                limit: 9999, // Limit the results to 9999
-                datetime: `${now_minus_24hours.toISOString()}/${now.toISOString()}`, // Filter by datetime range
-            });
-            // Make the HTTP GET request
-            console.log("API request:", `${apiUrl}?${params}`)
-            const response = await fetch(`${apiUrl}?${params}`);
-            if (!response.ok) {
-              throw new Error(`HTTP error! Status: ${response.status}`);
-            }
-            else {
-              const data = await response.json();
-              if (data.features) {
-                messages.value = data.features;
-              }
-              else {
-                console.error("API response does not contain features:", data);
-              }
-            }
-          }
-          catch (error) {
-            console.error("Error fetching notifications:", error)
-          }
-        };
-        const getFileName = (url) => {
-            if(!url) return;
-            const urlParts = url.split('/');
-            return urlParts[urlParts.length - 1];
-        };
-        return {
-            getNotifications,
-            getFileName,
-            dialog,
-            messages,
-            groupedMessages
-        };
-    },
-});  
-</script>
-
-<style>
-.dataset-button {
-  padding: 2px;
-  width: 90%;
-  max-width: 800px;
-  margin: 10px;
-}
-
-.file-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px;
-}
-
-.file-actions v-btn {
-  align-self: center;
-}
-</style>
\ No newline at end of file
diff --git a/webapp/src/components/SynopForm.vue b/webapp/src/components/SynopForm.vue
index c2b6e94..af22b50 100644
--- a/webapp/src/components/SynopForm.vue
+++ b/webapp/src/components/SynopForm.vue
@@ -1,63 +1,161 @@
 <template>
-  <v-card>
-    <v-card-title>Submit FM 12–XIV Ext. SYNOP bulletin</v-card-title>
-    <v-card-text>
-      <v-form>
-
-        <!-- Date selection -->
-        <v-card-item style="width:250px">
-          <VueDatePicker v-model="date" :teleport="true" :state="datePossible" month-picker auto-apply required />
-          <p v-if="datePossible === false" class="hint-text hint-invalid">Date in the future: please choose a valid month
-            and year
-          </p>
-          <p v-else-if="datePossible === true" class="hint-text hint-valid">Date valid</p>
-          <p v-else class="hint-text hint-default">Month and year of the data</p>
-        </v-card-item>
-
-        <!-- FM 12 data entry -->
-        <v-card-item>
-          <v-textarea label="FM 12" v-model.lazy="bulletin" @change="checkMessage"></v-textarea>
-          <p v-if="aaxxPresent == false" class="hint-text hint-invalid">AAXX must be present for a valid SYNOP message</p>
-          <p v-else-if="equalsPresent == false" class="hint-text hint-invalid">Delimiter (=) must be present for a valid
-            SYNOP message</p>
-          <p v-else class="hint-text hint-default">Raw FM 12 bulletin</p>
-        </v-card-item>
-
-        <!-- Topic hierarchy selection -->
-        <v-card-item>
-          <v-select label="Topic" v-model="hierarchy" :items="hierarchyList" v-if="hierarchyList.length" hint="Topic hierarchy for ingestion of data" persistent-hint></v-select>
-        </v-card-item>
-
-      </v-form>
-      <v-btn :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
-        @click="submit">Submit</v-btn>
-    </v-card-text>
-  </v-card>
-
-<v-card v-if="result">
-  <v-card-title>{{ getResultTitle() }}</v-card-title>
-  <v-card-item v-for="(error, index) in result.errors" :key="index" class="error-item">
-    {{ error }}
-  </v-card-item>
-  <v-card-item v-for="(warning, index) in result.warnings" :key="index" class="warning-item">
-    {{ warning }}
-  </v-card-item>
-  <v-card-item v-for="(file_url, index) in result.files" :key="index" class="file-item">
-    <div class="file-info">
-      {{ getFileName(file_url) }}
-    </div>
-    <div class="file-actions">
-      <DownloadButton :fileUrl="file_url"/>
-      <InspectBufrButton :fileUrl="file_url"/>
-    </div>
-  </v-card-item>
-</v-card>
-
+  <v-row>
+    <v-col cols="12">
+      <!-- Form entry --><v-fade-transition appear>
+        <v-card>
+          <v-card-title class="big-title">Submit FM 12–XIV Ext. SYNOP Bulletin</v-card-title>
+          <v-card-text>
+            <v-form>
+              <v-card-item class="calendar-box">
+                <VueDatePicker v-model="date" :teleport="true" :state="datePossible" month-picker auto-apply required />
+                <p v-if="datePossible === false" class="hint-text hint-invalid">Date in the future: please choose a valid
+                  month
+                  and year
+                </p>
+                <p v-else-if="datePossible === true" class="hint-text hint-valid">Date valid</p>
+                <p v-else class="hint-text hint-default">Month and year of the data</p>
+              </v-card-item>
+              <!-- Date selection -->
+  
+              <!-- FM 12 data entry -->
+              <v-card-item>
+                <v-textarea label="FM 12" v-model.lazy="bulletin" @change="checkMessage"></v-textarea>
+                <p v-if="aaxxPresent == false" class="hint-text hint-invalid">AAXX must be present for a valid SYNOP message
+                </p>
+                <p v-else-if="equalsPresent == false" class="hint-text hint-invalid">Delimiter (=) must be present for a
+                  valid
+                  SYNOP message</p>
+                <p v-else class="hint-text hint-default">Raw FM 12 bulletin</p>
+              </v-card-item>
+  
+              <!-- Topic hierarchy selection -->
+              <v-card-item>
+                <v-select label="Channel" v-model="hierarchy" :items="hierarchyList" v-if="hierarchyList.length"
+                  hint="Topic hierarchy for ingestion of data" persistent-hint></v-select>
+              </v-card-item>
+  
+            </v-form>
+            <v-card-item>
+              <div class="button-align">
+                <v-btn :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
+                  append-icon="mdi-cloud-upload" :loading="loading" @click="submit">Submit
+                  <template v-slot:loader>
+                    <v-progress-linear indeterminate></v-progress-linear>
+                  </template>
+                </v-btn>
+                <v-switch :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
+                  v-model="notificationsOnPending" label="Publish on WIS2" color="primary" hide-details></v-switch>
+              </div>
+            </v-card-item>
+          </v-card-text>
+        </v-card>
+      </v-fade-transition>
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col cols="12">
+      <!-- Output data -->
+      <v-card v-if="result">
+        <v-card-title>{{ resultTitle }}</v-card-title>
+
+        <v-list>
+
+          <v-list-item class="hint-default">
+            {{ numberNotifications }}</v-list-item>
+
+          <!-- WARNINGS -->
+          <!-- Warnings drop-down if there are any warnings -->
+          <v-list-group v-if="result.warnings && result.warnings.length > 0" ref="warningList" value="Warnings"
+            @click="scrollToRef('warningList')">
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" prepend-icon="mdi-alert-circle">
+                <template v-slot:prepend>
+                  <v-icon color="#FD9235"></v-icon>
+                </template>
+                <!-- If number of warnings > 0, set text to orange -->
+                <span class="warning-color">Warnings: {{ result.warnings.length }}</span>
+              </v-list-item>
+            </template>
+
+            <v-list-item v-for="(warning, index) in result.warnings" :key="index" class="warning-item">
+              {{ warning }}
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Warnings drop-down if there are no warnings -->
+          <v-list-item v-else prepend-icon="mdi-alert-circle">
+            <span>Warnings: 0</span>
+          </v-list-item>
+
+
+          <!-- ERRORS -->
+          <!-- Errors drop-down if there are any errors -->
+          <v-list-group v-if="result.errors && result.errors.length > 0" ref="errorList" value="Errors"
+            @click="scrollToRef('errorList')">
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" prepend-icon="mdi-close-circle">
+                <template v-slot:prepend>
+                  <v-icon color="#EA4848"></v-icon>
+                </template>
+                <!-- If number of errors > 0, set text to red -->
+                <span class="error-color">Errors: {{ result.errors.length }}</span>
+              </v-list-item>
+            </template>
+
+            <v-list-item v-for="(error, index) in result.errors" :key="index" class="error-item">
+              {{ error }}
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Errors drop-down if there are no warnings -->
+          <v-list-item v-else prepend-icon="mdi-close-circle">
+            <span>Errors: 0</span>
+          </v-list-item>
+
+
+          <!-- OUTPUT BUFR -->
+          <!-- BUFR files drop-down if there are any output files -->
+          <v-list-group v-if="result.files && result.files.length > 0" ref="fileList" value="Files"
+            @click="scrollToRef('fileList')">
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" prepend-icon="mdi-check-circle">
+                <template v-slot:prepend>
+                  <v-icon color="#00BD9D"></v-icon>
+                </template>
+                <!-- If number of BUFR files > 0, set text to green -->
+                <span :style="{ color: '#00BD9D' }">Output BUFR files: {{ result.files.length }}</span>
+              </v-list-item>
+
+            </template>
+            <v-list-item v-for="(file_url, index) in result.files" :key="index">
+              <div class="file-actions">
+                <div>
+                  {{ getFileName(file_url) }}
+                </div>
+                <div class="file-actions">
+                  <DownloadButton :fileUrl="file_url" />
+                  <InspectBufrButton :fileUrl="file_url" />
+                </div>
+              </div>
+              <v-divider v-if="index < result.files.length - 1" class="divider-spacing"></v-divider>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- BUFR files drop-down if there are no warnings -->
+          <v-list-item v-else prepend-icon="mdi-check-circle">
+            <span>Output BUFR files: 0</span>
+          </v-list-item>
+
+        </v-list>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
   
 <script>
-import { defineComponent, ref, watch } from 'vue';
-import { VCard, VCardTitle, VCardText, VCardItem, VForm, VTextarea, VBtn, VSelect } from 'vuetify/lib/components/index.mjs';
+import { defineComponent } from 'vue';
+import { VCard, VCardTitle, VCardText, VCardItem, VForm, VTextarea, VBtn, VSelect, VListGroup } from 'vuetify/lib/components/index.mjs';
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import InspectBufrButton from '@/components/InspectBufrButton.vue';
@@ -66,6 +164,14 @@ import DownloadButton from '@/components/DownloadButton.vue';
 export default defineComponent({
   name: 'RoleForm',
   props: {
+    broker: {
+      type: String,
+      default: ''
+    },
+    channel: {
+      type: String,
+      default: ''
+    },
     api: {
       type: String,
       default: 'api.opencdms.org'
@@ -75,25 +181,70 @@ export default defineComponent({
       default: '/processes/wis2box-synop-process/execution'
     }
   },
-  mounted() {
-    this.fetchHierarchy();
+  data() {
+    // Default data values before reactivity
+    return {
+      // Current month/year to compare against user selection
+      date: {
+        month: new Date().getMonth(),
+        year: new Date().getFullYear()
+      },
+      datePossible: null, // Verifies entered date is not in the future
+      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 
+      // before they are obtained from discovery metadata
+      hierarchy: "", // 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 
+      // when the user has submitted
+      loading: false, // Boolean for the loading animation
+      input: null, // JSON object for the concatenated user inputs
+      result: null // Output from synop2bufr call
+    }
+  },
+  computed: {
+    // Computes the result title re: success, partial success, or failure
+    resultTitle() {
+      if (this.result && this.result.result) {
+        const resultKey = this.result.result;
+        return "Result: " + resultKey;
+      }
+      return "Unknown"
+    },
+    // Computes how many WIS2 notifications were made, depending on
+    // whether the user has selected the notification toggle or not
+    numberNotifications() {
+      let messagesPublished;
+      if (this.result && this.notificationsOn === true) {
+        messagesPublished = this.result["messages published"];
+      }
+      else {
+        messagesPublished = 0;
+      }
+      return "WIS2 notifications published: " + messagesPublished;
+    }
   },
   methods: {
     // Check if AAXX and = delimiter present in the FM 12 data entered
     checkMessage() {
       this.aaxxPresent = this.bulletin.includes('AAXX ');
       this.equalsPresent = this.bulletin.includes('=');
-    },  
+    },
     // Allows us to get the current topic hierarchies available
     async fetchHierarchy() {
       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"];
       }
       else {
+        console.log("Fetching topic hierarchy from:", apiUrl);
         try {
           const response = await fetch(apiUrl);
           if (!response.ok) {
@@ -108,9 +259,10 @@ export default defineComponent({
                   return feature.properties['wmo:topicHierarchy']
                 }
               });
+              console.log(this.hierarchyList)
             }
             else {
-              console.error("API response does not contain features:", data);
+              console.error("API response is not an object");
             }
           }
         }
@@ -118,138 +270,84 @@ export default defineComponent({
           console.error("Error fetching topic hierarchy:", error)
         }
       }
-    }
-  },
-  components: {
-    VCard,
-    VCardTitle,
-    VCardText,
-    VCardItem,
-    VTextarea,
-    VForm,
-    VBtn,
-    VSelect,
-    VueDatePicker,
-    InspectBufrButton,
-    DownloadButton
-  },
-  setup(props) {
-    const date = ref({
-      month: new Date().getMonth(),
-      year: new Date().getFullYear()
-    }); // Default is current month and year
-    const datePossible = ref(null) // Boolean for if date is possible
-
-    const bulletin = ref(""); // SYNOP message string
-    const aaxxPresent = ref(true); // Boolean for if AAXX present in data
-    const equalsPresent = ref(true); // Boolean for if = delimiter present
-
-    const hierarchyList = ref(["test1","test2","test3"]); // List of topic hierarchies for drop down
-    const hierarchy = ref(""); // Topic hierarchy of transformed data
-
-    const input = ref(null); // Concatenation of user inputs
-    const result = ref(null); // Output from synop2bufr
-
-    // Watch to verify that the selected month+year combination is possible
-    watch(date, (newVal) => {
-      const today = new Date();
-      today.setHours(0, 0, 0, 0)
-
-      if (newVal) {
-        const selectedDate = new Date(newVal.year, newVal.month)
-        datePossible.value = (selectedDate.getTime() <= today.getTime()); // If selected date is before now, then it is possible
-      }
-      else {
-        datePossible.value = null;
-      }
-    });
-
-    const testSuccessResult = () => {
-      // Simulated response data
+    },
+    // When the user clicks on one of the expandable lists such as
+    // the output BUFR files, this method force scrolls the page down
+    // so that the content is not accidentally missed by the user
+    scrollToRef(refName) {
+      setTimeout(() => {
+        this.$refs[refName].$el.scrollIntoView({ behavior: 'smooth' });
+      }, 200); // 200ms delay to allow the list to render before scrolling
+    },
+    // Simulated output response in test environment representing a success
+    testSuccessResult() {
       const testData = {
-        "result": "success",
+        "result": "Success",
         "messages transformed": 2,
         "messages published": 2,
         "files": [
           "http://3.73.37.35/data/2023-12-17/wis/synop/test/WIGOS_0-20000-0-15015_20231217T120000.bufr4",
           "http://3.73.37.35/data/2023-12-17/wis/synop/test/WIGOS_0-20000-0-15020_20231217T120000.bufr4"
         ],
-        "errors": [],
-        "warnings": []	
+        "warnings": [],
+        "errors": []
       }
       // Update the result variable with the test data
-      result.value = testData;
-    };
-
-    const testFailureResult = () => {
-      // Simulated response data
-      const testData = {
-        "result": "failure",
-        "messages transformed": 0,
-        "messages published": 0,
-        "files": [],
-        "errors": [
-          "AAXX 17181 15015 01598 8270 10039 20026 39397 42633 58006 60022 70282 8657/ 333 10066 20029 31010 4/000 55300 0//// 20000 3//// 69917 91002 91104. __str__ returned non-string (type InvalidGroup)!"
-        ],
-        "warnings": [
-          "Station 112345 not found in station file"
-        ]	
-      };
-      // Update the result variable with the test data
-      result.value = testData;
-    };
-
-    const testPartialSuccessResult = () => {
-      // Simulated response data
+      this.result = testData;
+    },
+    // Simulated output response in test environment representing a partial
+    // success
+    testPartialSuccessResult() {
       const testData = {
-        "result": "partial success",
+        "result": "Partial Success",
         "messages transformed": 1,
         "messages published": 1,
         "files": [
           "http://3.73.37.35/data/2023-12-17/wis/synop/test/WIGOS_0-20000-0-15015_20231217T120000.bufr4"
         ],
-        "errors": [
-          "AAXX 17181 15015 01598 8270 10039 20026 39397 42633 58006 60022 70282 8657/ 333 10066 20029 31010 4/000 55300 0//// 20000 3//// 69917 91002 91104. __str__ returned non-string (type InvalidGroup)!"
-        ],
         "warnings": [
-          "Station 112345 not found in station file"
-        ]	
+          "Missing station height for station 15090",
+          "Station 15108 not found in station metadata list",
+        ],
+        "errors": []
       };
       // Update the result variable with the test data
-      result.value = testData;
-    };
-
-    // function to submit data and call synop2bufr process
-    const submit = async () => {
-      // set result back to null
-      result.value = null;
-      
-      // check if bulletin contains the work success, failure or partial success
-      if (bulletin.value.includes("partial")) {
-        testPartialSuccessResult();
-      } else if (bulletin.value.includes("failure")) {
-        testFailureResult();
-      } else if (bulletin.value.includes("success")) {
-        testSuccessResult();
-      } else {
-        // if not, then call the synop2bufr process
-        await callSynop2Bufr();
-      }
-    };
-    const callSynop2Bufr = async () => {
+      this.result = testData;
+    },
+    // Simulated output response in test environment representing a failure
+    testFailureResult() {
+      const testData = {
+        "result": "Failure",
+        "messages transformed": 0,
+        "messages published": 0,
+        "files": [],
+        "warnings": [],
+        "errors": [
+          "Error converting to BUFR: local variable 'messages' referenced before assignment",
+          "No SYNOP messages converted"
+        ]
+      };
+      // Update the result variable with the test data
+      this.result = testData;
+    },
+    // Pushing the user input to the synop2bufr process
+    async callSynop2Bufr() {
       var payload = {
         inputs: {
-          data: bulletin.value,
-          year: date.value.year,
-          month: date.value.month + 1, // +1 as JS starts from 0 for months
-          channel: hierarchy.value,
-          // topicHierarchy: hierarchy.value, // not sure how the synop2bufr process will handle topic hierarchy yet
+          data: this.bulletin, // Raw FM 12 data
+          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
+          notify: this.notificationsOn // Boolean for WIS2 notifications
         }
       };
 
       const synopUrl = `${import.meta.env.VITE_API_URL}/processes/wis2box-synop-process/execution`
 
-      input.value = payload;
+      console.log(payload);
+      console.log(synopUrl);
+      this.input = payload;
 
       const response = await fetch(synopUrl, {
         method: 'POST',
@@ -262,7 +360,7 @@ export default defineComponent({
 
       if (!response.ok) {
         console.error('HTTP error', response.status);
-        result.value = {
+        this.result = {
           "result": "API error",
           "errors": [
             synopUrl + " returned " + response.status
@@ -270,41 +368,94 @@ export default defineComponent({
         };
       } else {
         const data = await response.json();
-        result.value = data;
+        this.result = data;
+        console.log("Result:"); // TODO: Remove this line
+        console.log(this.result); // TODO: Remove this line
       }
-
-    };
-    // Get the title text for the result card based on the "result" key value
-    const getResultTitle = () => {
-      if (result.value && result.value.result) {
-        const resultKey = result.value.result;
-        return "Result: " + resultKey;
+    },
+    // Method for when the user presses the submit button, including
+    // a loading animation, obtaining the result, 
+    async submit() {
+      // Start loading animation
+      this.loading = true;
+
+      // Set result back to null
+      this.result = null;
+
+      // Update whether the user wants WIS2 notifications
+      this.notificationsOn = this.notificationsOnPending;
+
+      // Check if bulletin contains the word success, failure or partial success
+      if (this.bulletin.includes("success")) {
+        this.testSuccessResult();
+      } else if (this.bulletin.includes("partial")) {
+        this.testPartialSuccessResult();
+      } else if (this.bulletin.includes("failure")) {
+        this.testFailureResult();
+      } else {
+        // Otherwise, call the synop2bufr process
+        await this.callSynop2Bufr();
       }
-      return 'Unknown';
-    };
-    const getFileName = (url) => {
+
+      await new Promise(r => setTimeout(r, 200)) // Artificial delay to test loading
+
+      // End loading animation
+      this.loading = false;
+    },
+    // Get filename from output BUFR files so it can be displayed on screen
+    getFileName(url) {
       const urlParts = url.split('/');
       return urlParts[urlParts.length - 1];
-    };
-    return {
-      date,
-      datePossible,
-      bulletin,
-      aaxxPresent,
-      equalsPresent,
-      hierarchyList,
-      hierarchy,
-      input,
-      submit,
-      result,
-      getResultTitle,
-      getFileName
     }
+  },
+  watch: {
+    date: {
+      deep: true,
+      handler(newVal) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0)
+
+        if (newVal) {
+          const selectedDate = new Date(newVal.year, newVal.month)
+          // If selected date is before now, then it is possible
+          this.datePossible = (selectedDate.getTime() <= today.getTime());
+        }
+        else {
+          this.datePossible = null;
+        }
+      }
+    }
+  },
+  components: {
+    VCard,
+    VCardTitle,
+    VCardText,
+    VCardItem,
+    VTextarea,
+    VForm,
+    VBtn,
+    VSelect,
+    VListGroup,
+    VueDatePicker,
+    InspectBufrButton,
+    DownloadButton
+  },
+  mounted() {
+    this.fetchHierarchy();
   }
 });
 </script>
 
 <style scoped>
+.big-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+
+.calendar-box {
+  width: 250px;
+}
+
 .hint-text {
   font-size: 0.75rem;
   margin-top: 0.25rem;
@@ -323,43 +474,47 @@ export default defineComponent({
   color: red;
 }
 
-.file-item,
-.warning-item,
-.error-item {
-  margin-bottom: 8px;
+.button-align {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 8px;
+  gap: 20px;
 }
 
-.file-item {
-  background-color: lightgreen;
+.warning-color {
+  color: #FD9235
 }
 
-.error-item {
-  background-color: lightcoral
+.warning-item {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  background-color: #FEC89A
 }
 
-.warning-item {
-  background-color: wheat;
+.error-color {
+  color: #EA4848
 }
 
-.file-info {
+.error-item {
+  margin-bottom: 8px;
   display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-weight: bold;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  background-color: #F08080
 }
 
+
 .file-actions {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 5px;
+  padding: 4px;
 }
 
-.file-actions v-btn {
-  align-self: center;
+.divider-spacing {
+  margin-top: 10px;
 }
 </style>
\ No newline at end of file
diff --git a/webapp/src/components/WIS2Notifications.vue b/webapp/src/components/WIS2Notifications.vue
deleted file mode 100644
index 42ec2f6..0000000
--- a/webapp/src/components/WIS2Notifications.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title>WIS2 notifications</v-card-title>
-    <v-card-item v-for="dataset in datasets" :key="dataset.id">
-      <NotificationsButton :dataset="dataset.properties['wmo:topicHierarchy']" :title="dataset.properties.title" />
-    </v-card-item>
-  </v-card>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import { VCard, VCardTitle, VCardText, VCardItem, VForm, VTextarea, VBtn, VSelect } from 'vuetify/lib/components/index.mjs';
-import InspectBufrButton from '@/components/InspectBufrButton.vue';
-import DownloadButton from '@/components/DownloadButton.vue';
-import NotificationsButton from '@/components/NotificationsButton.vue';
-
-export default defineComponent({
-    name: 'WIS2Notifications',
-    components: {
-        VCard,
-        VCardTitle,
-        VCardText,
-        VCardItem,
-        VForm,
-        VTextarea,
-        VBtn,
-        VSelect,
-        InspectBufrButton,
-        DownloadButton,
-        NotificationsButton
-    },
-    setup(props) {
-        const datasets = ref([]); // array of datasets extracted from discovery-metadata
-        // function to get datasets from discovery-metadata
-        const getDatasets = async () => {    
-          if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
-            console.log("Use test datasets");
-            datasets.value = [
-              {
-                "id": "urn:x-wmo:md:rou:rnimh:synoptic-weather-observations",
-                "properties": {
-                  "title": "Synoptic weather observations from Romania",
-                  "description": "Synoptic weather observations from Romania",
-                  "wmo:topicHierarchy": "rou/rnimh/data/core/weather/surface-based-observations/synop",
-                }
-              },
-              {
-                "id": "urn:x-wmo:md:mwi:mwi_met_centre:surface-weather-observations",
-                "properties": {
-                  "title": "Surface weather observations from Malawi",
-                  "description": "Surface weather observations from Malawi",
-                  "wmo:topicHierarchy": "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`;
-            console.log("Fetching topic hierarchy from:", apiUrl);
-            try {
-              const response = await fetch(apiUrl);
-              if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
-              }
-              else {
-                const data = await response.json();
-                if (data.features) {
-                  datasets.value = data.features;
-                }
-                else {
-                  console.error("API response does not have features property");
-                } 
-              }
-            }
-            catch (error) {
-              console.error("Error fetching topic hierarchy:", error)
-            }
-          }
-        };
-        getDatasets();
-        return {
-            datasets,
-            getDatasets
-        };
-    },
-});  
-</script>
\ No newline at end of file
diff --git a/webapp/src/layouts/default/AppBar.vue b/webapp/src/layouts/default/AppBar.vue
index 7339932..572a4b5 100644
--- a/webapp/src/layouts/default/AppBar.vue
+++ b/webapp/src/layouts/default/AppBar.vue
@@ -1,15 +1,37 @@
 <template>
-  <v-app-bar flat>
-    <v-app-bar-title>
-      <v-icon icon="mdi-circle-slice-4" />
-      WIS2-in-a-box
+  <v-app-bar image="@/assets/banner.png" scroll-behavior="collapse fade-image" scroll-threshold="40" class="bar-sizing">
+    <img src="@/assets/logo-large.png" alt="Logo" class="wmo-logo" />
+    <v-app-bar-title class="wis2-title"> WIS2 in a box
     </v-app-bar-title>
-    <v-btn exact to="/">Home</v-btn>
-    <v-btn text to="synop_form">Synop form</v-btn>
-    <v-btn text to="wis2_notifications">WIS2 notifications</v-btn>
+    <v-btn class="bar-button" exact to="/">Home</v-btn>
+    <v-btn class="bar-button" text to="synop_form">Synop form</v-btn>
+    <v-btn class="bar-button" text to="monitoring">Monitoring</v-btn>
   </v-app-bar>
 </template>
 
 <script setup>
   //
 </script>
+
+<style scoped>
+.bar-sizing {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.wmo-logo {
+  height: 70px;
+  width: auto;
+  margin-left: 22px;
+}
+
+.wis2-title {
+  color: #003DA5;
+  font-size: 2rem;
+  font-weight: 300;
+}
+
+.bar-button {
+  color: #F6FFF8;
+}
+</style>
diff --git a/webapp/src/layouts/default/Default.vue b/webapp/src/layouts/default/Default.vue
index 62ba176..c0c4faf 100644
--- a/webapp/src/layouts/default/Default.vue
+++ b/webapp/src/layouts/default/Default.vue
@@ -1,12 +1,15 @@
 <template>
   <v-app>
     <default-bar />
-
+    <!-- Add space after AppBar -->
+    <div style="margin-top: 30px;"/>
     <default-view />
+    <default-footer />
   </v-app>
 </template>
 
 <script setup>
   import DefaultBar from './AppBar.vue'
   import DefaultView from './View.vue'
+  import DefaultFooter from './Footer.vue'
 </script>
diff --git a/webapp/src/layouts/default/Footer.vue b/webapp/src/layouts/default/Footer.vue
new file mode 100644
index 0000000..47ea27d
--- /dev/null
+++ b/webapp/src/layouts/default/Footer.vue
@@ -0,0 +1,18 @@
+<template>
+    <img src="@/assets/foot.png"/>
+    <v-footer class="footer-text">
+        <div>
+            {{ new Date().getFullYear() }} — <strong>World Meteorological Organization</strong>
+        </div>
+    </v-footer>
+</template>
+
+<style scoped>
+
+.footer-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #888;
+}
+</style>
\ No newline at end of file
diff --git a/webapp/src/plugins/index.js b/webapp/src/plugins/index.js
index 4974223..2e19b97 100644
--- a/webapp/src/plugins/index.js
+++ b/webapp/src/plugins/index.js
@@ -8,10 +8,12 @@
 import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import router from '../router'
+import VueApexCharts from 'vue3-apexcharts';
 
 export function registerPlugins (app) {
   loadFonts()
   app
     .use(vuetify)
     .use(router)
+    .use(VueApexCharts)
 }
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index b53996b..3f175ba 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -14,19 +14,29 @@ const routes = [
         path: 'synop_form',
         name: 'SynopForm',
         component: () => import('@/views/SynopForm.vue'),
+        meta: {title: 'wis2box - Synop Form'}
       },
       {
-        path: 'wis2_notifications', // New route for the notifications page
-        name: 'wis2_notifications',
-        component: () => import('@/views/WIS2Notifications.vue'),
+        path: 'monitoring', // New route for the notifications page
+        name: 'Monitoring',
+        component: () => import('@/views/MonitoringPage.vue'),
+        meta: {title: 'wis2box - Monitoring'}
       },
     ],
   },
 ]
 
+// Create the router
 const router = createRouter({
   history: createWebHistory('/wis2box-webapp/'),
   routes,
 })
 
+// Assign the title of the browser tab for each page
+router.beforeEach((to, from, next) => {
+  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+  if(nearestWithTitle) document.title = nearestWithTitle.meta.title;
+  next();
+});
+
 export default router
diff --git a/webapp/src/views/MonitoringPage.vue b/webapp/src/views/MonitoringPage.vue
new file mode 100644
index 0000000..267d638
--- /dev/null
+++ b/webapp/src/views/MonitoringPage.vue
@@ -0,0 +1,7 @@
+<template>
+  <MonitoringPage />
+</template>
+
+<script setup>
+  import MonitoringPage from '@/components/MonitoringPage.vue'
+</script>
\ No newline at end of file
diff --git a/webapp/src/views/WIS2Notifications.vue b/webapp/src/views/WIS2Notifications.vue
deleted file mode 100644
index 7858ab5..0000000
--- a/webapp/src/views/WIS2Notifications.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <WIS2Notifications />
-</template>
-
-<script setup>
-  import WIS2Notifications from '@/components/WIS2Notifications.vue'
-</script>
\ No newline at end of file
