diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 3844d3c..1913ca6 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -12,11 +12,14 @@
         "@vuepic/vue-datepicker": "^5.4.0",
         "apexcharts": "^3.41.1",
         "core-js": "^3.29.0",
+        "d3": "^7.8.5",
+        "geojson-validation": "^1.0.2",
+        "leaflet": "^1.9.4",
         "roboto-fontface": "*",
         "vue": "^3.2.0",
         "vue-router": "^4.0.0",
         "vue3-apexcharts": "^1.4.4",
-        "vuetify": "^3.0.0",
+        "vuetify": "^3.3.15",
         "webfontloader": "^1.0.0"
       },
       "devDependencies": {
@@ -24,7 +27,7 @@
         "eslint": "^8.37.0",
         "eslint-plugin-vue": "^9.3.0",
         "sass": "^1.60.0",
-        "vite": "^4.2.0",
+        "vite": "^4.4.9",
         "vite-plugin-vuetify": "^1.0.0"
       }
     },
@@ -890,6 +893,14 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -943,6 +954,376 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d3": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
+      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -989,6 +1370,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1341,6 +1730,14 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/geojson-validation": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/geojson-validation/-/geojson-validation-1.0.2.tgz",
+      "integrity": "sha512-K5jrJ4wFvORn2pRKeg181LL0QPYuEKn2KHPvfH1m2QtFlAXFLKdseqt0XwBM3ELOY7kNM1fglRQ6ZwUQZ5S00A==",
+      "bin": {
+        "gjv": "bin/gjv"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -1403,6 +1800,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -1459,6 +1867,14 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1540,6 +1956,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -1875,9 +2296,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.26",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+      "version": "8.4.29",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
+      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2008,10 +2429,15 @@
       "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
       "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rollup": {
-      "version": "3.26.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.2.tgz",
-      "integrity": "sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==",
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.0.tgz",
+      "integrity": "sha512-nszM8DINnx1vSS+TpbWKMkxem0CDWk3cSit/WWCBVs9/JZ1I/XLwOsiUglYuYReaeWWSsW9kge5zE5NZtf/a4w==",
       "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -2047,6 +2473,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "node_modules/sass": {
       "version": "1.63.6",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
@@ -2295,14 +2731,14 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.4.tgz",
-      "integrity": "sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==",
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
+      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
       "devOptional": true,
       "dependencies": {
         "esbuild": "^0.18.10",
-        "postcss": "^8.4.25",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -2427,9 +2863,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.8.tgz",
-      "integrity": "sha512-m88MUczIeyNXfINnklBhat2fRknOUmeWyxgGTOZI5b95j9JTZwPH0b1z979nS6gJIyhPDVTuZSS/abp5aUyGBA==",
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.15.tgz",
+      "integrity": "sha512-n7GYBO31k8vA9UfvRwLNyBlkq1WoN3IJ9wNnIBFeV4axleSjFAzzR4WUw7rgj6Ba3q6N2hxXoyxJM21tseQTfQ==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
diff --git a/webapp/package.json b/webapp/package.json
index 33b84d4..925fb7e 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,6 +14,8 @@
     "apexcharts": "^3.41.1",
     "core-js": "^3.29.0",
     "d3": "^7.8.5",
+    "geojson-validation": "^1.0.2",
+    "leaflet": "^1.9.4",
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
diff --git a/webapp/public/code_lists/WMORegion.json b/webapp/public/code_lists/WMORegion.json
new file mode 100644
index 0000000..55e15a5
--- /dev/null
+++ b/webapp/public/code_lists/WMORegion.json
@@ -0,0 +1,8 @@
+[
+  {"name": "Africa", "id": "I", "description": "Region I - Africa"},
+  {"name": "Asia", "id": "II", "description": "Region II - Asia"},
+  {"name": "South America", "id": "III", "description": "Region III - South America"},
+  {"name": "North America, Central America and the Caribbean", "id": "IV", "description": "Region IV - North America, Central America and the Caribbean"},
+  {"name": "South-West Pacific", "id": "V", "description": "South-West Pacific"},
+  {"name": "Europe", "id": "VI", "description": "Europe"}
+]
\ No newline at end of file
diff --git a/webapp/public/code_lists/facilityType.json b/webapp/public/code_lists/facilityType.json
new file mode 100644
index 0000000..f9c8e9f
--- /dev/null
+++ b/webapp/public/code_lists/facilityType.json
@@ -0,0 +1,16 @@
+[
+  {"name": "Air (fixed)", "id": "Air (fixed)", "description": "Airborne station/platform, at fixed position"},
+  {"name": "Air (mobile)", "id": "Air (mobile)", "description": "Airborne station/platform, moving around"},
+  {"name": "Lake/River (fixed)", "id": "Lake/River (fixed)", "description": "Station/platform at lake/river surface, at fixed position"},
+  {"name": "Lake/River (mobile)", "id": "Lake/River (mobile)", "description": "Station/platform at lake/river surface, moving around"},
+  {"name": "Land (fixed)", "id": "Land (fixed)", "description": "Station/platform on solid terrain, at fixed position"},
+  {"name": "Land (mobile)", "id": "Land (mobile)", "description": "Station/platform on solid terrain, moving around"},
+  {"name": "Land (on ice)", "id": "Land (on ice)", "description": "Station/platform on ice-covered ground, moving with the ice"},
+  {"name": "Sea (fixed)", "id": "Sea (fixed)", "description": "Station/platform at sea surface, at fixed position"},
+  {"name": "Sea (mobile)", "id": "Sea (mobile)", "description": "Station/platform at sea surface, moving around"},
+  {"name": "Sea (on ice)", "id": "Sea (on ice)", "description": "Station/platform on floating ice, moving with the ice"},
+  {"name": "Space-based", "id": "Space-based", "description": "Satellite platform in orbit"},
+  {"name": "Underwater (fixed)", "id": "Underwater (fixed)", "description": "Station/platform under water, at fixed horizontal position"},
+  {"name": "Underwater (mobile)", "id": "Underwater (mobile)", "description": "Station/platform under water, moving around also horizontally"},
+  {"name": "unknown", "id": "unknown", "description": "The station/platform type is unknown."}
+]
\ No newline at end of file
diff --git a/webapp/public/code_lists/operatingStatus.json b/webapp/public/code_lists/operatingStatus.json
new file mode 100644
index 0000000..ba7ebc2
--- /dev/null
+++ b/webapp/public/code_lists/operatingStatus.json
@@ -0,0 +1,7 @@
+[
+  {
+    "name": "Operational",
+    "id": "operational",
+    "description": "The station fully complies with the reporting obligations of the observation programme/network concerned."
+  }
+]
\ No newline at end of file
diff --git a/webapp/public/code_lists/territory.json b/webapp/public/code_lists/territory.json
new file mode 100644
index 0000000..89f0bef
--- /dev/null
+++ b/webapp/public/code_lists/territory.json
@@ -0,0 +1,7 @@
+[
+  {"name": "Algeria", "id": "Algeria", "description": "Algeria"},
+  {"name": "Congo", "id": "Congo", "description": "Congo"},
+  {"name": "Italy", "id": "Italy", "description": "Italy"},
+  {"name": "Malawi", "id": "Malawi", "description": "Malawi"},
+  {"name": "Romania", "id": "Romania", "description": "Romania"}
+]
\ No newline at end of file
diff --git a/webapp/src/components/CsvToBUFRForm.vue b/webapp/src/components/CsvToBUFRForm.vue
index b32241c..f205263 100644
--- a/webapp/src/components/CsvToBUFRForm.vue
+++ b/webapp/src/components/CsvToBUFRForm.vue
@@ -101,8 +101,7 @@
                         <v-card>
                             <v-card-title>Select topic hierarchy</v-card-title>
                             <v-card-item>
-                              <v-select label="Channel" v-model="hierarchy" :items="hierarchyList" v-if="hierarchyList"
-                                hint="Topic hierarchy for ingestion of data" persistent-hint></v-select>
+                              <TopicHierarchySelector :value="topicSelected" @update:modelValue="newValue => topicSelected = newValue"/>
                             </v-card-item>
                         </v-card>
                     </v-stepper-window-item>
@@ -231,6 +230,7 @@
     import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem, VStepperActions} from 'vuetify/lib/labs/VStepper/index.mjs';
     import InspectBufrButton from '@/components/InspectBufrButton.vue';
     import DownloadButton from '@/components/DownloadButton.vue';
+    import TopicHierarchySelector from '@/components/TopicHierarchySelector.vue';
     import * as d3 from 'd3';
     export default defineComponent({
         name: 'CsvToBUFRForm',
@@ -238,7 +238,8 @@
             VFileInput, VCardActions, VBtn, VCard, VCardText, VCardItem, VDataTable,
             VChip, VTooltip, VListItem, VList, VListSubheader, VSheet, VContainer,
             VCardTitle, VIcon, VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem,
-            VStepperActions, VDialog, VCardSubtitle, InspectBufrButton, DownloadButton
+            VStepperActions, VDialog, VCardSubtitle, InspectBufrButton, DownloadButton,
+            TopicHierarchySelector
         },
         setup() {
             // reactive variables
@@ -251,8 +252,7 @@
             const validationErrors = ref([]);
             const status = ref(null);
             const token = ref(null);
-            const hierarchyList = ref(null);
-            const hierarchy = ref(null);
+            const topicSelected = ref(null);
             const rawCSV = ref(null);
             const msg = ref(null);
             const showDialog = ref(null);
@@ -279,9 +279,6 @@
                 return "WIS2 notifications published: " + messagesPublished;;
             });
             // life cycle hooks
-            onBeforeMount( () => {
-                fetchHierarchy();
-            });
             onMounted( () => {
                 setTimeout(scrollToRef(200));
             });
@@ -396,42 +393,6 @@
                     step.value = 1;
                 };
             };
-            const fetchHierarchy = async() => {
-                const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
-                // check if TEST=True is set in .env file
-                // 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");
-                  hierarchyList.value = ["test1", "test2", "test3"];
-                }
-                else {
-                  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) {
-                        // Use Array.map to create a new array of the topic hierarchies
-                        hierarchyList.value = data.features.map(feature => {
-                          if (feature.properties && feature.properties['wmo:topicHierarchy']) {
-                            return feature.properties['wmo:topicHierarchy']
-                          }
-                        });
-                      }
-                      else {
-                        console.error("API response is not an object");
-                      }
-                    }
-                  }
-                  catch (error) {
-                    alert("Error fetching topic hierarchy, please check the API end point");
-                    console.error("Error fetching topic hierarchy:", error)
-                  }
-                }
-            };
             const submit = async() => {
               CsvToBUFR()
             };
@@ -439,7 +400,7 @@
               const payload = {
                   inputs: {
                       data: rawCSV.value,
-                      channel: hierarchy.value,
+                      channel: topicSelected.value.id,
                       notify: true,
                       template: "aws-template"
                   }
@@ -501,6 +462,7 @@
                       proceed = true;
                     }else{
                       showDialog.value = true;
+                      console.log(topicSelected.value)
                       msg.value = "Please select a topic to publish on before proceeding";
                     }
                     break;
@@ -520,7 +482,8 @@
             };
 
             // Define watches
-            watch( hierarchy, (val) => {
+            watch( topicSelected, (val) => {
+              console.log(val);
               if( val ){
                 status.value.topicHierarchy = true;
               }else{
@@ -550,8 +513,8 @@
             });
 
             return {theData, headers, incomingFile, loadCSV, step, prev, next, getFileName, scrollToRef,
-                    validationWarnings, validationErrors, status, token, hierarchyList,
-                    hierarchy, submit, msg, showDialog, result, resultTitle, numberNotifications};
+                    validationWarnings, validationErrors, status, token,
+                    topicSelected, submit, msg, showDialog, result, resultTitle, numberNotifications};
         },
     })
 </script>
diff --git a/webapp/src/components/FacilityTypeSelector.vue b/webapp/src/components/FacilityTypeSelector.vue
new file mode 100644
index 0000000..30efd47
--- /dev/null
+++ b/webapp/src/components/FacilityTypeSelector.vue
@@ -0,0 +1,72 @@
+<template>
+    <div v-if="! errorMessage">
+      <v-autocomplete
+        v-if="(options !== null)"
+        :items="options"
+        item-title="name"
+        item-value="id"
+        label="Type of observing facility"
+        v-model="selected"
+        :readonly="readonly"
+        :hint="selected ? selected.description : 'Select facility type'"
+        persistent-hint
+        return-object
+        />
+    </div>
+    <div v-else class="error">
+      <v-text-field class="text-error" read-only :hint="props.defaultHint" persistent-hint>{{ errorMessage }}</v-text-field>
+    </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onBeforeMount, watch, onErrorCaptured, computed} from 'vue';
+  import {VAutocomplete, VTextField} from 'vuetify/lib/components/index.mjs';
+
+
+  export default defineComponent({
+    name: 'FacilityTypeSelector',
+    components: {
+      VAutocomplete, VTextField
+    },
+    props: {
+      modelValue: {},
+      readonly: false
+    },
+    emits: ["update:modelValue"],
+    setup(props, {emit}){
+      const apiUrl = "/code_lists/facilityType.json";
+      const options = ref(null);
+      const selected = ref(null);
+      const errorMessage = ref(null);
+      const fetchOptions = async () => {
+        try {
+          const response = await fetch(apiUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          const data = await response.json();
+          options.value = data; // Assuming the API response contains the options in the expected format
+        } catch (error) {
+          errorMessage.value = 'Error fetching facility type options.';
+          console.error('Error fetching facility type options:', error);
+        }
+      };
+
+      onBeforeMount( async () => {
+        await fetchOptions() ;
+        // update if we have an initial value
+        if( props.modelValue.length ){
+          selected.value = options.value.find(option => option.id === props.modelValue) ;
+        }
+      });
+
+      watch( selected, (newValue) => {
+        if( selected.value ){
+          emit("update:modelValue", newValue);
+        }
+      });
+
+      return {selected, options, errorMessage};
+    }
+  });
+</script>
diff --git a/webapp/src/components/LocatorMap.vue b/webapp/src/components/LocatorMap.vue
new file mode 100644
index 0000000..8e948cf
--- /dev/null
+++ b/webapp/src/components/LocatorMap.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-card style="width: 100%; height: 100%; min-height: 400px" :id="id" ></v-card>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { VCard, VCardTitle, VCardText } from 'vuetify/lib/components/index.mjs';
+import "leaflet/dist/leaflet.css";
+import L from 'leaflet'
+// geojson validator
+import * as gjv from 'geojson-validation';
+
+export default defineComponent({
+  name: "LocatorMap",
+  props: {
+    center: {
+      type: Object,
+      default: () => ({ lat: -6.155595235231087, lng: 106.84202325990253})
+    },
+    zoom: {
+      type: Number,
+      default: 10
+    },
+    id: {
+      type: String,
+      default: "map"
+    },
+    longitude: {
+      type: Number,
+      default: 0
+    },
+    latitude: {
+      type: Number,
+      default: 0
+    }
+  },
+  data(){
+    return {
+    }
+  },
+  components: {
+    VCard,
+    VCardTitle,
+    VCardText,
+  },
+  setup( props, {emit} ) {
+    const mapContainer = ref(null);
+    const map = ref(null);
+    const markerLayer = ref(null);
+
+    mapContainer.value = props.id;
+
+    const geom = computed( () => ({
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [props.longitude, props.latitude]
+      },
+      properties: {}
+      }));
+
+    onMounted( () =>{
+      map.value = L.map(props.id, {zoomAnimation:false, fadeAnimation:true, markerZoomAnimation:true}).setView( props.center, props.zoom );
+      map.value.attributionControl.setPrefix('<a href="https://leafletjs.com/">Leaflet</a>')
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; OpenStreetMap contributors'}).addTo(map.value);
+      // check whether we have a location to show
+      if( geom.value.geometry ){
+        updateMarker();
+      };
+      emit('mapLoaded', map.value);
+    });
+
+    const updateMarker = async () => {
+      if( markerLayer.value ){
+        markerLayer.value.remove();
+      }
+      // now check whether the new marker is valid and plot
+      if( ! (isNaN(geom.value.geometry.coordinates[0]) || isNaN(geom.value.geometry.coordinates[1]))  ){
+        if( gjv.isFeature(geom.value) ){
+          markerLayer.value = L.geoJSON(geom.value).addTo(map.value);
+          map.value.fitBounds(markerLayer.value.getBounds());
+          map.value.setZoom(12);
+        }
+      }
+    };
+
+    watch( geom, () => {
+      updateMarker();
+    })
+
+
+    return {mapContainer};
+  }
+})
+</script>
diff --git a/webapp/src/components/OperatingStatusSelector.vue b/webapp/src/components/OperatingStatusSelector.vue
new file mode 100644
index 0000000..666a945
--- /dev/null
+++ b/webapp/src/components/OperatingStatusSelector.vue
@@ -0,0 +1,73 @@
+<template>
+    <div v-if="! errorMessage">
+      <v-autocomplete
+        v-if="(options !== null)"
+        :items="options"
+        item-title="name"
+        item-value="id"
+        label="Observing facility operating status"
+        v-model="selected"
+        :readonly="readonly"
+        :hint="selected ? selected.description : 'Select observing facility operating status'"
+        persistent-hint
+        return-object
+        />
+    </div>
+    <div v-else class="error">
+      <v-text-field class="text-error" read-only :hint="props.defaultHint" persistent-hint>{{ errorMessage }}</v-text-field>
+    </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onBeforeMount, watch, onErrorCaptured, computed} from 'vue';
+  import {VAutocomplete, VTextField} from 'vuetify/lib/components/index.mjs';
+
+
+  export default defineComponent({
+    name: 'OperatingStatusSelector',
+    components: {
+      VAutocomplete, VTextField
+    },
+    props: {
+      modelValue: {},
+      readonly: false
+    },
+    emits: ["update:modelValue"],
+    setup(props, {emit}){
+      const apiUrl = "/code_lists/operatingStatus.json";
+      const options = ref(null);
+      const selected = ref(null);
+      const errorMessage = ref(null);
+
+      const fetchOptions = async () => {
+        try {
+          const response = await fetch(apiUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          const data = await response.json();
+          options.value = data; // Assuming the API response contains the options in the expected format
+        } catch (error) {
+          errorMessage.value = 'Error fetching operating status options.';
+          console.error('Error fetching operating status options:', error);
+        }
+      };
+
+      onBeforeMount( async () => {
+        await fetchOptions() ;
+        // update if we have an initial value
+        if( props.modelValue.length ){
+          selected.value = options.value.find(option => option.id === props.modelValue) ;
+        }
+      });
+
+      watch( selected, (newValue) => {
+        if( selected.value ){
+          emit("update:modelValue", newValue);
+        }
+      });
+
+      return {selected, options, errorMessage};
+    }
+  });
+</script>
diff --git a/webapp/src/components/StationEditor.vue b/webapp/src/components/StationEditor.vue
new file mode 100644
index 0000000..5979d73
--- /dev/null
+++ b/webapp/src/components/StationEditor.vue
@@ -0,0 +1,332 @@
+<template>
+  <v-sheet align="center">
+    <v-dialog v-model="showDialog" width="auto">
+      <v-card>
+        <v-card-text>{{errorMessage}}</v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" block @click="showDialog = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-card-title v-if="!readonly">{{ route.params.id ? 'Edit' : 'Create new' }} station</v-card-title>
+    <v-card-title v-else>View station</v-card-title>
+    <v-card v-if="station" max-width="1200px">
+      <v-card-item>
+        <v-text-field
+          label="Station name"
+          v-model="station.properties.name"
+          :rules="[rules.validName]"
+          :readonly="readonly"
+          hint="Enter name of station" persistent-hint>
+        </v-text-field>
+      </v-card-item>
+      <v-card-item>
+        <v-text-field
+          label="WIGOS station identifier"
+          v-model="station.properties.wigos_station_identifier"
+          :rules="[rules.validWSI]"
+          :readonly="readonly"
+          hint="Enter the WIGOS station identifier" persistent-hint>
+        </v-text-field>
+      </v-card-item>
+      <v-card-item>
+        <v-text-field
+          label="Traditional station identifier"
+          v-model="station.properties.traditional_station_identifier"
+          :readonly="readonly"
+          hint="Enter the traditional (5 or 7 digit) station identifier" persistent-hint>
+        </v-text-field>
+      </v-card-item>
+      <v-card-item>
+        <v-container>
+          <v-row>
+            <v-col cols="6">
+              <v-row>
+              <v-text-field
+                label="Longitude (decimal degrees E), -180 to 180"
+                v-model="station.geometry.longitude"
+                :rules="[rules.validLongitude]"
+                :readonly="readonly"
+                type="number"
+                hint="Enter the station longitude (degrees E)" persistent-hint/>
+              </v-row>
+              <v-row>
+                <v-text-field
+                label="Latitude (decimal degrees N), -90 to 90"
+                v-model="station.geometry.latitude"
+                :rules="[rules.validLatitude]"
+                :readonly="readonly"
+                type="number"
+                hint="Enter the station latitude (degrees N)" persistent-hint/>
+            </v-row>
+            <v-row>
+              <v-text-field
+                label="Station elevation above sea level (metres)"
+                v-model="station.geometry.elevation"
+                :rules="[rules.validElevation]"
+                :readonly="readonly"
+                type="number"
+                hint="Station elevation above sea level (metres)" persistent-hint/>
+            </v-row>
+            <v-row v-if="!readonly">
+              <v-btn @click=getElevation()>Get elevation</v-btn>
+            </v-row>
+            </v-col>
+            <v-col cols="6">
+              <LocatorMap
+                  :longitude="parseFloat(station.geometry.longitude)"
+                  :latitude="parseFloat(station.geometry.latitude)"/>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-item>
+      <v-card-item>
+        <FacilityTypeSelector v-model="station.properties.facility_type" :readonly="readonly"/>
+      </v-card-item>
+      <v-card-item>
+        <v-text-field
+          label="Barometer height above sea level"
+          v-model="station.properties.barometer_height"
+          :rules="[rules.validBarometerHeight]"
+          :readonly="readonly"
+          hint="Enter barometer height (metres)" persistent-hint type="number">
+        </v-text-field>
+      </v-card-item>
+      <v-card-item><WMORegionSelector v-model="station.properties.wmo_region" :readonly="readonly"/></v-card-item>
+      <v-card-item><TerritorySelector v-model="station.properties.territory_name" :readonly="readonly"/></v-card-item>
+      <v-card-item><OperatingStatusSelector v-model="station.properties.status" :readonly="readonly"/></v-card-item>
+      <v-card-item>
+        <TopicHierarchySelector v-model="station.properties.topics" multiple :readonly="readonly"/>
+      </v-card-item>
+      <v-card-item>
+        <v-text-field type="password" clearable v-model="token" label="Auth token"></v-text-field>
+      </v-card-item>
+      <v-card-actions v-if="!readonly">
+        <v-btn @click="registerStation()" elevation=2>Register/Update</v-btn>
+        <v-btn @click="router.push('/station/'+route.params.id)" elevation=2>Cancel</v-btn>
+      </v-card-actions>
+      <v-card-actions v-else>
+        <v-btn @click="router.push('/station/'+route.params.id+'?action=edit')" elevation=2>Edit</v-btn>
+      </v-card-actions>
+    </v-card>
+    </v-sheet>
+  </template>
+  <script>
+    import {defineComponent, ref, watch, onBeforeMount, onMounted} from 'vue';
+    import {VSheet, VCard, VCardItem, VTextField, VContainer, VRow, VCol, VBtn, VCardActions} from 'vuetify/lib/components/index.mjs';
+    import TopicHierarchySelector from '@/components/TopicHierarchySelector.vue';
+    import FacilityTypeSelector from '@/components/FacilityTypeSelector.vue';
+    import WMORegionSelector from '@/components/WMORegionSelector.vue';
+    import TerritorySelector from '@/components/TerritorySelector.vue';
+    import OperatingStatusSelector from '@/components/OperatingStatusSelector.vue';
+    import LocatorMap from '@/components/LocatorMap.vue';
+    import {useRoute, useRouter} from 'vue-router';
+
+
+
+    export default defineComponent({
+      name: 'StationEditor',
+      components: {
+        VContainer, VRow, VContainer, VCard, VCardItem, VTextField, OperatingStatusSelector,
+        TopicHierarchySelector, FacilityTypeSelector, WMORegionSelector, TerritorySelector,
+        VBtn, VCardActions, LocatorMap
+      },
+      setup(){
+        const route = useRoute();
+        const router = useRouter();
+        const station = ref(null);
+        const topics = ref([null]);
+        const showDialog = ref(false);
+        const errorMessage = ref(null);
+        const operatingStatusOptions = ref(null);
+        const territoryOptions = ref(null);
+        const WMORegionOptions = ref(null);
+        const readonly = ref(false);
+        const msg = ref('');
+        const token = ref(null);
+        // define validation rules
+        const rules = ref({
+          validWSI: value => /^0-[0-9]{1,5}-[0-9]{0,5}-[0-9a-zA-Z]{1,16}$/.test(value) || 'Invalid WSI',
+          validLongitude: value => ! (Math.abs(value) > 180 || isNaN(value)) ? true : 'Invalid longitude',
+          validLatitude: value => ! (Math.abs(value) > 90 || isNaN(value)) ? true : 'Invalid latitude',
+          validElevation: value => ! isNaN(value) ? true : 'Invalid elevation',
+          validBarometerHeight: value => ! isNaN(value) ? true : 'Invalid barometer height',
+          validName: value => value && value.length > 3 ? true : 'Name must be more than 3 characters'
+        });
+        // setup initial (empty station)
+
+        const registerStation = async () => {
+          var record = {
+            id: station.value.properties.wigos_station_identifier,  // WSI
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [parseFloat(station.value.geometry.longitude),
+                            parseFloat(station.value.geometry.latitude),
+                            parseFloat(station.value.geometry.elevation)]
+            },
+            properties: {
+              name: station.value.properties.name,
+              wigos_station_identifier: station.value.properties.wigos_station_identifier,  // WSI
+              traditional_station_identifier: station.value.properties.traditional_station_identifier,
+              facility_type: station.value.properties.facility_type.id,
+              territory_name: station.value.properties.territory_name.id,
+              barometer_height: parseFloat(station.value.properties.barometer_height),
+              wmo_region: station.value.properties.wmo_region.id,
+              url: "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/" +
+                      station.value.properties.wigos_station_identifier,
+              topics: station.value.properties.topics.map( (topic) => (topic.id)),
+              status: station.value.properties.status.id,
+              id: station.value.properties.wigos_station_identifier  // WSI
+            }
+          }
+          var apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items`;
+          var leaf = route.params.id ? "/" + route.params.id : "";
+          apiURL = apiURL + leaf;
+          const response = await fetch(apiURL, {
+              method: route.params.id ? 'PUT' : 'POST',
+              headers: {
+                  'encode': 'json',
+                  'Content-Type': 'application/geo+json',
+                  'authorization': 'Bearer '+ token.value
+              },
+              body: JSON.stringify(record)
+            });
+          if (!response.ok) {
+              console.log(record);
+             console.error('HTTP error', response.status);
+          } else {
+            setTimeout(200); // short pause to give backend time to catch up.
+            router.push("/station/"+record.id);
+            errorMessage.value = "Station successfully submitted";
+            showDialog.value = true;
+          }
+        };
+
+        const getElevation = async () => {
+          var isValid = true;
+          if ( isNaN( station.value.geometry.latitude ) || Math.abs(station.value.geometry.latitude) > 90 ){
+            isValid = false;
+          }
+          if ( isNaN( station.value.geometry.longitude ) || Math.abs(station.value.geometry.longitude) > 180 ){
+            isValid = false;
+          }
+          if( isValid ){
+            var query = "https://api.opentopodata.org/v1/aster30m?locations=" +
+                          station.value.geometry.latitude + "," +
+                          station.value.geometry.longitude;
+            const response = await fetch(query);
+            if( !response.ok ){
+              throw new Error(`HTTP error fetching elevation, Status: ${response.status}`);
+            }else{
+              const data = await response.json();
+              station.value.geometry.elevation = data.results[0].elevation;
+            }
+          }else{
+            msg.value = "Please enter a valid location before getting the elevation.";
+            showDialog.value = true;
+          }
+        };
+
+        onBeforeMount( () => {
+          if(route.query.action==="edit"){
+            readonly.value = false;
+          }else{
+            readonly.value = true;
+          }
+        });
+
+
+        onMounted( async () => {
+          // load codes lists
+          if (route.params.id){
+            await loadStation( route.params.id );
+          }
+          if( ! station.value ){
+            readonly.value = false;
+            station.value = {
+              id: null,  // WSI
+              type: 'Feature',
+              geometry: {
+                type: 'Point',
+                coordinates: [null,null,null]
+              },
+              properties: {
+                name: null,
+                wigos_station_identifier: null,  // WSI
+                traditional_station_identifier: null,
+                facility_type: {},
+                territory_name: {},
+                barometer_height: null,
+                wmo_region: {},
+                url: null,
+                topics: [],
+                status: {},
+                id: null  // WSI
+              }
+            };
+          }
+        })
+
+        // load station
+        const loadStation = async (wsi) => {
+          const apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items/${wsi}`;
+          try {
+            const response  = await fetch(apiURL);
+            if (!response.ok && response.status !== 404){
+              throw new Error(`HTTP error! Status: ${response.status}`);
+            }else if(response.status === 404){
+              errorMessage.value = "Station not found, please check the ID or register a new station."
+              showDialog.value = true;
+              router.push('/station/');
+            } else{
+              var data = await response.json();
+              station.value = {
+                id: data.id,  // WSI
+                type: data.type,
+                geometry: {
+                  type: data.geometry.type,
+                  coordinates: data.geometry.coordinates,
+                  longitude: data.geometry.coordinates[0],
+                  latitude: data.geometry.coordinates[1],
+                  elevation: data.geometry.coordinates[2]
+                },
+                properties: {
+                  name: data.properties.name,
+                  wigos_station_identifier: data.properties.wigos_station_identifier,  // WSI
+                  traditional_station_identifier: data.properties.traditional_station_identifier,
+                  facility_type: data.properties.facility_type,
+                  territory_name: data.properties.territory_name,
+                  barometer_height: data.properties.barometer_height,
+                  wmo_region: data.properties.wmo_region,
+                  url: data.properties.url,
+                  topics: JSON.parse(JSON.stringify(data.properties.topics)),
+                  status: data.properties.status,
+                  id: data.properties.id  // WSI
+                }
+              };
+            }
+          }
+          catch (error) {
+            errorMessage.value = "Error fetching station details, please check the API end point." +
+                                  " See logs for more information.";
+            console.error("Error fetching station details:", error)
+          }
+        }
+
+        watch( (route), () => {
+          if(route.query.action === "edit"){
+            readonly.value = false;
+          }else{
+            readonly.value = true;
+          }
+        })
+
+
+        return {station, topics, registerStation, getElevation, showDialog, msg, rules, route, router,
+          operatingStatusOptions, WMORegionOptions, territoryOptions, readonly, errorMessage, token
+        };
+      }
+    });
+  </script>
+
diff --git a/webapp/src/components/StationTable.vue b/webapp/src/components/StationTable.vue
new file mode 100644
index 0000000..b53a033
--- /dev/null
+++ b/webapp/src/components/StationTable.vue
@@ -0,0 +1,170 @@
+<template>
+  <v-card>
+    <v-card-title>Stations</v-card-title>
+    <v-card-item>
+      <VTextField style="width: 400px;" v-model="search" prepend-icon="mdi-text-search" label="search" single-line hide-details></VTextField>
+      <v-card-item>
+        <v-btn prepend-icon="mdi-plus" color="success" @click="addRecord()">Add new station</v-btn>
+      </v-card-item>
+      <VDataTable :headers="headers" :items="items" :search="search" dense small>
+          <template v-slot:item.actions="{ item }">
+            <v-icon size="small" @click="editRecord(item)">mdi-pen</v-icon>
+            <v-icon size="small" @click="viewRecord(item)">mdi-eye</v-icon>
+            <v-icon size="small" @click="deleteRecord(item)">mdi-delete</v-icon>
+          </template>
+          <template v-slot:top>
+            <v-dialog v-model="deleteDialog" width="auto" persistent>
+              <v-card>
+                <v-card-text>Please type the WIGOS station identifier to confirm the deletion</v-card-text>
+                <v-card-item><v-text-field v-model="stationToDelete" label="Station to delete"></v-text-field></v-card-item>
+                <v-card-item><v-text-field type="password" clearable v-model="token" label="Auth token"></v-text-field></v-card-item>
+                <v-card-actions>
+                  <v-btn
+                      color="error"
+                      @click="confirmDelete( {item} )"
+                      v-if="selectedStation===stationToDelete && token">Confirm deletion</v-btn>
+                  <v-btn color="success" @click="closeDeleteDialog()">Cancel</v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
+          </template>
+      </VDataTable>
+    </v-card-item>
+  </v-card>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { VCard, VCardTitle, VCardText, VChip, VTextField } from 'vuetify/lib/components/index.mjs';
+import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured} from 'vue';
+import { ref, computed, watchEffect, watch } from 'vue'
+import { VDataTable } from 'vuetify/lib/labs/VDataTable/index.mjs';
+import {useRoute, useRouter} from 'vue-router';
+
+
+export default defineComponent({
+  name: 'StationTable',
+  components: {
+    VCard,
+    VCardTitle,
+    VCardText,
+    VDataTable,
+    VTextField,
+  },
+  setup(props) {
+    const headers = ref([]);
+    const search = ref("");
+    const sortBy = ref([{key:"", order:"desc"}]);
+    const items = ref([]);
+    const errorMessage = ref(null);
+    const deleteDialog = ref(false);
+    const stationToDelete = ref(null);
+    const selectedStation = ref(null);
+    const router = useRouter();
+    const token = ref(null);
+
+    const loadStations = async () => {
+        const apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items?f=json`;
+        try {
+          var response = await fetch(apiURL);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }else{
+            var featureCollection = await response.json();
+            items.value = featureCollection.features.map( (feature) => {
+              return{
+                actions: "actions",
+                id: feature.id,
+                station_name: feature.properties.name,
+                wigos_station_identifier: feature.properties.wigos_station_identifier,
+                traditional_station_identifier: feature.properties.traditional_station_identifier,
+                facility_type: feature.properties.facility_type,
+                latitude: feature.geometry.coordinates[1],
+                longitude: feature.geometry.coordinates[0],
+                elevation: feature.geometry.coordinates[2],
+                barometer_height: feature.properties.barometer_height,
+                territory_name: feature.properties.territory_name,
+                wmo_region: feature.properties.wmo_region,
+                url: feature.properties.url,
+                topics: feature.properties.topics ? JSON.stringify(feature.properties.topics) : JSON.stringify([feature.properties.topic]),
+                status: feature.properties.operating_status
+                }
+            });
+            console.log(items);
+          }
+        }
+        catch (error) {
+          errorMessage.value = "Error fetching topic hierarchy, please check the API end point." +
+                                " See logs for more information.";
+          console.error("Error fetching topic hierarchy:", error)
+        }
+        headers.value = Object.keys(items.value[0]).map( key => ({
+          title: key,
+          value: key,
+          key: key,
+          sortable: true
+        }));
+    }
+
+    onMounted( async() => {
+      loadStations();
+    });
+
+    const closeDeleteDialog = () => {
+      selectedStation.value = null;
+      stationToDelete.value = null;
+      deleteDialog.value = false;
+    };
+    const confirmDelete = async () => {
+      if( selectedStation.value === stationToDelete.value ){
+        console.log("confirmed");
+        const apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items/${stationToDelete.value}`;
+        try{
+          var response = await fetch(apiURL, {
+              method: 'DELETE',
+              headers: {
+                  'encode': 'json',
+                  'Content-Type': 'application/geo+json',
+                  'authorization': 'Bearer ' + token.value
+              },
+              body: null
+            });
+          if (!response.ok) {
+            console.error('HTTP error', response.status);
+          }else {
+            closeDeleteDialog();
+            // reload the station list
+            setTimeout(500); // short pause to give backend time to catch up.
+            loadStations();
+          }
+        }
+        catch (error) {
+          errorMessage.value = "Error deleting record, see logs for more information.";
+          console.error(error);
+        }
+      }
+    };
+    const deleteRecord = (id) => {
+      selectedStation.value = id.key;
+      deleteDialog.value = true;
+    };
+
+    const editRecord = (id) => {
+      console.log(id.key)
+      router.push("/station/"+id.key+"?action=edit")
+    }
+
+    const viewRecord = (id) => {
+      router.push("/station/"+id.key)
+    }
+
+    const addRecord = () => {
+      router.push("/station/")
+    }
+
+    return {headers, items, search, sortBy, confirmDelete, addRecord, deleteRecord, closeDeleteDialog,
+            stationToDelete, selectedStation, deleteDialog, editRecord, viewRecord, token};
+  }
+
+});
+</script>
diff --git a/webapp/src/components/TerritorySelector.vue b/webapp/src/components/TerritorySelector.vue
new file mode 100644
index 0000000..1ce75b1
--- /dev/null
+++ b/webapp/src/components/TerritorySelector.vue
@@ -0,0 +1,73 @@
+<template>
+    <div v-if="! errorMessage">
+      <v-autocomplete
+        v-if="(options !== null)"
+        :items="options"
+        item-title="name"
+        item-value="id"
+        label="Territory or member operating station"
+        v-model="selected"
+        :readonly="readonly"
+        :hint="selected ? selected.description : 'Select territory'"
+        persistent-hint
+        return-object
+        />
+    </div>
+    <div v-else class="error">
+      <v-text-field class="text-error" read-only :hint="props.defaultHint" persistent-hint>{{ errorMessage }}</v-text-field>
+    </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onBeforeMount, watch, onErrorCaptured, computed} from 'vue';
+  import {VAutocomplete, VTextField} from 'vuetify/lib/components/index.mjs';
+
+
+  export default defineComponent({
+    name: 'TerritorySelector',
+    components: {
+      VAutocomplete, VTextField
+    },
+    props: {
+      modelValue: {},
+      readonly: false
+    },
+    emits: ["update:modelValue"],
+    setup(props, {emit}){
+      const apiUrl = "/code_lists/territory.json";
+      const options = ref(null);
+      const selected = ref(null);
+      const errorMessage = ref(null);
+
+      const fetchOptions = async () => {
+        try {
+          const response = await fetch(apiUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          const data = await response.json();
+          options.value = data; // Assuming the API response contains the options in the expected format
+        } catch (error) {
+          errorMessage.value = 'Error fetching operating status options.';
+          console.error('Error fetching operating status options:', error);
+        }
+      };
+
+      onBeforeMount( async () => {
+        await fetchOptions() ;
+        // update if we have an initial value
+        if( props.modelValue.length ){
+          selected.value = options.value.find(option => option.id === props.modelValue) ;
+        }
+      });
+
+      watch( selected, (newValue) => {
+        if( selected.value ){
+          emit("update:modelValue", newValue);
+        }
+      });
+
+      return {selected, options, errorMessage};
+    }
+  });
+</script>
diff --git a/webapp/src/components/TopicHierarchySelector.vue b/webapp/src/components/TopicHierarchySelector.vue
new file mode 100644
index 0000000..dd24681
--- /dev/null
+++ b/webapp/src/components/TopicHierarchySelector.vue
@@ -0,0 +1,98 @@
+<template>
+    <div v-if="! errorMessage">
+      <v-autocomplete
+        v-if="(options !== null)"
+        :items="options"
+        item-title="name"
+        item-value="id"
+        label="Topic hierarchy"
+        v-model="selected"
+        :readonly="readonly"
+        :hint="selected ? selected.description : 'Select topic hierarchy'"
+        persistent-hint
+        :multiple=true
+        return-object
+        />
+    </div>
+    <div v-else class="error">
+      <v-text-field class="text-error" read-only>{{ errorMessage }}</v-text-field>
+    </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onBeforeMount, watch, onErrorCaptured} from 'vue';
+  import {VAutocomplete, VTextField} from 'vuetify/lib/components/index.mjs';
+
+
+  export default defineComponent({
+    name: 'SelectTopicHierarchy',
+    components: {
+      VAutocomplete, VTextField
+    },
+    props: {
+      modelValue: {},
+      readonly: false
+    },
+    emits: ["update:modelValue"],
+    setup(props, {emit}){
+      const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
+      const options = ref(null);
+      const selected = ref([]);
+      const errorMessage = ref(null);
+
+      const fetchOptions = async () => {
+// Get topic hierarchies
+        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) {
+              // Use Array.map to create a new array of the topic hierarchies
+              options.value = data.features.map(feature => {
+                if (feature.properties && feature.properties['wmo:topicHierarchy']) {
+                  return {
+                    name: feature.properties['wmo:topicHierarchy'],
+                    id: feature.properties['wmo:topicHierarchy'],
+                    description: feature.properties['description']
+                    }
+                  }
+                }
+              );
+            }
+            else {
+              console.error("API response is not an object");
+            }
+          }
+        }
+        catch (error) {
+          errorMessage.value = "Error fetching topic hierarchy, please check the API end point." +
+                                " See logs for more information.";
+          console.error("Error fetching topic hierarchy:", error)
+        }
+      };
+
+
+      onBeforeMount( async () => {
+        await fetchOptions();
+        if( props.modelValue.length ){
+          for(var topic in props.modelValue){
+            console.log(topic);
+            selected.value.push(options.value.find(option => option.id === props.modelValue[topic]));
+          }
+        }
+      });
+
+      watch( selected, (newValue) => {
+        if( selected.value ){
+          emit("update:modelValue", newValue);
+        }
+      });
+
+      return {selected, options, errorMessage};
+    }
+  });
+</script>
diff --git a/webapp/src/components/TopicSelector.vue b/webapp/src/components/TopicSelector.vue
deleted file mode 100644
index f8b07f9..0000000
--- a/webapp/src/components/TopicSelector.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <v-card>
-    <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-card>
-</template>
diff --git a/webapp/src/components/WMORegionSelector.vue b/webapp/src/components/WMORegionSelector.vue
new file mode 100644
index 0000000..b932836
--- /dev/null
+++ b/webapp/src/components/WMORegionSelector.vue
@@ -0,0 +1,73 @@
+<template>
+    <div v-if="! errorMessage">
+      <v-autocomplete
+        v-if="(options !== null)"
+        :items="options"
+        item-title="name"
+        item-value="id"
+        label="WMO Regional Association"
+        v-model="selected"
+        :readonly="readonly"
+        :hint="selected ? selected.description : 'Select WMO Regional Association'"
+        persistent-hint
+        return-object
+        />
+    </div>
+    <div v-else class="error">
+      <v-text-field class="text-error" read-only :hint="props.defaultHint" persistent-hint>{{ errorMessage }}</v-text-field>
+    </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onBeforeMount, watch, onErrorCaptured, computed} from 'vue';
+  import {VAutocomplete, VTextField} from 'vuetify/lib/components/index.mjs';
+
+
+  export default defineComponent({
+    name: 'WMORegionSelector',
+    components: {
+      VAutocomplete, VTextField
+    },
+    props: {
+      modelValue: {},
+      readonly: false
+    },
+    emits: ["update:modelValue"],
+    setup(props, {emit}){
+      const apiUrl = "/code_lists/WMORegion.json";
+      const options = ref(null);
+      const selected = ref(null);
+      const errorMessage = ref(null);
+
+      const fetchOptions = async () => {
+        try {
+          const response = await fetch(apiUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          const data = await response.json();
+          options.value = data; // Assuming the API response contains the options in the expected format
+        } catch (error) {
+          errorMessage.value = 'Error fetching operating status options.';
+          console.error('Error fetching operating status options:', error);
+        }
+      };
+
+      onBeforeMount( async () => {
+        await fetchOptions() ;
+        // update if we have an initial value
+        if( props.modelValue.length ){
+          selected.value = options.value.find(option => option.id === props.modelValue) ;
+        }
+      });
+
+      watch( selected, (newValue) => {
+        if( selected.value ){
+          emit("update:modelValue", newValue);
+        }
+      });
+
+      return {selected, options, errorMessage};
+    }
+  });
+</script>
diff --git a/webapp/src/layouts/default/AppBar.vue b/webapp/src/layouts/default/AppBar.vue
index 387df66..d6d806e 100644
--- a/webapp/src/layouts/default/AppBar.vue
+++ b/webapp/src/layouts/default/AppBar.vue
@@ -1,12 +1,13 @@
 <template>
-  <v-app-bar image="@/assets/banner.png" scroll-behavior="collapse fade-image" scroll-threshold="40" class="bar-sizing">
+  <v-app-bar image="@/assets/banner.png">
     <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 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="csv2bufr_form">CSV to BUFR form</v-btn>
-    <v-btn class="bar-button" text to="monitoring">Monitoring</v-btn>
+    <v-btn class="bar-button" text to="/synop_form">Synop form</v-btn>
+    <v-btn class="bar-button" text to="/csv2bufr_form">CSV to BUFR form</v-btn>
+    <v-btn class="bar-button" text to="/station">Stations</v-btn>
+    <v-btn class="bar-button" text to="/monitoring">Monitoring</v-btn>
   </v-app-bar>
 </template>
 
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 34735d4..95a2fc8 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -28,6 +28,23 @@ const routes = [
         component: () => import('@/views/MonitoringPage.vue'),
         meta: {title: 'wis2box - Monitoring'}
       },
+      {
+        path: '/station',
+        name: 'stationTable',
+        component: () => import('@/views/StationTable.vue'),
+        meta: {title: 'View stations'}
+      },
+      {
+        path: '/station/:id(.*)',
+        children: [
+          {
+            path: '',
+            name: 'stationEditor',
+            component: () => import('@/views/StationEditor.vue'),
+            meta: {title: 'Create / register new station'}
+          }
+        ]
+      }
     ],
   },
 ]
diff --git a/webapp/src/views/StationEditor.vue b/webapp/src/views/StationEditor.vue
new file mode 100644
index 0000000..8c7c0a7
--- /dev/null
+++ b/webapp/src/views/StationEditor.vue
@@ -0,0 +1,7 @@
+<template>
+  <StationEditor/>
+</template>
+
+<script setup>
+  import StationEditor from '@/components/StationEditor.vue'
+</script>
diff --git a/webapp/src/views/StationTable.vue b/webapp/src/views/StationTable.vue
new file mode 100644
index 0000000..dff89ae
--- /dev/null
+++ b/webapp/src/views/StationTable.vue
@@ -0,0 +1,7 @@
+<template>
+  <StationTable/>
+</template>
+
+<script setup>
+  import StationTable from '@/components/StationTable.vue'
+</script>