From 63b823a7a11c7e221df2e75b61cdd542ecfbb364 Mon Sep 17 00:00:00 2001
From: Matt <matt@mattwb65.com>
Date: Thu, 17 Apr 2025 18:45:15 -0400
Subject: [PATCH] more code cleanup

---
 webapp/frontend/package-lock.json             | 907 +++++++++++++++++-
 webapp/frontend/package.json                  |   3 +
 .../frontend/src/components/Announcement.vue  |  11 +-
 .../frontend/src/components/Chart/Legend.vue  |  17 +
 .../frontend/src/components/Chart/Metrics.vue | 137 +++
 .../Chart/PowerMetrics/ChannelData.vue        |  25 +
 .../src/components/CloseActionButton.vue      |  27 +
 .../src/components/HardwareModelList.vue      |  31 +-
 webapp/frontend/src/components/Header.vue     | 232 ++---
 .../src/components/Header/ActionButton.vue    |  36 +
 webapp/frontend/src/components/InfoModal.vue  |  12 +-
 webapp/frontend/src/components/NodeInfo.vue   |  60 +-
 .../NodeInfo/DeviceMetricsChart.vue           | 318 +++---
 .../NodeInfo/EnvironmentMetricsChart.vue      | 324 +++----
 .../src/components/NodeInfo/LoraConfig.vue    |  70 +-
 .../src/components/NodeInfo/MqttHistory.vue   |  48 +-
 .../src/components/NodeInfo/NodeDetails.vue   |  69 +-
 .../src/components/NodeInfo/OtherInfo.vue     |  75 +-
 .../src/components/NodeInfo/Position.vue      |  65 +-
 .../components/NodeInfo/PowerMetricsChart.vue | 355 +++----
 .../src/components/NodeInfo/Share.vue         |  52 +-
 .../src/components/NodeInfo/Traceroutes.vue   |   7 +-
 .../src/components/NodeNeighborsModal.vue     |  86 +-
 .../components/NodePositionHistoryModal.vue   |  13 +-
 .../frontend/src/components/NodeTooltip.vue   | 138 +++
 webapp/frontend/src/components/Settings.vue   | 338 +++----
 .../src/components/Settings/Field.vue         |  55 ++
 .../src/components/Traceroute/NodeEntry.vue   |  28 +
 .../src/components/TracerouteInfo.vue         |  97 +-
 .../src/composables/useNodeProcessor.js       | 117 +++
 .../src/composables/useSearchedNodes.js       |  51 +
 webapp/frontend/src/config.js                 |   2 -
 .../src/directives/v-click-outside.js         |  16 +
 webapp/frontend/src/icons/DeviceIcon.vue      |   5 +
 webapp/frontend/src/icons/InfoIcon.vue        |   5 +
 webapp/frontend/src/icons/MobileCloseIcon.vue |   5 +
 webapp/frontend/src/icons/RandomIcon.vue      |   9 +
 webapp/frontend/src/icons/ReloadIcon.vue      |   7 +
 webapp/frontend/src/icons/SearchIcon.vue      |   7 +
 webapp/frontend/src/icons/SettingsIcon.vue    |   6 +
 webapp/frontend/src/main.js                   |  22 +-
 webapp/frontend/src/map.js                    |  77 +-
 webapp/frontend/src/router/index.js           |   2 +-
 webapp/frontend/src/store.js                  |  39 +-
 webapp/frontend/src/stores/configStore.js     |  39 +
 webapp/frontend/src/stores/mapStore.js        |  55 ++
 webapp/frontend/src/stores/uiStore.js         |  82 ++
 webapp/frontend/src/utils.js                  |  29 +-
 webapp/frontend/src/views/HomeView.vue        | 463 +++++----
 49 files changed, 3016 insertions(+), 1658 deletions(-)
 create mode 100644 webapp/frontend/src/components/Chart/Legend.vue
 create mode 100644 webapp/frontend/src/components/Chart/Metrics.vue
 create mode 100644 webapp/frontend/src/components/Chart/PowerMetrics/ChannelData.vue
 create mode 100644 webapp/frontend/src/components/CloseActionButton.vue
 create mode 100644 webapp/frontend/src/components/Header/ActionButton.vue
 create mode 100644 webapp/frontend/src/components/NodeTooltip.vue
 create mode 100644 webapp/frontend/src/components/Settings/Field.vue
 create mode 100644 webapp/frontend/src/components/Traceroute/NodeEntry.vue
 create mode 100644 webapp/frontend/src/composables/useNodeProcessor.js
 create mode 100644 webapp/frontend/src/composables/useSearchedNodes.js
 create mode 100644 webapp/frontend/src/directives/v-click-outside.js
 create mode 100644 webapp/frontend/src/icons/DeviceIcon.vue
 create mode 100644 webapp/frontend/src/icons/InfoIcon.vue
 create mode 100644 webapp/frontend/src/icons/MobileCloseIcon.vue
 create mode 100644 webapp/frontend/src/icons/RandomIcon.vue
 create mode 100644 webapp/frontend/src/icons/ReloadIcon.vue
 create mode 100644 webapp/frontend/src/icons/SearchIcon.vue
 create mode 100644 webapp/frontend/src/icons/SettingsIcon.vue
 create mode 100644 webapp/frontend/src/stores/configStore.js
 create mode 100644 webapp/frontend/src/stores/mapStore.js
 create mode 100644 webapp/frontend/src/stores/uiStore.js

diff --git a/webapp/frontend/package-lock.json b/webapp/frontend/package-lock.json
index 4a60f0e..a935e34 100644
--- a/webapp/frontend/package-lock.json
+++ b/webapp/frontend/package-lock.json
@@ -13,8 +13,11 @@
         "axios": "^1.8.4",
         "chart.js": "^4.4.8",
         "chartjs-adapter-moment": "^1.0.1",
+        "lodash": "^4.17.21",
         "maplibre-gl": "^5.3.1",
         "moment": "^2.30.1",
+        "pinia": "^3.0.2",
+        "pinia-plugin-persistedstate": "^4.2.0",
         "tailwindcss": "^4.1.4",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -1041,6 +1044,86 @@
         "gl-style-validate": "dist/gl-style-validate.mjs"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nuxt/kit": {
+      "version": "3.16.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.16.2.tgz",
+      "integrity": "sha512-K1SAUo2vweTfudKZzjKsZ5YJoxPLTspR5qz5+G61xtZreLpsdpDYfBseqsIAl5VFLJuszeRpWQ01jP9LfQ6Ksw==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.0.2",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.3",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.4",
+        "globby": "^14.1.0",
+        "ignore": "^7.0.3",
+        "jiti": "^2.4.2",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.7.4",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.1.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.1",
+        "std-env": "^3.8.1",
+        "ufo": "^1.5.4",
+        "unctx": "^2.4.1",
+        "unimport": "^4.1.3",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/kit/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -1825,26 +1908,24 @@
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.2.tgz",
-      "integrity": "sha512-CY0I1JH3Z8PECbn6k3TqM1Bk9ASWxeMtTCvZr7vb+CHi+X/QwQm5F1/fPagraamKMAHVfuuCbdcnNg1A4CYVWQ==",
-      "dev": true,
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.5.tgz",
+      "integrity": "sha512-S9VAVJYVAe4RPx2JZb9ZTEi0lqTySz2CBeF0wHT5D3dkTLnT9yMMGegKNl4b2EIELwLSkcI9bl2qp0/jW+upqA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^7.7.2",
-        "birpc": "^0.2.19",
+        "@vue/devtools-shared": "^7.7.5",
+        "birpc": "^2.3.0",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
         "perfect-debounce": "^1.0.0",
         "speakingurl": "^14.0.1",
-        "superjson": "^2.2.1"
+        "superjson": "^2.2.2"
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.2.tgz",
-      "integrity": "sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==",
-      "dev": true,
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.5.tgz",
+      "integrity": "sha512-QBjG72RfpM0DKtpns2RZOxBltO226kOAls9e4Lri6YxS2gWTgL0H+wj1R2K76lxxIeOrqo4+2Ty6RQnzv+WSTQ==",
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
@@ -1938,6 +2019,18 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1956,15 +2049,26 @@
       }
     },
     "node_modules/birpc": {
-      "version": "0.2.19",
-      "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.19.tgz",
-      "integrity": "sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==",
-      "dev": true,
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.3.0.tgz",
+      "integrity": "sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -2014,6 +2118,34 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/c12": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.0.3.tgz",
+      "integrity": "sha512-uC3MacKBb0Z15o5QWCHvHWj5Zv34pGQj9P+iXKSpTuSGFS0KKhUWf4t9AJ+gWjYOdmWCPEGpEzm8sS0iqbpo1w==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.3",
+        "confbox": "^0.2.2",
+        "defu": "^6.1.4",
+        "dotenv": "^16.4.7",
+        "exsolve": "^1.0.4",
+        "giget": "^2.0.0",
+        "jiti": "^2.4.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^1.0.0",
+        "pkg-types": "^2.1.0",
+        "rc9": "^2.1.2"
+      },
+      "peerDependencies": {
+        "magicast": "^0.3.5"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2070,6 +2202,30 @@
         "moment": "^2.10.2"
       }
     },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2082,6 +2238,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "license": "MIT"
+    },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2093,7 +2264,6 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
       "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-what": "^4.1.8"
@@ -2144,6 +2314,12 @@
         }
       }
     },
+    "node_modules/deep-pick-omit": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/deep-pick-omit/-/deep-pick-omit-1.2.1.tgz",
+      "integrity": "sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==",
+      "license": "MIT"
+    },
     "node_modules/default-browser": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz",
@@ -2187,6 +2363,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "license": "MIT"
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2196,6 +2378,12 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/destr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
+      "license": "MIT"
+    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -2205,6 +2393,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2267,6 +2467,12 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/errx": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/errx/-/errx-0.1.0.tgz",
+      "integrity": "sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==",
+      "license": "MIT"
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2362,6 +2568,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -2395,6 +2613,51 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exsolve": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.4.tgz",
+      "integrity": "sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/figures": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
@@ -2411,6 +2674,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -2554,12 +2829,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/giget": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
+      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.0",
+        "defu": "^6.1.4",
+        "node-fetch-native": "^1.6.6",
+        "nypm": "^0.6.0",
+        "pathe": "^2.0.3"
+      },
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
     "node_modules/gl-matrix": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
       "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==",
       "license": "MIT"
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/global-prefix": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
@@ -2608,6 +2912,38 @@
         "node": ">=4"
       }
     },
+    "node_modules/globby": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.3",
+        "path-type": "^6.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby/node_modules/@sindresorhus/merge-streams": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -2669,7 +3005,6 @@
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/human-signals": {
@@ -2702,6 +3037,15 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz",
+      "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/ini": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
@@ -2727,6 +3071,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -2746,6 +3111,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -2789,7 +3163,6 @@
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
       "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.13"
@@ -2897,6 +3270,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/knitwork": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.2.0.tgz",
+      "integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==",
+      "license": "MIT"
+    },
     "node_modules/kolorist": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
@@ -3132,6 +3520,29 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
+      "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.0.1",
+        "quansync": "^0.2.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3201,6 +3612,40 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -3235,9 +3680,37 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/mlly": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -3288,6 +3761,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-fetch-native": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.6.tgz",
+      "integrity": "sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==",
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -3325,6 +3804,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nypm": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.0.tgz",
+      "integrity": "sha512-mn8wBFV9G9+UFHIrq+pZ2r2zL4aPau/by3kJb3cM7+5tQHMt6HGQB8FDIeKFYp8o0D2pnH6nVsO88N4AmUxIWg==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.0.0",
+        "tinyexec": "^0.3.2"
+      },
+      "bin": {
+        "nypm": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": "^14.16.0 || >=16.10.0"
+      }
+    },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "license": "MIT"
+    },
     "node_modules/open": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
@@ -3367,11 +3871,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-type": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz",
+      "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/pbf": {
@@ -3391,7 +3906,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -3404,7 +3918,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3413,6 +3926,71 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.2.tgz",
+      "integrity": "sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.2.0.tgz",
+      "integrity": "sha512-3buhA7ac+ssbOIx3VRCC8oHkoFwhDM9oHRCjo7nj+O8WUqnW+jRqh7eYT5eS/DNa3H28zp3dYf/nd/Vc8zj8eQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.14.1592",
+        "deep-pick-omit": "^1.2.1",
+        "defu": "^6.1.4",
+        "destr": "^2.0.3"
+      },
+      "peerDependencies": {
+        "@pinia/nuxt": ">=0.9.0",
+        "pinia": ">=2.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/nuxt": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.5.tgz",
+      "integrity": "sha512-HYV3tJGARROq5nlVMJh5KKHk7GU8Au3IrrmNNqr978m0edxgpHgYPDoNUGrvEgIbObz09SQezFR3A1EVmB5WZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.5"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
+      "integrity": "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.1",
+        "exsolve": "^1.0.1",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -3475,12 +4053,71 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/quansync": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz",
+      "integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/quickselect": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
       "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
       "license": "ISC"
     },
+    "node_modules/rc9": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
+      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4",
+        "destr": "^2.0.3"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/resolve-protobuf-schema": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
@@ -3490,11 +4127,20 @@
         "protocol-buffers-schema": "^3.3.1"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/rollup": {
@@ -3549,12 +4195,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "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==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -3616,6 +4291,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3629,12 +4316,17 @@
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
       "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
+      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
+      "license": "MIT"
+    },
     "node_modules/strip-final-newline": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
@@ -3648,6 +4340,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
+      "integrity": "sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "license": "MIT"
+    },
     "node_modules/supercluster": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
@@ -3661,7 +4371,6 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
       "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "copy-anything": "^3.0.2"
@@ -3685,12 +4394,46 @@
         "node": ">=6"
       }
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
     "node_modules/tinyqueue": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
       "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
       "license": "ISC"
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -3701,11 +4444,37 @@
         "node": ">=6"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
+      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "license": "MIT"
+    },
+    "node_modules/unctx": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.4.1.tgz",
+      "integrity": "sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17",
+        "unplugin": "^2.1.0"
+      }
+    },
+    "node_modules/unctx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
       "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -3714,6 +4483,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/unimport": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-4.2.0.tgz",
+      "integrity": "sha512-mYVtA0nmzrysnYnyb3ALMbByJ+Maosee2+WyE0puXl+Xm2bUwPorPaaeZt0ETfuroPOtG8jj1g/qeFZ6buFnag==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "local-pkg": "^1.1.1",
+        "magic-string": "^0.30.17",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "pkg-types": "^2.1.0",
+        "scule": "^1.3.0",
+        "strip-literal": "^3.0.0",
+        "tinyglobby": "^0.2.12",
+        "unplugin": "^2.2.2",
+        "unplugin-utils": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -3724,6 +4527,52 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unplugin": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.2.tgz",
+      "integrity": "sha512-3n7YA46rROb3zSj8fFxtxC/PqoyvYQ0llwz9wtUPUutr9ig09C8gGo5CWCwHrUzlqC1LLR43kxp5vEIyH1ac1w==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "picomatch": "^4.0.2",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.4.tgz",
+      "integrity": "sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/untyped": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-2.0.0.tgz",
+      "integrity": "sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "defu": "^6.1.4",
+        "jiti": "^2.4.2",
+        "knitwork": "^1.2.0",
+        "scule": "^1.3.0"
+      },
+      "bin": {
+        "untyped": "dist/cli.mjs"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -3961,6 +4810,12 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/webapp/frontend/package.json b/webapp/frontend/package.json
index 2e3553d..7465a0e 100644
--- a/webapp/frontend/package.json
+++ b/webapp/frontend/package.json
@@ -14,8 +14,11 @@
     "axios": "^1.8.4",
     "chart.js": "^4.4.8",
     "chartjs-adapter-moment": "^1.0.1",
+    "lodash": "^4.17.21",
     "maplibre-gl": "^5.3.1",
     "moment": "^2.30.1",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.2.0",
     "tailwindcss": "^4.1.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
diff --git a/webapp/frontend/src/components/Announcement.vue b/webapp/frontend/src/components/Announcement.vue
index ba5693b..d9a044d 100644
--- a/webapp/frontend/src/components/Announcement.vue
+++ b/webapp/frontend/src/components/Announcement.vue
@@ -1,22 +1,23 @@
 <script setup>
-import { state } from '../store.js';
-import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '../config.js';
+import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '@/config';
+import { useUIStore } from '@/stores/uiStore';
+const ui = useUIStore();
 
 function dismissAnnouncement() {
     if (lastSeenAnnouncementId.value != CURRENT_ANNOUNCEMENT_ID) {
         lastSeenAnnouncementId.value = CURRENT_ANNOUNCEMENT_ID;
     }
-    state.announcementVisible = false;
+    ui.hideAnnouncement();
 }
 </script>
 <template>
     <!-- announcement -->
-    <div v-if="state.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
+    <div v-if="ui.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
         <!-- info -->
         <div class="my-auto leading-tight">
             <div class="font-bold">Service Announcement</div>
             <div class="text-sm">
-                <span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="state.infoModalVisible = true" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
+                <span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="ui.showInfoModal()" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
             </div>
         </div>
         <!-- action buttons -->
diff --git a/webapp/frontend/src/components/Chart/Legend.vue b/webapp/frontend/src/components/Chart/Legend.vue
new file mode 100644
index 0000000..cc8be80
--- /dev/null
+++ b/webapp/frontend/src/components/Chart/Legend.vue
@@ -0,0 +1,17 @@
+<script setup>
+const props = defineProps({
+    legendData: { // Object with legend labels as keys and Tailwind color classes as values
+        type: Object,
+        required: true,
+    },
+});
+</script>
+<template>
+    <!-- Chart Legend -->
+    <div class="flex justify-center space-x-4 py-2">
+      <div v-for="(colorClass, label) in legendData" :key="label" class="flex items-center space-x-1">
+        <div :class="['w-2 h-2', colorClass]" class="rounded-full"></div>
+        <div class="text-sm text-gray-500">{{ label }}</div>
+      </div>
+    </div>
+</template>
diff --git a/webapp/frontend/src/components/Chart/Metrics.vue b/webapp/frontend/src/components/Chart/Metrics.vue
new file mode 100644
index 0000000..dee30a6
--- /dev/null
+++ b/webapp/frontend/src/components/Chart/Metrics.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { ref, onMounted, watch, defineProps, onUnmounted, nextTick } from 'vue';
+import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
+import 'chartjs-adapter-moment';
+import ChartLegend from '@/components/Chart/Legend.vue';
+import { useConfigStore } from '@/stores/configStore';
+import { getTimeSpans } from '@/utils';
+// Props for chart data, type, and customization
+const props = defineProps({
+  title: String,
+  data: Object,
+  chartType: String,
+  timeRangeKey: String,
+  legendData: Object,
+  scales: Array,
+  chartConfig: Object,
+});
+
+const configStore = useConfigStore();
+const chartEl = ref(null);
+
+async function initChart() {
+  await nextTick();
+
+  // Check if chart element is present
+  if (!chartEl.value) {
+    console.error('initChart(): Canvas element is not available.');
+    return;
+  }
+
+  const labels = props.data?.labels || [];
+
+  // Destroy existing chart to avoid conflicts with new data
+  const existingChart = chartEl.value ? Chart.getChart(chartEl.value) : null;
+  if (existingChart) {
+    existingChart.destroy();
+  }
+
+  // determine if we actually have data
+  const hasEmptyDataset = labels.length === 0;
+
+  // Use an empty dataset for no data
+  const datasets = !hasEmptyDataset
+    ? props.data.datasets
+    : [{
+        label: 'No Data',
+        data: [],
+        borderColor: '#e5e7eb',
+        backgroundColor: '#e5e7eb',
+        borderDash: [5, 5], // Dashed border for the placeholder line
+        pointRadius: 0,
+        fill: false,
+      }];
+
+  const chartData = {
+    labels: !hasEmptyDataset ? labels : [new Date()], // Show empty chart with a placeholder date if no data
+    datasets,
+  };
+
+
+  new Chart(chartEl.value, {
+    type: props.chartType,
+    data: chartData,
+    options: {
+      responsive: true,
+      scales: props.chartConfig.scales,
+      plugins: {
+        legend: {
+          display: props.chartConfig.legendDisplay ?? false,
+          labels: {
+            generateLabels: () => Object.keys(props.legendData).map((key) => ({
+              text: key,
+              fillStyle: props.legendData[key],
+            })),
+          },
+        },
+        tooltip: props.chartConfig.tooltipOptions,
+      },
+    },
+  });
+}
+
+// Call initChart again if the props.data changes (e.g., when time range changes)
+// Watch for changes in the props.data and trigger chart initialization only when the data changes
+watch(
+  () => props.data,
+  async (newData, oldData) => {
+    if (typeof oldData === 'undefined') return; // first load
+    if (JSON.stringify(newData) !== JSON.stringify(oldData)) {
+      // Now check if chartEl is available
+      if (chartEl.value) {
+        await initChart(); // Initialize the chart after the DOM update
+      } else {
+        console.error('watch(): Canvas element is not available.');
+      }
+    }
+  },
+  { immediate: true }
+);
+onMounted(async () => {
+  Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement);
+  // Now check if chartEl is available
+  if (chartEl.value) {
+    await initChart(); // Initialize the chart after the DOM update
+  } else {
+    console.error('onMounted(): Canvas element is not available.');
+  }
+})
+onUnmounted(() => {
+  const existingChart = chartEl.value ? Chart.getChart(chartEl.value) : null;
+  if (existingChart) existingChart.destroy();
+});
+</script>
+
+<template>
+  <div>
+    <div class="flex bg-gray-200 p-2 font-semibold">
+      <div class="my-auto">{{ props.title }}</div>
+      <div class="ml-auto">
+        <select v-model="configStore[props.timeRangeKey]" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
+          <option v-for="(range, index) in getTimeSpans()" :key="index" :value="index">{{ range.name }}</option>
+        </select>
+      </div>
+    </div>
+    <ul role="list" class="flex-1 divide-y divide-gray-200">
+      <li>
+        <div class="px-4 py-2">
+          <div class="w-full min-h-[150px]">
+            <canvas ref="chartEl" class="h-[150px]"></canvas>
+            <ChartLegend :legendData="legendData" />
+          </div>
+        </div>
+      </li>
+      <slot />
+    </ul>
+  </div>
+</template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/Chart/PowerMetrics/ChannelData.vue b/webapp/frontend/src/components/Chart/PowerMetrics/ChannelData.vue
new file mode 100644
index 0000000..db103db
--- /dev/null
+++ b/webapp/frontend/src/components/Chart/PowerMetrics/ChannelData.vue
@@ -0,0 +1,25 @@
+  
+<script setup>
+  import { selectedNodeLatestPowerMetric } from '@/store.js';
+  const props = defineProps({
+    channel: Number, // Channel number (1, 2, or 3)
+  });
+</script>
+
+<template>
+    <li class="flex p-3">
+      <div class="text-sm font-medium text-gray-900">Channel {{ channel }}</div>
+      <div class="ml-auto text-sm text-gray-700">
+        <span v-if="selectedNodeLatestPowerMetric">
+          <span v-if="selectedNodeLatestPowerMetric[`ch${channel}_voltage`]" >
+            {{ Number(selectedNodeLatestPowerMetric[`ch${channel}_voltage`]).toFixed(2) }}V
+          </span>
+          <span v-else>???</span>
+          <span v-if="selectedNodeLatestPowerMetric[`ch${channel}_current`]">
+            / {{ Number(selectedNodeLatestPowerMetric[`ch${channel}_current`]).toFixed(2) }}mA
+          </span>
+        </span>
+        <span v-else>???</span>
+      </div>
+    </li>
+</template>
diff --git a/webapp/frontend/src/components/CloseActionButton.vue b/webapp/frontend/src/components/CloseActionButton.vue
new file mode 100644
index 0000000..849255f
--- /dev/null
+++ b/webapp/frontend/src/components/CloseActionButton.vue
@@ -0,0 +1,27 @@
+<script setup>
+// Emits a click event for parent to handle
+defineEmits(['click']);
+</script>
+
+<template>
+    <button
+      @click="$emit('click')"
+      class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"
+      aria-label="Close"
+    >
+      <svg
+        class="w-6 h-6"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" />
+        <path d="M18 6L6 18" />
+        <path d="M6 6l12 12" />
+      </svg>
+    </button>
+</template>
diff --git a/webapp/frontend/src/components/HardwareModelList.vue b/webapp/frontend/src/components/HardwareModelList.vue
index 4de21e0..3ca0124 100644
--- a/webapp/frontend/src/components/HardwareModelList.vue
+++ b/webapp/frontend/src/components/HardwareModelList.vue
@@ -1,16 +1,19 @@
 <script setup>
 import axios from 'axios';
-import { state } from '../store.js';
-import { buildPath } from '../utils.js';
+import { buildPath } from '@/utils';
 import { ref, onMounted } from 'vue';
+import { useUIStore } from '@/stores/uiStore';
+const ui = useUIStore();
 const hardwareModelStats = ref([]);
-onMounted(() => {
-    axios.get(buildPath('/api/v1/stats/hardware-models')).then((response) => {
-        hardwareModelStats.value = response.data.hardware_model_stats;
-    }).catch((error) => {
-        // do nothing
-    });
-});
+async function loadHardwareStats() {
+  try {
+    const { data } = await axios.get(buildPath('/api/v1/stats/hardware-models'));
+    hardwareModelStats.value = data.hardware_model_stats;
+  } catch (error) {
+    console.warn('Failed to fetch hardware model stats:', error);
+  }
+}
+onMounted(loadHardwareStats);
 </script>
 
 <template>
@@ -24,7 +27,7 @@ onMounted(() => {
                 leave-active-class="transition-opacity duration-300 ease-linear"
                 leave-from-class="opacity-100"
                 leave-to-class="opacity-0">
-            <div v-show="state.hardwareStatsVisible" @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" class="fixed inset-0 bg-gray-900/75"></div>
+            <div v-show="ui.hardwareStatsVisible" @click="ui.toggleHardwareStats" class="fixed inset-0 bg-gray-900/75"></div>
         </transition>
 
         <!-- sidebar -->
@@ -35,7 +38,7 @@ onMounted(() => {
                 leave-active-class="transition duration-300 ease-in-out transform"
                 leave-from-class="translate-x-0"
                 leave-to-class="-translate-x-full">
-            <div v-show="state.hardwareStatsVisible" class="fixed top-0 left-0 bottom-0">
+            <div v-show="ui.hardwareStatsVisible" class="fixed top-0 left-0 bottom-0">
                 <div class="w-screen h-full max-w-md overflow-hidden">
                     <div class="flex h-full flex-col bg-white shadow-xl">
 
@@ -47,7 +50,7 @@ onMounted(() => {
                                     <h3 class="text-sm">Ordered by most popular</h3>
                                 </div>
                                 <div class="my-auto ml-3 flex h-7 items-center">
-                                    <a href="javascript:void(0)" class="rounded-full" @click="state.hardwareStatsVisible = false">
+                                    <a href="javascript:void(0)" class="rounded-full" @click="ui.hideHardwareStats">
                                         <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
                                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -62,13 +65,13 @@ onMounted(() => {
 
                         <!-- list of hardware models -->
                         <ul role="list" class="flex-1 divide-y divide-gray-200 overflow-y-auto">
-                            <li v-for="hardwareModel of hardwareModelStats">
+                            <li v-for="hardwareModel in hardwareModelStats" :key="hardwareModel.hardware_model_name">
                                 <div class="group relative flex items-center">
                                     <a href="#" class="block flex-1 px-4 py-2">
                                         <div class="absolute inset-0 group-hover:bg-gray-100" aria-hidden="true"></div>
                                         <div class="relative flex min-w-0 flex-1 items-center">
                                             <span class="relative inline-block flex-shrink-0 mr-4">
-                                                <img class="h-20 w-20 rounded-sm object-contain" :src="`/images/devices/${hardwareModel.hardware_model_name}.png`" alt="" onerror="if(this.src != '/images/no_image.png') this.src = '/images/no_image.png';">
+                                                <img class="h-20 w-20 rounded-sm object-contain" :src="`/images/devices/${hardwareModel.hardware_model_name}.png`" alt="" @error="(e) => e.target.src = '/images/no_image.png'">
                                             </span>
                                             <div class="truncate">
                                                 <p class="truncate text-sm font-medium text-gray-900">{{ hardwareModel.hardware_model_name }}</p>
diff --git a/webapp/frontend/src/components/Header.vue b/webapp/frontend/src/components/Header.vue
index 021e2dc..170dac3 100644
--- a/webapp/frontend/src/components/Header.vue
+++ b/webapp/frontend/src/components/Header.vue
@@ -1,141 +1,109 @@
 <script setup>
+import { computed } from 'vue';
+import { useUIStore } from '@/stores/uiStore';
+import { useMapStore } from '@/stores/mapStore';
+import { useSearchedNodes } from '@/composables/useSearchedNodes';
+import ActionButton from '@/components/Header/ActionButton.vue';
+import MobileCloseIcon from '@/icons/MobileCloseIcon.Vue';
+
 const emit = defineEmits(['reload', 'randomNode', 'searchClick']);
-import { ref } from 'vue';
-import { state, searchedNodes } from '../store.js';
-import { getNodeColor, getNodeTextColor } from '../utils.js';
+
+const ui = useUIStore();
+const mapData = useMapStore();
+const { searchedNodes } = useSearchedNodes();
+
+const search = computed({
+  get: () => ui.searchText,
+  set: val => ui.search(val),
+});
 </script>
 
 <template>
-    <div class="flex bg-white p-2 border-gray-300 border-b h-16">
+  <div class="flex h-16 items-center bg-white p-2 border-b border-gray-300">
 
-        <!-- close mobile search button -->
-        <div v-if="state.mobileSearchVisible" class="my-auto">
-            <a @click="state.mobileSearchVisible = false" href="javascript:void(0)" class="rounded-full">
-                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-                    </svg>
-                </div>
-            </a>
-        </div>
-
-        <!-- icon -->
-        <div v-if="!state.mobileSearchVisible" class="hidden sm:block my-auto mr-3">
-            <img class="w-10 h-10 rounded" src="/images/icon.png"/>
-        </div>
-
-        <!-- app info -->
-        <div v-if="!state.mobileSearchVisible" class="my-auto leading-tight">
-            <div class="font-bold">CT Mesh Map</div>
-            <div class="text-sm">
-                Created by <a class="link" target="_blank" href="https://liamcottle.com">Liam Cottle</a>
-            </div>
-        </div>
-
-        <!-- search bar -->
-        <div class="mx-3 flex-1 relative" :class="{ 'hidden lg:block': !state.mobileSearchVisible }">
-            <input v-model="state.searchText" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :placeholder="`Search ${state.nodes.length} nodes...`">
-            <div v-if="state.searchText !== ''" class="absolute z-search bg-white w-full border border-gray-200 rounded-lg shadow-md mt-1 overflow-y-scroll max-h-80 divide-y divide-gray-200">
-
-                <template v-if="searchedNodes.length > 0">
-                    <div @click="$emit('searchClick', node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
-                        <div>
-                            <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(node.node_id)}" :class="[ `text-[${getNodeTextColor(node.node_id)}]` ]">
-                                <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
-                            </div>
-                        </div>
-                        <div>
-                            <div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div>
-                            <div class="flex space-x-1 text-sm text-gray-700">
-                                <div>{{ node.node_id_hex }} / {{ node.node_id }}</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div v-if="searchedNodes.length === 500" class="text-gray-500 text-sm px-2 py-1">
-                        Only the first 500 results are shown.
-                    </div>
-                </template>
-
-                <template v-else>
-                    <div class="p-2">
-                        No results found...
-                    </div>
-                </template>
-
-            </div>
-        </div>
-
-        <!-- header action buttons -->
-        <div v-if="!state.mobileSearchVisible" class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2">
-            <a @click="state.infoModalVisible = !state.infoModalVisible" href="javascript:void(0)" class="tooltip rounded-full">
-                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-                    </svg>
-                </div>
-                <div class="hidden sm:block">
-                    <span class="tooltip-text">About</span>
-                </div>
-            </a>
-            <a @click="state.mobileSearchVisible = true" href="javascript:void(0)" class="tooltip rounded-full block lg:hidden">
-                <div id="search-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-                        <path d="M21 21l-6 -6"></path>
-                    </svg>
-                </div>
-                <div class="hidden sm:block">
-                    <span class="tooltip-text">Search</span>
-                </div>
-            </a>
-            <a @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" href="javascript:void(0)" class="tooltip rounded-full hidden sm:block">
-                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
-                    </svg>
-                </div>
-                <div class="hidden sm:block">
-                    <span class="tooltip-text">Devices</span>
-                </div>
-            </a>
-            <a href="#" class="tooltip rounded-full hidden lg:block" @click="$emit('randomNode')">
-                <div id="random-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                    <svg class="w-6 h-6"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                        <path d="M18 4l3 3l-3 3"></path>
-                        <path d="M18 20l3 -3l-3 -3"></path>
-                        <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
-                        <path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3"></path>
-                    </svg>
-                </div>
-                <div class="hidden sm:block">
-                    <span class="tooltip-text">Random</span>
-                </div>
-            </a>
-            <a @click="state.settingsVisible = !state.settingsVisible" href="javascript:void(0)" class="tooltip rounded-full">
-                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                    </svg>
-                </div>
-                <div class="hidden sm:block">
-                    <span class="tooltip-text">Settings</span>
-                </div>
-            </a>
-            <a href="#" class="tooltip rounded-full" @click="$emit('reload')">
-                <div id="reload-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full" :class="{'animate-spin': state.loading}">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                        <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path>
-                        <path d="M20 4v5h-5"></path>
-                    </svg>
-                </div>
-                <div class="hidden sm:block">
-                    <span class="tooltip-text">Reload</span>
-                </div>
-            </a>
+    <!-- Close button (mobile only) -->
+    <button v-if="ui.mobileSearchVisible" @click="ui.hideMobileSearch" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-full">
+      <MobileCloseIcon />
+    </button>
+
+    <!-- Logo and title (desktop only) -->
+    <div v-if="!ui.mobileSearchVisible" class="hidden sm:flex items-center mr-3 space-x-2">
+      <img class="w-10 h-10 rounded" src="/images/icon.png" />
+      <div>
+        <div class="font-bold">CT Mesh Map</div>
+        <div class="text-sm">
+          Created by <a class="link" href="https://liamcottle.com" target="_blank">Liam Cottle</a>
         </div>
+      </div>
     </div>
+
+    <!-- Search Bar -->
+    <div class="flex-1 mx-3 relative" :class="{ 'hidden lg:block': !ui.mobileSearchVisible }">
+      <input
+        v-model="search"
+        type="text"
+        class="w-full p-2.5 text-sm rounded-lg border border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+        :placeholder="`Search ${mapData.nodes.length} nodes...`"
+      />
+
+      <!-- Search results -->
+      <div
+        v-if="ui.searchText !== ''"
+        class="absolute z-search w-full mt-1 max-h-80 overflow-y-scroll bg-white border border-gray-200 rounded-lg shadow divide-y divide-gray-200"
+      >
+        <template v-if="searchedNodes.length > 0">
+          <div
+            v-for="node in searchedNodes"
+            :key="node.node_id"
+            @click="$emit('searchClick', node)"
+            class="flex p-2 space-x-2 hover:bg-gray-100 cursor-pointer"
+          >
+            <div class="flex items-center justify-center w-12 h-12 rounded-full text-white shadow" :style="{ backgroundColor: node.backgroundColor, color: node.textColor }">
+              <span class="drop-shadow-sm">{{ node.short_name }}</span>
+            </div>
+            <div>
+              <div :class="['text-gray-900', { 'text-red-500': !node.latitude || !node.longitude }]">
+                {{ node.long_name || '-' }}
+              </div>
+              <div class="text-sm text-gray-700">
+                {{ node.node_id_hex }} / {{ node.node_id }}
+              </div>
+            </div>
+          </div>
+          <div v-if="searchedNodes.length === 500" class="px-2 py-1 text-sm text-gray-500">
+            Only the first 500 results are shown.
+          </div>
+        </template>
+        <template v-else>
+          <div class="p-2">No results found...</div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div v-if="!ui.mobileSearchVisible" class="flex items-center ml-auto space-x-1 sm:space-x-2">
+      <!-- Info -->
+      <ActionButton @click="ui.toggleInfoModal" icon="info" tooltip="About" />
+
+      <!-- Search (mobile only) -->
+      <ActionButton class="block lg:hidden" @click="ui.showMobileSearch" icon="search" tooltip="Search" />
+
+      <!-- Hardware Stats -->
+      <ActionButton class="hidden sm:block" @click="ui.toggleHardwareStats" icon="device" tooltip="Devices" />
+
+      <!-- Random Node -->
+      <ActionButton class="hidden lg:block" @click="$emit('randomNode')" icon="random" tooltip="Random" />
+
+      <!-- Settings -->
+      <ActionButton @click="ui.toggleSettings" icon="settings" tooltip="Settings" />
+
+      <!-- Reload -->
+      <ActionButton
+        @click="$emit('reload')"
+        icon="reload"
+        :loading="ui.loading"
+        tooltip="Reload"
+      />
+    </div>
+  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/Header/ActionButton.vue b/webapp/frontend/src/components/Header/ActionButton.vue
new file mode 100644
index 0000000..b5b0360
--- /dev/null
+++ b/webapp/frontend/src/components/Header/ActionButton.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { defineAsyncComponent } from 'vue';
+const emit = defineEmits(['click']);
+defineProps({
+  icon: String,
+  tooltip: String,
+  loading: Boolean,
+})
+
+const getIcon = (iconName) => {
+  const icons = {
+    info: defineAsyncComponent(() => import('@/icons/InfoIcon.vue')),
+    search: defineAsyncComponent(() => import('@/icons/SearchIcon.vue')),
+    device: defineAsyncComponent(() => import('@/icons/DeviceIcon.vue')),
+    random: defineAsyncComponent(() => import('@/icons/RandomIcon.vue')),
+    settings: defineAsyncComponent(() => import('@/icons/SettingsIcon.vue')),
+    reload: defineAsyncComponent(() => import('@/icons/ReloadIcon.vue')),
+  };
+  
+  return icons[iconName] || icons.info;
+}
+</script>
+
+<template>
+  <button class="tooltip rounded-full relative" @click="$emit('click')">
+    <div
+      :class="[
+        'p-2 rounded-full bg-gray-100 hover:bg-gray-200',
+        { 'animate-spin': loading }
+      ]"
+    >
+      <component :is="getIcon(icon)" class="w-6 h-6" />
+    </div>
+    <span v-if="tooltip" class="hidden sm:block tooltip-text">{{ tooltip }}</span>
+  </button>
+</template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/InfoModal.vue b/webapp/frontend/src/components/InfoModal.vue
index bb28702..309e352 100644
--- a/webapp/frontend/src/components/InfoModal.vue
+++ b/webapp/frontend/src/components/InfoModal.vue
@@ -1,12 +1,14 @@
 <script setup>
-import { state } from '../store.js';
-import { hasSeenInfoModal } from '../config.js';
+import { hasSeenInfoModal } from '@/config';
+import { useUIStore } from '@/stores/uiStore';
+
+const ui = useUIStore();
 
 function dismissInfoModal() {
     if (hasSeenInfoModal.value === false) {
         hasSeenInfoModal.value = true;
     }
-    state.infoModalVisible = false;
+    ui.hideInfoModal();
 }
 </script>
 <template>
@@ -21,7 +23,7 @@ function dismissInfoModal() {
                 leave-active-class="transition-opacity duration-300 ease-linear"
                 leave-from-class="opacity-100"
                 leave-to-class="opacity-0">
-            <div v-show="state.infoModalVisible" @click="dismissInfoModal" class="fixed inset-0 bg-gray-900/75"></div>
+            <div v-show="ui.infoModalVisible" @click="dismissInfoModal" class="fixed inset-0 bg-gray-900/75"></div>
         </transition>
 
         <!-- modal -->
@@ -32,7 +34,7 @@ function dismissInfoModal() {
                 leave-active-class="transition duration-300 ease-in-out transform"
                 leave-from-class="translate-y-0"
                 leave-to-class="translate-y-full">
-            <div @click="dismissInfoModal" v-show="state.infoModalVisible" class="fixed left-0 right-0 top-0 bottom-0 lg:pointer-events-none">
+            <div @click="dismissInfoModal" v-show="ui.infoModalVisible" class="fixed left-0 right-0 top-0 bottom-0 lg:pointer-events-none">
                 <div class="flex w-full h-full overflow-y-auto p-4">
                     <div @click.stop class="mx-auto my-auto w-full max-w-2xl flex-col bg-white shadow-xl rounded-xl p-2 lg:pointer-events-auto">
                         <div class="relative flex">
diff --git a/webapp/frontend/src/components/NodeInfo.vue b/webapp/frontend/src/components/NodeInfo.vue
index 8cc9479..8ba60a5 100644
--- a/webapp/frontend/src/components/NodeInfo.vue
+++ b/webapp/frontend/src/components/NodeInfo.vue
@@ -4,20 +4,24 @@ import moment from 'moment';
 import { Chart } from 'chart.js';
 import 'chartjs-adapter-moment';
 import { onMounted, useTemplateRef, ref, watch } from 'vue';
-import { state } from '../store.js';
-import { environmentMetricsTimeRange, powerMetricsTimeRange, deviceMetricsTimeRange } from '../config.js';
-import DeviceMetricsChart from './NodeInfo/DeviceMetricsChart.vue';
-import PowerMetricsChart from './NodeInfo/PowerMetricsChart.vue';
-import EnvironmentMetricsChart from './NodeInfo/EnvironmentMetricsChart.vue';
-import LoraConfig from './NodeInfo/LoraConfig.vue';
-import NodeDetails from './NodeInfo/NodeDetails.vue';
-import MqttHistory from './NodeInfo/MqttHistory.vue';
-import OtherInfo from './NodeInfo/OtherInfo.vue';
-import Share from './NodeInfo/Share.vue';
-import Traceroutes from './NodeInfo/Traceroutes.vue';
-import Position from './NodeInfo/Position.vue';
-import { getNodeColor, getNodeTextColor, copyShareLinkForNode, getTimeSpan, buildPath } from '../utils.js';
+import { state } from '@/store';
+import DeviceMetricsChart from '@/components/NodeInfo/DeviceMetricsChart.vue';
+import PowerMetricsChart from '@/components/NodeInfo/PowerMetricsChart.vue';
+import EnvironmentMetricsChart from '@/components/NodeInfo/EnvironmentMetricsChart.vue';
+import LoraConfig from '@/components/NodeInfo/LoraConfig.vue';
+import NodeDetails from '@/components/NodeInfo/NodeDetails.vue';
+import MqttHistory from '@/components/NodeInfo/MqttHistory.vue';
+import OtherInfo from '@/components/NodeInfo/OtherInfo.vue';
+import Share from '@/components/NodeInfo/Share.vue';
+import Traceroutes from '@/components/NodeInfo/Traceroutes.vue';
+import Position from '@/components/NodeInfo/Position.vue';
+import { useMapStore } from '@/stores/mapStore';
+import { copyShareLinkForNode, getTimeSpan, buildPath } from '@/utils';
+import { useConfigStore } from '@/stores/configStore';
+
+const configStore = useConfigStore();
 const emit = defineEmits(['showPositionHistory']);
+const mapData = useMapStore();
 
 function showPositionHistory(id) {
     emit('showPositionHistory', id);
@@ -28,11 +32,6 @@ function showTraceRoute(traceroute) {
     state.selectedTraceRoute = traceroute;
 }
 
-// find node marker by id
-function findNodeMarkerById(id) {
-    return state.nodeMarkers[id] ?? null;
-}
-
 function loadNode(nodeId) {
     loadNodeMqttMetrics(nodeId);
     loadNodeTraceroutes(nodeId);
@@ -64,7 +63,7 @@ function loadNodeTraceroutes(nodeId) {
 }
 
 function loadNodeDeviceMetrics(nodeId) {
-    const time = getTimeSpan(deviceMetricsTimeRange.value).amount
+    const time = getTimeSpan(configStore.deviceMetricsTimeRange).amount
     const timeFrom = new Date().getTime() - (time * 1000);
     axios.get(buildPath(`/api/v1/nodes/${nodeId}/device-metrics`), {
         params: {
@@ -79,7 +78,7 @@ function loadNodeDeviceMetrics(nodeId) {
 }
 
 function loadNodeEnvironmentMetrics(nodeId) {
-    const time = getTimeSpan(environmentMetricsTimeRange.value).amount
+    const time = getTimeSpan(configStore.environmentMetricsTimeRange).amount
     const timeFrom = new Date().getTime() - (time * 1000);
     axios.get(buildPath(`/api/v1/nodes/${nodeId}/environment-metrics`), {
         params: {
@@ -94,7 +93,7 @@ function loadNodeEnvironmentMetrics(nodeId) {
 }
 
 function loadNodePowerMetrics(nodeId) {
-    const time = getTimeSpan(powerMetricsTimeRange.value).amount
+    const time = getTimeSpan(configStore.powerMetricsTimeRange).amount
     const timeFrom = new Date().getTime() - (time * 1000);
     axios.get(buildPath(`/api/v1/nodes/${nodeId}/power-metrics`), {
         params: {
@@ -118,25 +117,28 @@ watch(
 )
 
 watch(
-    () => deviceMetricsTimeRange.value,
+    () => configStore.deviceMetricsTimeRange,
     (newValue) => {
         loadNodeDeviceMetrics(state.selectedNode.node_id)
     }
 )
 
 watch(
-    () => powerMetricsTimeRange.value,
+    () => configStore.powerMetricsTimeRange,
     (newValue) => {
         loadNodePowerMetrics(state.selectedNode.node_id)
     }
 )
 
 watch(
-    () => environmentMetricsTimeRange.value,
-    (newValue) => {
-        loadNodeEnvironmentMetrics(state.selectedNode.node_id)
+  () => configStore.environmentMetricsTimeRange,
+  (newValue) => {
+    if (state.selectedNode?.node_id) {
+      loadNodeEnvironmentMetrics(state.selectedNode.node_id);
     }
-)
+  }
+);
+
 </script>
 <template>
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
@@ -168,7 +170,7 @@ watch(
                         <div class="p-2 border-b border-gray-200 shadow-sm">
                             <div class="flex">
                                 <div class="my-auto mr-2">
-                                    <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedNode.node_id)}" :class="[ `text-[${getNodeTextColor(state.selectedNode.node_id)}]` ]">
+                                    <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: state.selectedNode.backgroundColor, color: state.selectedNode.textColor}">
                                         <div class="mx-auto my-auto drop-shadow-sm">{{ state.selectedNode.short_name }}</div>
                                     </div>
                                 </div>
@@ -200,7 +202,7 @@ watch(
                         <div class="overflow-y-auto">
 
                             <!-- no position banner -->
-                            <div v-if="findNodeMarkerById(state.selectedNode.node_id) == null" class="flex bg-orange-500 text-white p-2">
+                            <div v-if="mapData.findNodeMarkerById(state.selectedNode.node_id) == null" class="flex bg-orange-500 text-white p-2">
                                 <div class="my-auto mr-2">
                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                                         <path fill-rule="evenodd" d="m11.54 22.351.07.04.028.016a.76.76 0 0 0 .723 0l.028-.015.071-.041a16.975 16.975 0 0 0 1.144-.742 19.58 19.58 0 0 0 2.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 0 0-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 0 0 2.682 2.282 16.975 16.975 0 0 0 1.145.742ZM12 13.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
diff --git a/webapp/frontend/src/components/NodeInfo/DeviceMetricsChart.vue b/webapp/frontend/src/components/NodeInfo/DeviceMetricsChart.vue
index b9fd8cf..711409c 100644
--- a/webapp/frontend/src/components/NodeInfo/DeviceMetricsChart.vue
+++ b/webapp/frontend/src/components/NodeInfo/DeviceMetricsChart.vue
@@ -1,207 +1,137 @@
 <script setup>
 const props = defineProps(['node']);
-import axios from 'axios';
-import moment from 'moment';
-import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
-import 'chartjs-adapter-moment';
-import { onMounted, useTemplateRef, watch } from 'vue';
-import { state } from '../../store.js';
-import { deviceMetricsTimeRange } from '../../config.js';
-import { formatUptimeSeconds, getTimeSpans } from '../../utils.js';
-import { useStorage } from '@vueuse/core';
-const deviceMetricsChartEl = useTemplateRef('device-metrics-chart');
 
-function initChart() {
-    // destroy existing chart
-    const existingChart = Chart.getChart(deviceMetricsChartEl.value);
-    if (existingChart != null) {
-        existingChart.destroy();
-    }
-    // create chart data
-    const labels = [];
-    const batteryMetrics = [];
-    const channelUtilizationMetrics = [];
-    const airUtilTxMetrics = [];
-    for(const deviceMetric of state.selectedNodeDeviceMetrics) {
-        labels.push(moment(deviceMetric.created_at));
-        batteryMetrics.push(deviceMetric.battery_level);
-        channelUtilizationMetrics.push(deviceMetric.channel_utilization);
-        airUtilTxMetrics.push(deviceMetric.air_util_tx);
-    }
-    // create chart
-    new Chart(deviceMetricsChartEl.value, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: [
-                {
-                    label: 'Battery Level',
-                    borderColor: '#3b82f6',
-                    backgroundColor: '#3b82f6',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: batteryMetrics,
-                },
-                {
-                    label: 'Channel Util',
-                    borderColor: '#22c55e',
-                    backgroundColor: '#22c55e',
-                    showLine: false, // no lines between points
-                    fill: false,
-                    data: channelUtilizationMetrics,
-                },
-                {
-                    label: 'Air Util TX',
-                    borderColor: '#f97316',
-                    backgroundColor: '#f97316',
-                    showLine: false, // no lines between points
-                    fill: false,
-                    data: airUtilTxMetrics,
-                },
-            ],
+import { computed } from 'vue';
+import { state } from '@/store.js';
+import MetricsChart from '@/components/Chart/Metrics.vue';
+
+const chartData = computed(() => {
+  const metrics = state.selectedNodeDeviceMetrics;
+
+  return {
+    labels: metrics.map(m => m.created_at),
+    datasets: [
+      {
+        label: 'Battery Level',
+        data: metrics.map(m => m.battery_level),
+        borderColor: '#3b82f6',
+        backgroundColor: '#3b82f6',
+        pointStyle: false,
+        fill: false,
+      },
+      {
+        label: 'Channel Util',
+        data: metrics.map(m => m.channel_utilization),
+        borderColor: '#22c55e',
+        backgroundColor: '#22c55e',
+        showLine: false,
+        fill: false,
+      },
+      {
+        label: 'Air Util TX',
+        data: metrics.map(m => m.air_util_tx),
+        borderColor: '#f97316',
+        backgroundColor: '#f97316',
+        showLine: false,
+        fill: false,
+      },
+    ],
+  };
+});
+
+const legendData = {
+  'Battery Level': 'bg-blue-500',
+  'Channel Util': 'bg-green-500',
+  'Air Util TX': 'bg-orange-500',
+};
+
+const chartConfig = {
+  legendDisplay: false, // or true if you want Chart.js legend too
+  tooltipOptions: {
+    mode: 'index',
+    intersect: false,
+    callbacks: {
+      label: (item) => `${item.dataset.label}: ${item.formattedValue}%`,
+    },
+  },
+  scales: {
+    x: {
+      position: 'top',
+      type: 'time',
+      time: {
+        unit: 'day',
+        displayFormats: {
+          day: 'MMM DD',
         },
-        options: {
-            responsive: true,
-            borderWidth: 2,
-            elements: {
-                point: {
-                    radius: 2,
-                },
-            },
-            scales: {
-                x: {
-                    position: 'top',
-                    type: 'time',
-                    time: {
-                        unit: 'day',
-                        displayFormats: {
-                            day: 'MMM DD', // Jan 01
-                        },
-                    },
-                },
-                y: {
-                    min: 0,
-                    max: 101, // 101 is "Plugged In", need to include for tooltip to work
-                    ticks: {
-                        callback: (label) => `${label}%`,
-                    },
-                },
-            },
-            plugins: {
-                legend: {
-                    display: false,
-                },
-                tooltip: {
-                    mode: "index",
-                    intersect: false,
-                    callbacks: {
-                        label: (item) => {
-                            return `${item.dataset.label}: ${item.formattedValue}%`;
-                        },
-                    },
-                },
-            },
-        },
-    });
-}
-watch(
-  () => state.selectedNodeDeviceMetrics,
-  (newValue) => {
-    if (newValue !== []) {
-        initChart()
-    }
-  }, {deep: true}
-)
-onMounted(() => {
-    Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
-})
+      },
+    },
+    y: {
+      min: 0,
+      max: 101,
+      ticks: {
+        callback: (label) => `${label}%`,
+      },
+    },
+  },
+};
+
 </script>
 
 <template>
-    <!-- device metrics -->
-    <div>
-        <div class="flex bg-gray-200 p-2 font-semibold">
-            <div class="my-auto">Device Metrics</div>
-            <div class="my-auto ml-auto">
-                <select v-model="deviceMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-                    <option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
-                </select>
+    <MetricsChart
+        title="Device Metrics"
+        :data="chartData"
+        chartType="line"
+        timeRangeKey="deviceMetricsTimeRange"
+        :legendData="legendData"
+        :chartConfig="chartConfig"
+    >
+        <!-- Battery Level -->
+        <li class="flex p-3">
+            <div class="text-sm font-medium text-gray-900">Battery Level</div>
+            <div class="ml-auto text-sm text-gray-700">
+                <span v-if="props.node.battery_level">
+                    <span v-if="props.node.battery_level > 100">Plugged In</span>
+                    <span v-else>{{ props.node.battery_level }}%</span>
+                </span>
+                <span v-else>???</span>
             </div>
-        </div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
+        </li>
 
-            <!-- device metrics chart -->
-            <li>
-                <div class="px-4 py-2">
-                    <div class="w-full">
-                        <canvas id="deviceMetricsChart" style="height:150px;" ref="device-metrics-chart"></canvas>
-                        <div class="flex">
-                            <div class="mx-auto flex space-x-2">
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Battery Level</div>
-                                </div>
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel Utilization</div>
-                                </div>
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Air Util TX</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
+        <!-- Voltage -->
+        <li class="flex p-3">
+            <div class="text-sm font-medium text-gray-900">Voltage</div>
+            <div class="ml-auto text-sm text-gray-700">
+                <span v-if="props.node.voltage">{{ Number(props.node.voltage).toFixed(2) }}V</span>
+                <span v-else>???</span>
+            </div>
+        </li>
 
-            <!-- battery level -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Battery Level</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.battery_level">
-                        <span v-if="props.node.battery_level > 100">Plugged In</span>
-                        <span v-else>{{ props.node.battery_level }}%</span>
-                    </span>
-                    <span v-else>???</span>
-                </div>
-            </li>
+        <!-- Channel Utilization -->
+        <li class="flex p-3">
+            <div class="text-sm font-medium text-gray-900">Channel Utilization</div>
+            <div class="ml-auto text-sm text-gray-700">
+                <span v-if="props.node.channel_utilization">{{ Number(props.node.channel_utilization).toFixed(2) }}%</span>
+                <span v-else>???</span>
+            </div>
+        </li>
 
-            <!-- voltage -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Voltage</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.voltage">{{ Number(props.node.voltage).toFixed(2) }}V</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
+        <!-- Air Util TX -->
+        <li class="flex p-3">
+            <div class="text-sm font-medium text-gray-900">Air Util Tx</div>
+            <div class="ml-auto text-sm text-gray-700">
+                <span v-if="props.node.air_util_tx">{{ Number(props.node.air_util_tx).toFixed(2) }}%</span>
+                <span v-else>???</span>
+            </div>
+        </li>
 
-            <!-- channel utilization -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Channel Utilization</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.channel_utilization">{{ Number(props.node.channel_utilization).toFixed(2) }}%</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- air util tx -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Air Util Tx</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.air_util_tx">{{ Number(props.node.air_util_tx).toFixed(2) }}%</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- air util tx -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Uptime</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.uptime_seconds">{{ formatUptimeSeconds(props.node.uptime_seconds) }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-        </ul>
-    </div>
+        <!-- Uptime -->
+        <li class="flex p-3">
+            <div class="text-sm font-medium text-gray-900">Uptime</div>
+            <div class="ml-auto text-sm text-gray-700">
+                <span v-if="props.node.uptime_seconds">{{ formatUptimeSeconds(props.node.uptime_seconds) }}</span>
+                <span v-else>???</span>
+            </div>
+        </li>
+    </MetricsChart>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/EnvironmentMetricsChart.vue b/webapp/frontend/src/components/NodeInfo/EnvironmentMetricsChart.vue
index 4373708..8b82284 100644
--- a/webapp/frontend/src/components/NodeInfo/EnvironmentMetricsChart.vue
+++ b/webapp/frontend/src/components/NodeInfo/EnvironmentMetricsChart.vue
@@ -1,202 +1,140 @@
 <script setup>
 const props = defineProps(['node']);
-import axios from 'axios';
-import moment from 'moment';
-import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
-import 'chartjs-adapter-moment';
-import { onMounted, useTemplateRef, watch } from 'vue';
-import { state } from '../../store.js';
-import { environmentMetricsTimeRange } from '../../config.js';
-import { formatTemperature, getTimeSpans } from '../../utils.js';
-const environmentMetricsChartEl = useTemplateRef('environment-metrics-chart');
 
-function initChart() {
-    // destroy existing chart
-    const existingChart = Chart.getChart(environmentMetricsChartEl.value);
-    if (existingChart != null) {
-        existingChart.destroy();
-    }
-    // create chart data
-    const labels = [];
-    const temperatureMetrics = [];
-    const relativeHumidityMetrics = [];
-    const barometricPressureMetrics = [];
-    for(const deviceMetric of state.selectedNodeEnvironmentMetrics){
-        labels.push(moment(deviceMetric.created_at));
-        temperatureMetrics.push(deviceMetric.temperature);
-        relativeHumidityMetrics.push(deviceMetric.relative_humidity);
-        barometricPressureMetrics.push(deviceMetric.barometric_pressure);
-    }
-    // create chart
-    new Chart(environmentMetricsChartEl.value, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: [
-                {
-                    label: 'Temperature',
-                    suffix: 'ºC',
-                    borderColor: '#3b82f6',
-                    backgroundColor: '#3b82f6',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: temperatureMetrics,
-                    yAxisID: 'y',
-                },
-                {
-                    label: 'Humidity',
-                    suffix: '%',
-                    borderColor: '#22c55e',
-                    backgroundColor: '#22c55e',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: relativeHumidityMetrics,
-                    yAxisID: 'y',
-                },
-                {
-                    label: 'Pressure',
-                    suffix: 'hPa',
-                    borderColor: '#f97316',
-                    backgroundColor: '#f97316',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: barometricPressureMetrics,
-                    yAxisID: 'y1',
-                },
-            ],
+import { ref, computed, onMounted, watch } from 'vue';
+import { useConfigStore } from '@/stores/configStore';
+import { state } from '@/store.js';
+import { formatTemperature } from '@/utils.js';
+import MetricsChart from '@/components/Chart/Metrics.vue';
+
+const configStore = useConfigStore();
+
+// Chart data prep
+const labels = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.created_at));
+const temperatureMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.temperature));
+const relativeHumidityMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.relative_humidity));
+const barometricPressureMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.barometric_pressure));
+
+const chartData = computed(() => ({
+  labels: labels.value,
+  datasets: [
+    {
+      label: 'Temperature',
+      suffix: 'ºC',
+      borderColor: '#3b82f6',
+      backgroundColor: '#3b82f6',
+      pointStyle: false,
+      fill: false,
+      data: temperatureMetrics.value,
+      yAxisID: 'y',
+    },
+    {
+      label: 'Humidity',
+      suffix: '%',
+      borderColor: '#22c55e',
+      backgroundColor: '#22c55e',
+      pointStyle: false,
+      fill: false,
+      data: relativeHumidityMetrics.value,
+      yAxisID: 'y',
+    },
+    {
+      label: 'Pressure',
+      suffix: 'hPa',
+      borderColor: '#f97316',
+      backgroundColor: '#f97316',
+      pointStyle: false,
+      fill: false,
+      data: barometricPressureMetrics.value,
+      yAxisID: 'y1',
+    },
+  ],
+}));
+
+const chartConfig = {
+  legendDisplay: false,
+  scales: {
+    x: {
+      position: 'top',
+      type: 'time',
+      time: {
+        unit: 'day',
+        displayFormats: {
+          day: 'MMM DD',
         },
-        options: {
-            responsive: true,
-            borderWidth: 2,
-            spanGaps: 1000 * 60 * 60 * 3, // only show lines between metrics with a 3 hour or less gap
-            elements: {
-                point: {
-                    radius: 2,
-                },
-            },
-            scales: {
-                x: {
-                    position: 'top',
-                    type: 'time',
-                    time: {
-                        unit: 'day',
-                        displayFormats: {
-                            day: 'MMM DD', // Jan 01
-                        },
-                    },
-                },
-                y: {
-                    min: -20,
-                    max: 100,
-                },
-                y1: {
-                    min: 800,
-                    max: 1100,
-                    ticks: {
-                        stepSize: 10,
-                        callback: (label) => `${label} hPa`,
-                    },
-                    position: 'right',
-                    grid: {
-                        drawOnChartArea: false, // only want the grid lines for one axis to show up
-                    },
-                },
-            },
-            plugins: {
-                legend: {
-                    display: false,
-                },
-                tooltip: {
-                    mode: "index",
-                    intersect: false,
-                    callbacks: {
-                        label: (item) => {
-                            return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
-                        },
-                    },
-                },
-            },
-        }
-    });
-}
+      },
+    },
+    y: {
+      min: -20,
+      max: 100,
+    },
+    y1: {
+      min: 800,
+      max: 1100,
+      ticks: {
+        stepSize: 10,
+        callback: (label) => `${label} hPa`,
+      },
+      position: 'right',
+      grid: {
+        drawOnChartArea: false,
+      },
+    },
+  },
+  tooltipOptions: {
+    mode: 'index',
+    intersect: false,
+    callbacks: {
+      label: (item) => {
+        return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
+      },
+    },
+  },
+};
 
-watch(
-  () => state.selectedNodeEnvironmentMetrics,
-  (newValue) => {
-    if (newValue !== []) {
-        initChart()
-    }
-  }, {deep: true}
-)
-
-onMounted(() => {
-    Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
-})
+const legendData = {
+  Temperature: 'bg-blue-500',
+  Humidity: 'bg-green-500',
+  Pressure: 'bg-orange-500',
+};
 </script>
 
 <template>
-    <div>
-        <div class="flex bg-gray-200 p-2 font-semibold">
-            <div class="my-auto">Environment Metrics</div>
-            <div class="my-auto ml-auto">
-                <select v-model="environmentMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-                    <option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
-                </select>
-            </div>
+    <MetricsChart
+      title="Environment Metrics"
+      :data="chartData"
+      chartType="line"
+      timeRangeKey="environmentMetricsTimeRange"
+      :legendData="legendData"
+      :chartConfig="chartConfig"
+    >
+      <!-- Chart Details (below the chart) -->
+      <li class="flex p-3">
+        <div class="text-sm font-medium text-gray-900">Temperature</div>
+        <div class="ml-auto text-sm text-gray-700">
+          <span v-if="state.selectedNode?.temperature">{{ formatTemperature(state.selectedNode.temperature) }}</span>
+          <span v-else>???</span>
         </div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
-
-            <!-- environment metrics chart -->
-            <li>
-                <div class="px-4 py-2">
-                    <div class="w-full">
-                        <canvas id="environmentMetricsChart" style="height:150px;" ref="environment-metrics-chart"></canvas>
-                        <div class="flex">
-                            <div class="mx-auto flex space-x-2">
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Temperature</div>
-                                </div>
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Humidity</div>
-                                </div>
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Pressure</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-            <!-- temperature -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Temperature</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.temperature">{{ formatTemperature(props.node.temperature) }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- relative humidity -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Relative Humidity</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.relative_humidity">{{ Number(props.node.relative_humidity).toFixed(0) }}%</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- barometric pressure -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Barometric Pressure</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.barometric_pressure">{{ Number(props.node.barometric_pressure).toFixed(1) }}hPa</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>
\ No newline at end of file
+      </li>
+  
+      <li class="flex p-3">
+        <div class="text-sm font-medium text-gray-900">Relative Humidity</div>
+        <div class="ml-auto text-sm text-gray-700">
+          <span v-if="state.selectedNode?.relative_humidity">
+            {{ Number(state.selectedNode.relative_humidity).toFixed(0) }}%
+          </span>
+          <span v-else>???</span>
+        </div>
+      </li>
+  
+      <li class="flex p-3">
+        <div class="text-sm font-medium text-gray-900">Barometric Pressure</div>
+        <div class="ml-auto text-sm text-gray-700">
+          <span v-if="state.selectedNode?.barometric_pressure">
+            {{ Number(state.selectedNode.barometric_pressure).toFixed(1) }} hPa
+          </span>
+          <span v-else>???</span>
+        </div>
+      </li>
+    </MetricsChart>
+  </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/LoraConfig.vue b/webapp/frontend/src/components/NodeInfo/LoraConfig.vue
index 94bf81d..56c70a4 100644
--- a/webapp/frontend/src/components/NodeInfo/LoraConfig.vue
+++ b/webapp/frontend/src/components/NodeInfo/LoraConfig.vue
@@ -1,40 +1,40 @@
 <script setup>
-import { getRegionFrequencyRange } from '../../utils.js';
-const props = defineProps(['node']);
+import { getRegionFrequencyRange } from '@/utils.js';
+const props = defineProps({
+  node: Object,
+});
+
+// Define a structure for the LoRa config fields
+const loraConfigFields = [
+  {
+    label: 'Region',
+    key: 'region_name',
+    value: (node) => node.region_name ? `${node.region_name} (${getRegionFrequencyRange(node.region_name)})` : '???',
+  },
+  {
+    label: 'Modem Preset',
+    key: 'modem_preset_name',
+    value: (node) => node.modem_preset_name || '???',
+  },
+  {
+    label: 'Has Default Channel',
+    key: 'has_default_channel',
+    value: (node) => node.has_default_channel != null ? (node.has_default_channel ? 'Yes' : 'No') : '???',
+  },
+];
 </script>
 
 <template>
-    <!-- lora config -->
-    <div>
-        <div class="bg-gray-200 p-2 font-semibold">LoRa Config</div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
-
-            <!-- region -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Region</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.region_name">{{ props.node.region_name }} ({{ getRegionFrequencyRange(props.node.region_name) }})</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- modem preset -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Modem Preset</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.modem_preset_name">{{ props.node.modem_preset_name }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- has default channel -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Has Default Channel</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.has_default_channel != null">{{ props.node.has_default_channel ? "Yes" : "No" }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-        </ul>
-    </div>
+  <div>
+    <div class="bg-gray-200 p-2 font-semibold">LoRa Config</div>
+    <ul role="list" class="flex-1 divide-y divide-gray-200">
+      <!-- Iterate through loraConfigFields to display each item -->
+      <li v-for="(field, index) in loraConfigFields" :key="index" class="flex p-3">
+        <div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
+        <div class="ml-auto text-sm text-gray-700">
+          {{ field.value(props.node) }}
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/MqttHistory.vue b/webapp/frontend/src/components/NodeInfo/MqttHistory.vue
index e0e2824..407e045 100644
--- a/webapp/frontend/src/components/NodeInfo/MqttHistory.vue
+++ b/webapp/frontend/src/components/NodeInfo/MqttHistory.vue
@@ -1,6 +1,9 @@
 <script setup>
-import { state } from '../../store.js';
+import { state } from '@/store.js';
 import moment from 'moment';
+import { computed } from 'vue';
+
+const mqttMetrics = computed(() => state.selectedNodeMqttMetrics);
 </script>
 <template>
     <div>
@@ -8,34 +11,27 @@ import moment from 'moment';
             <div class="font-semibold">MQTT</div>
             <div class="text-sm text-gray-600">Topics this node sent packets to</div>
         </div>
+
+        <!-- List of MQTT Topics or No Data -->
         <ul role="list" class="flex-1 divide-y divide-gray-200">
-            <template v-if="state.selectedNodeMqttMetrics.length > 0">
-                <li v-for="mqttMetric of state.selectedNodeMqttMetrics">
-                    <div class="relative flex items-center">
-                        <div class="block flex-1 px-4 py-2">
-                            <div class="relative flex min-w-0 flex-1 items-center">
-                                <div class="truncate">
-                                    <p class="truncate text-sm font-medium text-gray-900">{{ mqttMetric.mqtt_topic }}</p>
-                                    <div class="text-sm text-gray-700">Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}</div>
-                                </div>
+            <li v-if="mqttMetrics.length === 0">
+                <div class="block flex-1 px-4 py-2">
+                    <div class="text-sm text-gray-700">No packets seen on MQTT</div>
+                </div>
+            </li>
+
+            <li v-else v-for="(mqttMetric, index) in mqttMetrics" :key="`${mqttMetric.mqtt_topic}-${index}`">
+                <div class="relative flex items-center">
+                    <div class="block flex-1 px-4 py-2">
+                        <div class="truncate">
+                            <p class="truncate text-sm font-medium text-gray-900">{{ mqttMetric.mqtt_topic }}</p>
+                            <div class="text-sm text-gray-700">
+                                Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}
                             </div>
                         </div>
                     </div>
-                </li>
-            </template>
-            <template v-else>
-                <li>
-                    <div class="relative flex items-center">
-                        <div class="block flex-1 px-4 py-2">
-                            <div class="relative flex min-w-0 flex-1 items-center">
-                                <div class="truncate">
-                                    <div class="text-sm text-gray-700">No packets seen on MQTT</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </li>
-            </template>
+                </div>
+            </li>
         </ul>
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/NodeDetails.vue b/webapp/frontend/src/components/NodeInfo/NodeDetails.vue
index f16ca18..88c1d96 100644
--- a/webapp/frontend/src/components/NodeInfo/NodeDetails.vue
+++ b/webapp/frontend/src/components/NodeInfo/NodeDetails.vue
@@ -1,45 +1,32 @@
-
 <script setup>
-const props = defineProps(['node']);
+const props = defineProps({
+  node: Object,
+});
+const details = [
+  { label: 'ID', value: 'node_id' },
+  { label: 'Hex ID', value: 'node_id_hex' },
+  { label: 'Role', value: 'role_name' },
+  { label: 'Hardware', value: 'hardware_model_name' },
+  { label: 'Firmware', value: 'firmware_version' },
+];
 </script>
+
 <template>
-    <div>
-        <div class="bg-gray-200 p-2 font-semibold">Details</div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
-
-            <!-- id -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">ID</div>
-                <div class="ml-auto text-sm text-gray-700">{{ props.node.node_id }}</div>
-            </li>
-
-            <!-- hex id -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Hex ID</div>
-                <div class="ml-auto text-sm text-gray-700">{{ props.node.node_id_hex }}</div>
-            </li>
-
-            <!-- role -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Role</div>
-                <div class="ml-auto text-sm text-gray-700">{{ props.node.role_name }}</div>
-            </li>
-
-            <!-- hardware -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Hardware</div>
-                <div class="ml-auto text-sm text-gray-700">{{ props.node.hardware_model_name }}</div>
-            </li>
-
-            <!-- firmware version -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Firmware</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.firmware_version">{{ props.node.firmware_version }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-        </ul>
-    </div>
+  <div>
+    <div class="bg-gray-200 p-2 font-semibold">Details</div>
+    <ul role="list" class="flex-1 divide-y divide-gray-200">
+      <!-- Iterate through the details array to display each item -->
+      <li v-for="(detail, index) in details" :key="index" class="flex p-3">
+        <div class="text-sm font-medium text-gray-900">{{ detail.label }}</div>
+        <div class="ml-auto text-sm text-gray-700">
+          <!-- Check for firmware version as special case -->
+          <span v-if="detail.value === 'firmware_version'">
+            {{ props.node[detail.value] || '???' }}
+          </span>
+          <!-- For other fields, use the node property directly -->
+          <span v-else>{{ props.node[detail.value] }}</span>
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/OtherInfo.vue b/webapp/frontend/src/components/NodeInfo/OtherInfo.vue
index 534f1c1..a32ce87 100644
--- a/webapp/frontend/src/components/NodeInfo/OtherInfo.vue
+++ b/webapp/frontend/src/components/NodeInfo/OtherInfo.vue
@@ -1,40 +1,45 @@
 <script setup>
-const props = defineProps(['node']);
 import moment from 'moment';
+const props = defineProps({
+  node: Object,
+});
+
+// Define structure for 'Other' fields
+const otherFields = [
+  {
+    label: 'First Seen',
+    key: 'created_at',
+    value: (node) => moment(new Date(node.created_at)).fromNow(),
+  },
+  {
+    label: 'Last Seen',
+    key: 'updated_at',
+    value: (node) => moment(new Date(node.updated_at)).fromNow(),
+  },
+  {
+    label: 'Neighbours Updated',
+    key: 'neighbours_updated_at',
+    value: (node) => node.neighbours_updated_at ? moment(new Date(node.neighbours_updated_at)).fromNow() : '???',
+  },
+  {
+    label: 'Position Updated',
+    key: 'position_updated_at',
+    value: (node) => node.position_updated_at ? moment(new Date(node.position_updated_at)).fromNow() : '???',
+  },
+];
 </script>
+
 <template>
-    <div>
-        <div class="bg-gray-200 p-2 font-semibold">Other</div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
-            <!-- first seen -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">First Seen</div>
-                <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.created_at)).fromNow() }}</div>
-            </li>
-
-            <!-- last seen -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Last Seen</div>
-                <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.updated_at)).fromNow() }}</div>
-            </li>
-
-            <!-- neighbours updated -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Neighbours Updated</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.neighbours_updated_at">{{ moment(new Date(props.node.neighbours_updated_at)).fromNow() }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- position updated -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Position Updated</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.position_updated_at">{{ moment(new Date(props.node.position_updated_at)).fromNow() }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-        </ul>
-    </div>
+  <div>
+    <div class="bg-gray-200 p-2 font-semibold">Other</div>
+    <ul role="list" class="flex-1 divide-y divide-gray-200">
+      <!-- Iterate through otherFields to display each item -->
+      <li v-for="(field, index) in otherFields" :key="index" class="flex p-3">
+        <div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
+        <div class="ml-auto text-sm text-gray-700">
+          {{ field.value(props.node) }}
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/Position.vue b/webapp/frontend/src/components/NodeInfo/Position.vue
index ae457a8..42ab42a 100644
--- a/webapp/frontend/src/components/NodeInfo/Position.vue
+++ b/webapp/frontend/src/components/NodeInfo/Position.vue
@@ -1,34 +1,43 @@
 <script setup>
-const props = defineProps(['node']);
+const props = defineProps({
+  node: Object,
+});
 const emit = defineEmits(['showPositionHistory']);
+
+const positionFields = [
+  {
+    label: 'Lat/Long',
+    key: ['latitude', 'longitude'],
+    value: (node) => node.latitude && node.longitude ? `${node.latitude}, ${node.longitude}` : '???',
+  },
+  {
+    label: 'Altitude',
+    key: 'altitude',
+    value: (node) => node.altitude ? `${node.altitude}m` : '???',
+  },
+];
 </script>
+
 <template>
-    <div>
-        <div @click.stop class="flex bg-gray-200 p-2 font-semibold">
-            <div class="my-auto">Position</div>
-            <div class="ml-auto">
-                <button @click="$emit('showPositionHistory', props.node.node_id)" type="button" class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
-                    Show History
-                </button>
-            </div>
-        </div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
-            <!-- position -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Lat/Long</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.latitude && props.node.longitude">{{ props.node.latitude }}, {{ props.node.longitude }}</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-            <!-- altitude -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Altitude</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="props.node.altitude">{{ props.node.altitude }}m</span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-        </ul>
+  <div>
+    <div @click.stop class="flex bg-gray-200 p-2 font-semibold">
+      <div class="my-auto">Position</div>
+      <div class="ml-auto">
+        <button
+          @click="$emit('showPositionHistory', props.node.node_id)"
+          type="button"
+          class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        >
+          Show History
+        </button>
+      </div>
     </div>
+
+    <ul role="list" class="flex-1 divide-y divide-gray-200">
+      <li v-for="(field, index) in positionFields" :key="index" class="flex p-3">
+        <div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
+        <div class="ml-auto text-sm text-gray-700">{{ field.value(props.node) }}</div>
+      </li>
+    </ul>
+  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/PowerMetricsChart.vue b/webapp/frontend/src/components/NodeInfo/PowerMetricsChart.vue
index c55fcb4..0f68c89 100644
--- a/webapp/frontend/src/components/NodeInfo/PowerMetricsChart.vue
+++ b/webapp/frontend/src/components/NodeInfo/PowerMetricsChart.vue
@@ -1,251 +1,114 @@
 <script setup>
-import axios from 'axios';
-import moment from 'moment';
-import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
-import 'chartjs-adapter-moment';
-import { onMounted, useTemplateRef, watch } from 'vue';
-import { state, selectedNodeLatestPowerMetric } from '../../store.js';
-import { powerMetricsTimeRange } from '../../config.js';
-import { getTimeSpans } from '../../utils.js';
-const powerMetricsChartEl = useTemplateRef('power-metrics-chart');
+import { computed } from 'vue';
+import { state, selectedNodeLatestPowerMetric } from '@/store.js';
+import MetricsChart from '@/components/Chart/Metrics.vue';
+import ChannelData from '@/components/Chart/PowerMetrics/ChannelData.vue';
 
-function initChart() {
-    // destroy existing chart
-    const existingChart = Chart.getChart(powerMetricsChartEl.value);
-    if (existingChart != null) {
-        existingChart.destroy();
-    }
-    // create chart data
-    const labels = [];
-    const channel1VoltageReadings = [];
-    const channel2VoltageReadings = [];
-    const channel3VoltageReadings = [];
-    const channel1CurrentReadings = [];
-    const channel2CurrentReadings = [];
-    const channel3CurrentReadings = [];
-    for(const powerMetric of state.selectedNodePowerMetrics) {
-        labels.push(moment(powerMetric.created_at));
-        channel1VoltageReadings.push(powerMetric.ch1_voltage);
-        channel2VoltageReadings.push(powerMetric.ch2_voltage);
-        channel3VoltageReadings.push(powerMetric.ch3_voltage);
-        channel1CurrentReadings.push(powerMetric.ch1_current);
-        channel2CurrentReadings.push(powerMetric.ch2_current);
-        channel3CurrentReadings.push(powerMetric.ch3_current);
-    }
-    // create chart
-    new Chart(powerMetricsChartEl.value, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: [
-                {
-                    label: 'Ch1 Voltage',
-                    suffix: "V",
-                    borderColor: '#3b82f6',
-                    backgroundColor: '#3b82f6',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: channel1VoltageReadings,
-                    yAxisID: 'y',
-                },
-                {
-                    label: 'Ch2 Voltage',
-                    suffix: "V",
-                    borderColor: '#22c55e',
-                    backgroundColor: '#22c55e',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: channel2VoltageReadings,
-                    yAxisID: 'y',
-                },
-                {
-                    label: 'Ch3 Voltage',
-                    suffix: "V",
-                    borderColor: '#f97316',
-                    backgroundColor: '#f97316',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: channel3VoltageReadings,
-                    yAxisID: 'y',
-                },
-                {
-                    label: 'Ch1 Current',
-                    suffix: "mA",
-                    borderColor: '#93c5fd',
-                    backgroundColor: '#93c5fd',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: channel1CurrentReadings,
-                    yAxisID: 'y1',
-                },
-                {
-                    label: 'Ch2 Current',
-                    suffix: "mA",
-                    borderColor: '#86efac',
-                    backgroundColor: '#86efac',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: channel2CurrentReadings,
-                    yAxisID: 'y1',
-                },
-                {
-                    label: 'Ch3 Current',
-                    suffix: "mA",
-                    borderColor: '#fdba74',
-                    backgroundColor: '#fdba74',
-                    pointStyle: false, // no points
-                    fill: false,
-                    data: channel3CurrentReadings,
-                    yAxisID: 'y1',
-                },
-            ],
+const legendData = {
+    'Channel 1': 'bg-blue-500',
+    'Channel 2': 'bg-green-500',
+    'Channel 3': 'bg-orange-500',
+};
+
+// Computed dataset for the chart container
+const chartData = computed(() => {
+  const metrics = state.selectedNodePowerMetrics;
+  const labels = metrics.map(m => m.created_at);
+
+  const colors = ['#3b82f6', '#22c55e', '#f97316'];
+  const currentColors = ['#93c5fd', '#86efac', '#fdba74'];
+
+  const voltage = [[], [], []];
+  const current = [[], [], []];
+
+  for (const m of metrics) {
+    voltage[0].push(m.ch1_voltage);
+    voltage[1].push(m.ch2_voltage);
+    voltage[2].push(m.ch3_voltage);
+    current[0].push(m.ch1_current);
+    current[1].push(m.ch2_current);
+    current[2].push(m.ch3_current);
+  }
+
+  return {
+    labels,
+    datasets: [
+      ...voltage.map((data, i) => ({
+        label: `Ch${i + 1} Voltage`,
+        suffix: 'V',
+        data,
+        borderColor: colors[i],
+        backgroundColor: colors[i],
+        pointStyle: false,
+        fill: false,
+        yAxisID: 'y',
+      })),
+      ...current.map((data, i) => ({
+        label: `Ch${i + 1} Current`,
+        suffix: 'mA',
+        data,
+        borderColor: currentColors[i],
+        backgroundColor: currentColors[i],
+        pointStyle: false,
+        fill: false,
+        yAxisID: 'y1',
+      })),
+    ]
+  };
+});
+
+// Chart config for axes, tooltips, etc.
+const chartConfig = {
+  legendDisplay: false,
+  tooltipOptions: {
+    mode: 'index',
+    intersect: false,
+    callbacks: {
+      label: (item) => `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix || ''}`,
+    },
+  },
+  scales: {
+    x: {
+      position: 'top',
+      type: 'time',
+      time: {
+        unit: 'day',
+        displayFormats: {
+          day: 'MMM DD',
         },
-        options: {
-            responsive: true,
-            borderWidth: 2,
-            spanGaps: 1000 * 60 * 60 * 3, // only show lines between metrics with a 3 hour or less gap
-            elements: {
-                point: {
-                    radius: 2,
-                },
-            },
-            scales: {
-                x: {
-                    position: 'top',
-                    type: 'time',
-                    time: {
-                        unit: 'day',
-                        displayFormats: {
-                            day: 'MMM DD', // Jan 01
-                        },
-                    },
-                },
-                y: {
-                    min: 0,
-                    max: 30,
-                    ticks: {
-                        callback: (label) => `${label}V`,
-                    },
-                },
-                y1: {
-                    min: -500,
-                    max: 500,
-                    ticks: {
-                        stepSize: 50,
-                        callback: (label) => `${label}mA`,
-                    },
-                    position: 'right',
-                    grid: {
-                        drawOnChartArea: false, // only want the grid lines for one axis to show up
-                    },
-                },
-            },
-            plugins: {
-                legend: {
-                    display: false,
-                },
-                tooltip: {
-                    mode: "index",
-                    intersect: false,
-                    callbacks: {
-                        label: (item) => {
-                            return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
-                        },
-                    },
-                },
-            },
-        }
-    });
-}
-watch(
-  () => state.selectedNodePowerMetrics,
-  (newValue) => {
-    if (newValue !== []) {
-        initChart()
-    }
-  }, {deep: true}
-)
-onMounted(() => {
-    Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
-})
+      },
+    },
+    y: {
+      min: 0,
+      max: 30,
+      ticks: {
+        callback: (label) => `${label}V`,
+      },
+    },
+    y1: {
+      min: -500,
+      max: 500,
+      position: 'right',
+      grid: {
+        drawOnChartArea: false,
+      },
+      ticks: {
+        stepSize: 50,
+        callback: (label) => `${label}mA`,
+      },
+    },
+  },
+};
 </script>
 <template>
-    <!-- power metrics -->
-    <div>
-        <div class="flex bg-gray-200 p-2 font-semibold">
-            <div class="my-auto">Power Metrics</div>
-            <div class="my-auto ml-auto">
-                <select v-model="powerMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-                    <option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
-                </select>
-            </div>
-        </div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
-
-            <!-- power metrics chart -->
-            <li>
-                <div class="px-4 py-2">
-                    <div class="w-full">
-                        <canvas id="powerMetricsChart" style="height:150px;" ref="power-metrics-chart"></canvas>
-                        <div class="flex">
-                            <div class="mx-auto flex space-x-2">
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel 1</div>
-                                </div>
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel 2</div>
-                                </div>
-                                <div class="flex mx-auto">
-                                    <div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
-                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel 3</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-            <!-- channel 1 -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Channel 1</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="selectedNodeLatestPowerMetric">
-                        <span v-if="selectedNodeLatestPowerMetric?.ch1_voltage">{{ Number(selectedNodeLatestPowerMetric.ch1_voltage).toFixed(2) }}V</span>
-                        <span v-else>???</span>
-                        <span v-if="selectedNodeLatestPowerMetric?.ch1_current"> / {{ Number(selectedNodeLatestPowerMetric.ch1_current).toFixed(2) }}mA</span>
-                    </span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- channel 2 -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Channel 2</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="selectedNodeLatestPowerMetric">
-                        <span v-if="selectedNodeLatestPowerMetric?.ch2_voltage">{{ Number(selectedNodeLatestPowerMetric.ch2_voltage).toFixed(2) }}V</span>
-                        <span v-else>???</span>
-                        <span v-if="selectedNodeLatestPowerMetric?.ch2_current"> / {{ Number(selectedNodeLatestPowerMetric.ch2_current).toFixed(2) }}mA</span>
-                    </span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-            <!-- channel 3 -->
-            <li class="flex p-3">
-                <div class="text-sm font-medium text-gray-900">Channel 3</div>
-                <div class="ml-auto text-sm text-gray-700">
-                    <span v-if="selectedNodeLatestPowerMetric">
-                        <span v-if="selectedNodeLatestPowerMetric?.ch3_voltage">{{ Number(selectedNodeLatestPowerMetric.ch3_voltage).toFixed(2) }}V</span>
-                        <span v-else>???</span>
-                        <span v-if="selectedNodeLatestPowerMetric?.ch3_current"> / {{ Number(selectedNodeLatestPowerMetric.ch3_current).toFixed(2) }}mA</span>
-                    </span>
-                    <span v-else>???</span>
-                </div>
-            </li>
-
-        </ul>
-    </div>
-</template>
+    <MetricsChart
+        title="Power Metrics"
+        :data="chartData"
+        chartType="line"
+        timeRangeKey="powerMetricsTimeRange"
+        :legendData="legendData"
+        :chartConfig="chartConfig"
+    >
+        <ChannelData v-for="i in [1, 2, 3]" :key="i" :channel="i" />
+    </MetricsChart>
+</template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/Share.vue b/webapp/frontend/src/components/NodeInfo/Share.vue
index 214e3eb..a163083 100644
--- a/webapp/frontend/src/components/NodeInfo/Share.vue
+++ b/webapp/frontend/src/components/NodeInfo/Share.vue
@@ -1,27 +1,35 @@
 <script setup>
-const props = defineProps(['node']);
-import { getShareLinkForNode, copyShareLinkForNode } from '../../utils.js';
+const props = defineProps({
+  node: Object,
+});
+import { getShareLinkForNode, copyShareLinkForNode } from '@/utils.js';
 </script>
+
 <template>
-    <div>
-        <div class="flex bg-gray-200 p-2 font-semibold">
-            <div class="my-auto">Share Link</div>
-            <div class="ml-auto">
-                <button @click="copyShareLinkForNode(props.node.node_id)" type="button" class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
-                    Copy
-                </button>
-            </div>
-        </div>
-        <ul role="list" class="flex-1 divide-y divide-gray-200">
-            <li>
-                <div class="relative flex items-center">
-                    <div class="block flex-1 p-2">
-                        <div class="flex space-x-2">
-                            <input type="text" readonly class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :value="getShareLinkForNode(props.node.node_id)">
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ul>
+  <div>
+    <div class="flex bg-gray-200 p-2 font-semibold">
+      <div class="my-auto">Share Link</div>
+      <div class="ml-auto">
+        <button
+          @click="copyShareLinkForNode(props.node.node_id)"
+          type="button"
+          class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        >
+          Copy
+        </button>
+      </div>
     </div>
+    <ul role="list" class="flex-1 divide-y divide-gray-200">
+      <li class="p-3">
+        <div class="flex space-x-2">
+          <input
+            type="text"
+            readonly
+            :value="getShareLinkForNode(props.node.node_id)"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          />
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodeInfo/Traceroutes.vue b/webapp/frontend/src/components/NodeInfo/Traceroutes.vue
index 52df6eb..abda406 100644
--- a/webapp/frontend/src/components/NodeInfo/Traceroutes.vue
+++ b/webapp/frontend/src/components/NodeInfo/Traceroutes.vue
@@ -1,8 +1,9 @@
 <script setup>
 const emit = defineEmits(['showTraceRoute']);
 import moment from 'moment';
-import { state } from '../../store.js';
-import { findNodeById } from '../../utils.js';
+import { state } from '@/store.js';
+import { useMapStore } from '@/stores/mapStore';
+const mapData = useMapStore();
 </script>
 <template>
     <div>
@@ -17,7 +18,7 @@ import { findNodeById } from '../../utils.js';
                         <div class="block flex-1 px-4 py-2">
                             <div class="relative flex min-w-0 flex-1 items-center">
                                 <div>
-                                    <p class="text-sm text-gray-900"><span class="font-medium">{{ findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
+                                    <p class="text-sm text-gray-900"><span class="font-medium">{{ mapData.findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ mapData.findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
                                     <div class="text-sm text-gray-700">{{ moment(new Date(traceroute.updated_at)).fromNow() }} - {{ traceroute.route.length }} hops {{ traceroute.channel_id ? `on ${traceroute.channel_id}` : '' }}</div>
                                 </div>
                             </div>
diff --git a/webapp/frontend/src/components/NodeNeighborsModal.vue b/webapp/frontend/src/components/NodeNeighborsModal.vue
index 6e39edd..d65caaa 100644
--- a/webapp/frontend/src/components/NodeNeighborsModal.vue
+++ b/webapp/frontend/src/components/NodeNeighborsModal.vue
@@ -1,47 +1,57 @@
 <script setup>
+// TODO: close node details tooltip when this opens
+import { state } from '@/store';
+import CloseActionButton from '@/components/CloseActionButton.vue';
+
 const emit = defineEmits(['dismiss']);
-import { state } from '../store.js';
+
 function dismissShowingNodeNeighbours() {
-    state.selectedNodeToShowNeighbours = null;
-    emit('dismiss');
+  state.selectedNodeToShowNeighbours = null;
+  emit('dismiss');
 }
 </script>
+
 <template>
-    <div class="relative z-sidebar" role="dialog" aria-modal="true">
-        <!-- sidebar -->
-        <transition
-                enter-active-class="transition duration-300 ease-in-out transform"
-                enter-from-class="translate-y-full"
-                enter-to-class="translate-y-0"
-                leave-active-class="transition duration-300 ease-in-out transform"
-                leave-from-class="translate-y-0"
-                leave-to-class="translate-y-full">
-            <div v-show="state.selectedNodeToShowNeighbours != null" class="fixed left-0 right-0 bottom-0">
-                <div v-if="state.selectedNodeToShowNeighbours != null" class="mx-auto w-screen max-w-md p-4">
-                    <div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
-                        <div class="p-2">
-                            <div class="flex items-start justify-between">
-                                <div>
-                                    <h2 class="font-bold">{{ state.selectedNodeToShowNeighbours.short_name }} Neighbours</h2>
-                                    <h3 v-if="state.selectedNodeToShowNeighboursType === 'weHeard'" class="text-sm">Nodes heard by {{ state.selectedNodeToShowNeighbours.short_name }}</h3>
-                                    <h3 v-if="state.selectedNodeToShowNeighboursType === 'theyHeard'" class="text-sm">Nodes that heard {{ state.selectedNodeToShowNeighbours.short_name }}</h3>
-                                </div>
-                                <div class="my-auto ml-3 flex h-7 items-center">
-                                    <a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodeNeighbours">
-                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                <path d="M18 6l-12 12"></path>
-                                                <path d="M6 6l12 12"></path>
-                                            </svg>
-                                        </div>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+  <div class="relative z-sidebar" role="dialog" aria-modal="true">
+    <transition
+      enter-active-class="transition duration-300 ease-in-out transform"
+      enter-from-class="translate-y-full"
+      enter-to-class="translate-y-0"
+      leave-active-class="transition duration-300 ease-in-out transform"
+      leave-from-class="translate-y-0"
+      leave-to-class="translate-y-full"
+    >
+      <div v-show="state.selectedNodeToShowNeighbours" class="fixed left-0 right-0 bottom-0">
+        <div v-if="state.selectedNodeToShowNeighbours" class="mx-auto w-screen max-w-md p-4">
+          <div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
+            <div class="p-2">
+              <div class="flex items-start justify-between">
+                <div>
+                  <h2 class="font-bold">
+                    {{ state.selectedNodeToShowNeighbours.short_name }} Neighbors
+                  </h2>
+                  <h3
+                    v-if="state.selectedNodeToShowNeighboursType === 'weHeard'"
+                    class="text-sm"
+                  >
+                    Nodes heard by {{ state.selectedNodeToShowNeighbours.short_name }}
+                  </h3>
+                  <h3
+                    v-if="state.selectedNodeToShowNeighboursType === 'theyHeard'"
+                    class="text-sm"
+                  >
+                    Nodes that heard {{ state.selectedNodeToShowNeighbours.short_name }}
+                  </h3>
                 </div>
+                <CloseActionButton
+                  @click="dismissShowingNodeNeighbours"
+                  class="my-auto ml-3"
+                />
+              </div>
             </div>
-        </transition>
-    </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/NodePositionHistoryModal.vue b/webapp/frontend/src/components/NodePositionHistoryModal.vue
index a2e89df..44b4fe5 100644
--- a/webapp/frontend/src/components/NodePositionHistoryModal.vue
+++ b/webapp/frontend/src/components/NodePositionHistoryModal.vue
@@ -1,11 +1,14 @@
 <script setup>
 const emit = defineEmits(['dismiss']);
-import { state } from '../store.js';
+import { state } from '@/store';
 import moment from 'moment';
+import { useUIStore } from '@/stores/uiStore';
+
+const ui = useUIStore();
 function dismissShowingNodePositionHistory() {
     state.selectedNodePositionHistory = [];
     state.selectedNodeToShowPositionHistory = null;
-    state.positionHistoryModalExpanded = false;
+    ui.collapsePositionHistoryModal();
     emit('dismiss');
 }
 function onPositionHistoryQuickRangeClick(range) {
@@ -47,9 +50,9 @@ function onPositionHistoryQuickRangeClick(range) {
                         <div>
                             <div class="flex p-2">
                                 <div class="flex my-auto mr-3 space-x-2">
-                                    <a href="javascript:void(0)" @click="state.positionHistoryModalExpanded = !state.positionHistoryModalExpanded" class="rounded-full">
+                                    <a href="javascript:void(0)" @click="ui.togglePositionHistoryModalExpansion" class="rounded-full">
                                         <div class="bg-gray-100 hover:bg-gray-200 p-1 rounded-full">
-                                            <svg v-if="state.positionHistoryModalExpanded" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                            <svg v-if="ui.positionHistoryModalExpanded" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                                 <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                             </svg>
                                             <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@@ -71,7 +74,7 @@ function onPositionHistoryQuickRangeClick(range) {
                                     </a>
                                 </div>
                             </div>
-                            <div v-if="state.positionHistoryModalExpanded" class="divide-y border-t">
+                            <div v-if="ui.positionHistoryModalExpanded" class="divide-y border-t">
 
                                 <!-- quick range -->
                                 <div class="flex p-2 space-x-2">
diff --git a/webapp/frontend/src/components/NodeTooltip.vue b/webapp/frontend/src/components/NodeTooltip.vue
new file mode 100644
index 0000000..ab97fea
--- /dev/null
+++ b/webapp/frontend/src/components/NodeTooltip.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import moment from 'moment';
+import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, formatPositionPrecision } from '@/utils';
+import { state } from '@/store';
+const emit = defineEmits(['showNeighbors']);
+
+const props = defineProps({
+  node: Object,
+});
+const popupContent = ref(null);
+const hideImage = ref(false);
+const hardwareImage = `/images/devices/${props.node.hardware_model_name}.png`;
+
+const mqttStatus = hasNodeUplinkedToMqttRecently(props.node);
+const mqttClass = mqttStatus ? 'text-green-700' : 'text-blue-700';
+const mqttLabel = mqttStatus ? 'Connected' : 'Disconnected';
+const mqttUpdatedAt = props.node.mqtt_connection_state_updated_at
+  ? moment(props.node.mqtt_connection_state_updated_at).fromNow()
+  : null;
+
+const loraFrequencyRange = getRegionFrequencyRange(props.node.region_name);
+
+const formattedVoltage = computed(() => {
+  return typeof props.node.value?.voltage === 'number'
+    ? `${props.node.value.voltage.toFixed(2)}V`
+    : null;
+});
+
+const formattedChannelUtilization = computed(() => {
+  return typeof props.node.value?.channel_utilization === 'number'
+    ? `${props.node.value.channel_utilization.toFixed(2)}%`
+    : null;
+});
+
+const formattedAirUtil = computed(() => {
+  return typeof props.node.value?.air_util_tx === 'number'
+    ? `${props.node.value.air_util_tx.toFixed(2)}%`
+    : null;
+});
+
+function formatDate(date) {
+  return moment(date).fromNow();
+}
+</script>
+
+<template>
+    <div ref="popupContent">
+      <img
+        v-if="hardwareImage"
+        class="mb-4 w-40 mx-auto"
+        :src="hardwareImage"
+        @error="hideImage = true"
+        v-show="!hideImage"
+      />
+      <div class="font-bold text-center">{{ node.long_name }}</div>
+      Short Name: {{ node.short_name }}
+      <br />MQTT:
+      <span>
+        <span :class="mqttClass">{{ mqttLabel }}</span>
+        <span v-if="mqttUpdatedAt"> ({{ mqttUpdatedAt }})</span>
+      </span>
+  
+      <br v-if="node.num_online_local_nodes !== null" />
+      <span v-if="node.num_online_local_nodes !== null">
+        Local Nodes Online: {{ node.num_online_local_nodes }}
+      </span>
+  
+      <br v-if="node.position_precision !== 32 && node.position_precision !== null" />
+      <span v-if="node.position_precision !== 32 && node.position_precision !== null">
+        Position Precision: {{ formatPositionPrecision(node.position_precision) }}
+      </span>
+  
+      <br /><br />Role: {{ node.role_name }}
+      <br />Hardware: {{ node.hardware_model_name }}
+  
+      <br v-if="node.firmware_version" />
+      <span v-if="node.firmware_version">Firmware: {{ node.firmware_version }}</span>
+  
+      <br v-if="node.region_name" />
+      <span v-if="node.region_name">
+        LoRa Region: {{ node.region_name }} ({{ loraFrequencyRange }})
+      </span>
+  
+      <br v-if="node.modem_preset_name" />
+      <span v-if="node.modem_preset_name">Modem Preset: {{ node.modem_preset_name }}</span>
+  
+      <br v-if="node.has_default_channel !== null" />
+      <span v-if="node.has_default_channel !== null">
+        Has Default Channel: {{ node.has_default_channel ? 'Yes' : 'No' }}
+      </span>
+  
+      <br v-if="node.battery_level" />
+      <span v-if="node.battery_level">
+        Battery:
+        {{
+          node.battery_level > 100
+            ? 'Plugged In'
+            : `${node.battery_level}%`
+        }}
+      </span>
+  
+      <br v-if="formattedVoltage" />
+      <span v-if="formattedVoltage">Voltage: {{ formattedVoltage }}</span>
+  
+      <br v-if="formattedChannelUtilization" />
+      <span v-if="formattedChannelUtilization">
+        Ch Util: {{ formattedChannelUtilization }}
+      </span>
+  
+      <br v-if="formattedAirUtil" />
+      <span v-if="formattedAirUtil">Air Util: {{ formattedAirUtil }}</span>
+  
+      <br v-if="node.altitude && node.altitude < 42949000" />
+      <span v-if="node.altitude && node.altitude < 42949000">
+        Altitude: {{ node.altitude }}m
+      </span>
+  
+      <br /><br />ID: {{ node.node_id }}
+      <br />Hex ID: {{ node.node_id_hex }}
+      <br />Updated: {{ formatDate(node.updated_at) }}
+      <br v-if="node.neighbours_updated_at" />
+      <span v-if="node.neighbours_updated_at">
+        Neighbours Updated: {{ formatDate(node.neighbours_updated_at) }}
+      </span>
+      <br v-if="node.position_updated_at" />
+      <span v-if="node.position_updated_at">
+        Position Updated: {{ formatDate(node.position_updated_at) }}
+      </span>
+  
+      <br /><br />
+      <button @click="state.selectedNode = node" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200 mb-1">Show Full Details</button>
+      <br />
+      <button @click="$emit('showNeighbors', 'theyHeard', node.node_id)" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200 mb-1">Show Neighbours (Heard Us)</button>
+      <br />
+      <button @click="$emit('showNeighbors', 'weHeard', node.node_id)" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200">Show Neighbours (We Heard)</button>
+    </div>
+</template>
diff --git a/webapp/frontend/src/components/Settings.vue b/webapp/frontend/src/components/Settings.vue
index 3991290..2ef3f9b 100644
--- a/webapp/frontend/src/components/Settings.vue
+++ b/webapp/frontend/src/components/Settings.vue
@@ -1,210 +1,144 @@
 <script setup>
-import { state } from '../store.js';
-import { 
-    nodesMaxAge,
-    nodesDisconnectedAge,
-    nodesOfflineAge,
-    waypointsMaxAge,
-    neighboursMaxDistance,
-    goToNodeZoomLevel,
-    temperatureFormat,
-    autoUpdatePositionInUrl,
-    enableMapAnimations,
-} from '../config.js';
+import { useUIStore } from '@/stores/uiStore';
+import { useConfigStore } from '@/stores/configStore';
+import SettingField from '@/components/Settings/Field.vue';
+
+const ui = useUIStore();
+const configStore = useConfigStore();
+
+const timeOptions = [
+  { value: null, label: 'Show All' },
+  { value: 900, label: '15 minutes' },
+  { value: 1800, label: '30 minutes' },
+  { value: 3600, label: '1 hour' },
+  { value: 10800, label: '3 hours' },
+  { value: 21600, label: '6 hours' },
+  { value: 43200, label: '12 hours' },
+  { value: 86400, label: '24 hours' },
+  { value: 172800, label: '2 days' },
+  { value: 259200, label: '3 days' },
+  { value: 345600, label: '4 days' },
+  { value: 432000, label: '5 days' },
+  { value: 518400, label: '6 days' },
+  { value: 604800, label: '7 days' },
+];
 </script>
 
 <template>
-    <!-- settings sidebar -->
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
-
-        <!-- overlay -->
-        <transition
-                enter-active-class="transition-opacity duration-300 ease-linear"
-                enter-from-class="opacity-0"
-                enter-to-class="opacity-100"
-                leave-active-class="transition-opacity duration-300 ease-linear"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0">
-            <div v-show="state.settingsVisible" @click="state.settingsVisible = !state.settingsVisible" class="fixed inset-0 bg-gray-900/75"></div>
-        </transition>
-
-        <!-- sidebar -->
-        <transition
-                enter-active-class="transition duration-300 ease-in-out transform"
-                enter-from-class="-translate-x-full"
-                enter-to-class="translate-x-0"
-                leave-active-class="transition duration-300 ease-in-out transform"
-                leave-from-class="translate-x-0"
-                leave-to-class="-translate-x-full">
-            <div v-show="state.settingsVisible" class="fixed top-0 left-0 bottom-0">
-                <div v-if="state.settingsVisible" class="w-screen h-full max-w-md overflow-hidden">
-                    <div class="flex h-full flex-col bg-white shadow-xl">
-
-                        <!-- slideover header -->
-                        <div class="p-2 border-b border-gray-200 shadow-sm">
-                            <div class="flex items-start justify-between">
-                                <div>
-                                    <h2 class="font-bold">Settings</h2>
-                                    <h3 class="text-sm">Changes are only saved in this browser.</h3>
-                                </div>
-                                <div class="my-auto ml-3 flex h-7 items-center">
-                                    <a href="javascript:void(0)" class="rounded-full" @click="state.settingsVisible = false">
-                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                <path d="M18 6l-12 12"></path>
-                                                <path d="M6 6l12 12"></path>
-                                            </svg>
-                                        </div>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="overflow-y-auto divide-y divide-gray-200">
-
-                            <!-- configNodesMaxAgeInSeconds -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Nodes Max Age</label>
-                                <div class="text-xs text-gray-600 mb-2">Nodes not updated within this time are hidden. Reload to update map.</div>
-                                <select v-model="nodesMaxAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                    <option :value="null">Show All</option>
-                                    <option value="900">15 minutes</option>
-                                    <option value="1800">30 minutes</option>
-                                    <option value="3600">1 hour</option>
-                                    <option value="10800">3 hours</option>
-                                    <option value="21600">6 hours</option>
-                                    <option value="43200">12 hours</option>
-                                    <option value="86400">24 hours</option>
-                                    <option value="172800">2 days</option>
-                                    <option value="259200">3 days</option>
-                                    <option value="345600">4 days</option>
-                                    <option value="432000">5 days</option>
-                                    <option value="518400">6 days</option>
-                                    <option value="604800">7 days</option>
-                                </select>
-                            </div>
-
-                            <!-- configNodesDisconnectedAgeInSeconds -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Nodes Disconnected Age</label>
-                                <div class="text-xs text-gray-600 mb-2">Nodes that have not uplinked to MQTT in this time will show as blue icons. Reload to update map.</div>
-                                <select v-model="nodesDisconnectedAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                    <option value="900">15 minutes</option>
-                                    <option value="1800">30 minutes</option>
-                                    <option value="2700">45 minutes</option>
-                                    <option value="3600">1 hour</option>
-                                    <option value="7200">2 hours</option>
-                                    <option value="10800">3 hours</option>
-                                    <option value="21600">6 hours</option>
-                                    <option value="43200">12 hours</option>
-                                    <option value="86400">24 hours</option>
-                                    <option value="172800">2 days</option>
-                                    <option value="259200">3 days</option>
-                                    <option value="345600">4 days</option>
-                                    <option value="432000">5 days</option>
-                                    <option value="518400">6 days</option>
-                                    <option value="604800">7 days</option>
-                                </select>
-                            </div>
-
-                            <!-- configNodesOfflineAgeInSeconds -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Nodes Offline Age</label>
-                                <div class="text-xs text-gray-600 mb-2">Nodes not updated within this time will show as red icons. Reload to update map.</div>
-                                <select v-model="nodesOfflineAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                    <option :value="null">Don't show as offline</option>
-                                    <option value="900">15 minutes</option>
-                                    <option value="1800">30 minutes</option>
-                                    <option value="2700">45 minutes</option>
-                                    <option value="3600">1 hour</option>
-                                    <option value="7200">2 hours</option>
-                                    <option value="10800">3 hours</option>
-                                    <option value="21600">6 hours</option>
-                                    <option value="43200">12 hours</option>
-                                    <option value="86400">24 hours</option>
-                                    <option value="172800">2 days</option>
-                                    <option value="259200">3 days</option>
-                                    <option value="345600">4 days</option>
-                                    <option value="432000">5 days</option>
-                                    <option value="518400">6 days</option>
-                                    <option value="604800">7 days</option>
-                                </select>
-                            </div>
-
-                            <!-- configWaypointsMaxAgeInSeconds -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Waypoints Max Age</label>
-                                <div class="text-xs text-gray-600 mb-2">Waypoints not updated within this time are hidden. Reload to update map.</div>
-                                <select v-model="waypointsMaxAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                    <option :value="null">Show All</option>
-                                    <option value="900">15 minutes</option>
-                                    <option value="1800">30 minutes</option>
-                                    <option value="3600">1 hour</option>
-                                    <option value="10800">3 hours</option>
-                                    <option value="21600">6 hours</option>
-                                    <option value="43200">12 hours</option>
-                                    <option value="86400">24 hours</option>
-                                    <option value="172800">2 days</option>
-                                    <option value="259200">3 days</option>
-                                    <option value="345600">4 days</option>
-                                    <option value="432000">5 days</option>
-                                    <option value="518400">6 days</option>
-                                    <option value="604800">7 days</option>
-                                </select>
-                            </div>
-
-                            <!-- configNeighboursMaxDistanceInMeters -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Neighbours Max Distance (meters)</label>
-                                <div class="text-xs text-gray-600 mb-2">Neighbours further than this are hidden. Reload to update map.</div>
-                                <input type="number" v-model="neighboursMaxDistance" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                            </div>
-
-                            <!-- configZoomLevelGoToNode -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Zoom Level (go to node)</label>
-                                <div class="text-xs text-gray-600 mb-2">How far to zoom map when navigating to a node.</div>
-                                <input type="number" v-model="goToNodeZoomLevel" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                            </div>
-
-                            <!-- configTemperatureFormat -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Temperature Format</label>
-                                <div class="text-xs text-gray-600 mb-2">Metrics will be shown in the selected format.</div>
-                                <select v-model="temperatureFormat" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                    <option value="celsius">Celsius (ºC)</option>
-                                    <option value="fahrenheit">Fahrenheit (ºF)</option>
-                                </select>
-                            </div>
-
-                            <!-- configAutoUpdatePositionInUrl -->
-                            <div class="p-2">
-                                <div class="flex items-start">
-                                    <div class="flex items-center h-5">
-                                        <input type="checkbox" v-model="autoUpdatePositionInUrl" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
-                                    </div>
-                                    <label class="ml-2 text-sm font-medium text-gray-900">Auto Update Position in URL</label>
-                                </div>
-                                <div class="text-xs text-gray-600">Sets lat/lng/zoom as query parameters.</div>
-                            </div>
-
-                            <!-- configEnableMapAnimations -->
-                            <div class="p-2">
-                                <div class="flex items-start">
-                                    <div class="flex items-center h-5">
-                                        <input type="checkbox" v-model="enableMapAnimations" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
-                                    </div>
-                                    <label class="ml-2 text-sm font-medium text-gray-900">Enable Map Animations</label>
-                                </div>
-                                <div class="text-xs text-gray-600">Map will animate flying to nodes.</div>
-                            </div>
-
-                        </div>
-
-                    </div>
+      <!-- Overlay -->
+      <transition
+        enter-active-class="transition-opacity duration-300 ease-linear"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-300 ease-linear"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-show="ui.settingsVisible" @click="ui.toggleSettings" class="fixed inset-0 bg-gray-900/75"></div>
+      </transition>
+  
+      <!-- Sidebar -->
+      <transition
+        enter-active-class="transition duration-300 ease-in-out transform"
+        enter-from-class="-translate-x-full"
+        enter-to-class="translate-x-0"
+        leave-active-class="transition duration-300 ease-in-out transform"
+        leave-from-class="translate-x-0"
+        leave-to-class="-translate-x-full"
+      >
+        <div v-show="ui.settingsVisible" class="fixed top-0 left-0 bottom-0">
+          <div v-if="ui.settingsVisible" class="w-screen h-full max-w-md overflow-hidden">
+            <div class="flex h-full flex-col bg-white shadow-xl">
+              <!-- Header -->
+              <div class="p-2 border-b border-gray-200 shadow-sm">
+                <div class="flex items-start justify-between">
+                  <div>
+                    <h2 class="font-bold">Settings</h2>
+                    <h3 class="text-sm">Changes are only saved in this browser.</h3>
+                  </div>
+                  <button class="ml-3 p-2 bg-gray-100 hover:bg-gray-200 rounded-full" @click="ui.hideSettings">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
                 </div>
+              </div>
+  
+              <!-- Content -->
+              <div class="overflow-y-auto divide-y divide-gray-200">
+                <SettingField
+                  label="Nodes Max Age"
+                  helpText="Nodes not updated within this time are hidden. Reload to update map."
+                  v-model="configStore.nodesMaxAge"
+                  :options="timeOptions"
+                />
+  
+                <SettingField
+                  label="Nodes Disconnected Age"
+                  helpText="Nodes without recent MQTT uplinks appear blue. Reload to update map."
+                  v-model="configStore.nodesDisconnectedAge"
+                  :options="timeOptions.filter(o => o.value !== null)"
+                />
+  
+                <SettingField
+                  label="Nodes Offline Age"
+                  helpText="Nodes not updated within this time appear red. Reload to update map."
+                  v-model="configStore.nodesOfflineAge"
+                  :options="[
+                    { value: null, label: `Don't show as offline` },
+                    ...timeOptions.filter(o => o.value !== null)
+                  ]"
+                />
+  
+                <SettingField
+                  label="Waypoints Max Age"
+                  helpText="Old waypoints are hidden. Reload to update map."
+                  v-model="configStore.waypointsMaxAge"
+                  :options="timeOptions"
+                />
+  
+                <SettingField
+                  label="Neighbours Max Distance (meters)"
+                  helpText="Hides neighbours further than this distance."
+                  v-model="configStore.neighboursMaxDistance"
+                  type="number"
+                />
+  
+                <SettingField
+                  label="Zoom Level (go to node)"
+                  helpText="How far to zoom map when navigating to a node."
+                  v-model="configStore.goToNodeZoomLevel"
+                  type="number"
+                />
+  
+                <SettingField
+                  label="Temperature Format"
+                  helpText="Display temperatures in this format."
+                  v-model="configStore.temperatureFormat"
+                  :options="[
+                    { value: 'celsius', label: 'Celsius (ºC)' },
+                    { value: 'fahrenheit', label: 'Fahrenheit (ºF)' }
+                  ]"
+                />
+  
+                <SettingField
+                  label="Auto Update Position in URL"
+                  helpText="Sets lat/lng/zoom as query parameters."
+                  v-model="configStore.autoUpdatePositionInUrl"
+                  type="checkbox"
+                />
+  
+                <SettingField
+                  label="Enable Map Animations"
+                  helpText="Map will animate flying to nodes."
+                  v-model="configStore.enableMapAnimations"
+                  type="checkbox"
+                />
+              </div>
             </div>
-        </transition>
+          </div>
+        </div>
+      </transition>
     </div>
-</template>
\ No newline at end of file
+  </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/Settings/Field.vue b/webapp/frontend/src/components/Settings/Field.vue
new file mode 100644
index 0000000..2c9a729
--- /dev/null
+++ b/webapp/frontend/src/components/Settings/Field.vue
@@ -0,0 +1,55 @@
+<script setup>
+defineProps({
+  label: String,
+  helpText: String,
+  modelValue: [String, Number, Boolean, null],
+  options: Array,
+  type: {
+    type: String,
+    default: 'select', // "select", "number", or "checkbox"
+  },
+});
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <div class="p-2">
+    <label class="block text-sm font-medium text-gray-900">{{ label }}</label>
+    <div class="text-xs text-gray-600 mb-2">{{ helpText }}</div>
+
+    <template v-if="type === 'select'">
+      <select
+        :value="modelValue === null ? 'null' : modelValue"
+        @change="$emit('update:modelValue', $event.target.value === 'null' ? null : Number($event.target.value))"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+      >
+        <option v-for="opt in options" :key="opt.value" :value="opt.value === null ? 'null' : opt.value">
+          {{ opt.label }}
+        </option>
+      </select>
+    </template>
+
+    <template v-else-if="type === 'number'">
+      <input
+        type="number"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.valueAsNumber)"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+      />
+    </template>
+
+    <template v-else-if="type === 'checkbox'">
+      <div class="flex items-start">
+        <div class="flex items-center h-5">
+          <input
+            type="checkbox"
+            :checked="modelValue"
+            @change="$emit('update:modelValue', $event.target.checked)"
+            class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300"
+          />
+        </div>
+        <label class="ml-2 text-sm font-medium text-gray-900">{{ label }}</label>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/webapp/frontend/src/components/Traceroute/NodeEntry.vue b/webapp/frontend/src/components/Traceroute/NodeEntry.vue
new file mode 100644
index 0000000..46f8ad0
--- /dev/null
+++ b/webapp/frontend/src/components/Traceroute/NodeEntry.vue
@@ -0,0 +1,28 @@
+<script setup>
+const props = defineProps({
+  node: Object,
+  description: String,
+});
+const emit = defineEmits(['goTo']);
+</script>
+
+<template>
+    <li @click.prevent="$emit('goTo', node.node_id)" :key="node.node_id" class="relative flex gap-x-4" role="button" tabindex="0">
+      <div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
+        <div class="w-px bg-gray-200"></div>
+      </div>
+      <div class="my-auto relative flex flex-none items-center justify-center">
+        <div>
+          <div class="flex rounded-full h-12 w-12 text-white shadow-sm"
+               :style="{backgroundColor: node.backgroundColor, color: node.textColor}">
+            <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name ?? '?' }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
+        <div class="font-medium text-gray-900">{{ node.long_name || '???' }}</div>
+        <div>Hex ID: !{{ Number(node.node_id).toString(16) }}</div>
+        <div>{{ description }}</div>
+      </div>
+    </li>
+</template>
\ No newline at end of file
diff --git a/webapp/frontend/src/components/TracerouteInfo.vue b/webapp/frontend/src/components/TracerouteInfo.vue
index 4ee57c2..2ec92c9 100644
--- a/webapp/frontend/src/components/TracerouteInfo.vue
+++ b/webapp/frontend/src/components/TracerouteInfo.vue
@@ -1,8 +1,22 @@
 <script setup>
 const emit = defineEmits(['goTo']);
 import moment from 'moment';
-import { state } from '../store.js';
-import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from '../utils.js';
+import { computed } from 'vue';
+import { state } from '@/store';
+import { useMapStore } from '@/stores/mapStore';
+import NodeEntry from '@/components/Traceroute/NodeEntry.vue';
+const mapData = useMapStore();
+// selected node IDs
+const toNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.to));
+const fromNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.from));
+const gatewayNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.gateway_id));
+// pre-resolve the route nodes into an array
+const routeNodes = computed(() =>
+    state.selectedTraceRoute.route?.map(id => ({
+        id,
+        node: mapData.findNodeById(id),
+    })) ?? []
+);
 </script>
 <template>
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
@@ -52,89 +66,18 @@ import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from
                         </div>
 
                         <div class="overflow-y-auto">
-
                             <!-- details -->
                             <div class="p-2">
                                 <ul role="list" class="space-y-3">
-
                                     <!-- node that initiated traceroute -->
-                                    <li @click="$emit('goTo', state.selectedTraceRoute.to)" class="relative flex gap-x-4">
-                                        <div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
-                                            <div class="w-px bg-gray-200"></div>
-                                        </div>
-                                        <div class="my-auto relative flex flex-none items-center justify-center">
-                                            <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.to)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.to)}]` ]">
-                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.to)?.short_name ?? "?" }}</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
-                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.to)?.long_name || '???' }}</div>
-                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.to).toString(16) }}</div>
-                                            <div>Started the traceroute</div>
-                                        </div>
-                                    </li>
-
+                                    <NodeEntry :node="toNode" description="Started the traceroute" @go-to="$emit('goTo', toNode.node_id)"/>
                                     <!-- middleman nodes -->
-                                    <li @click="$emit('goTo', route)" v-for="route of state.selectedTraceRoute.route" class="relative flex gap-x-4">
-                                        <div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
-                                            <div class="w-px bg-gray-200"></div>
-                                        </div>
-                                        <div class="my-auto relative flex flex-none items-center justify-center">
-                                            <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(route)}" :class="[ `text-[${getNodeTextColor(route)}]` ]">
-                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(route)?.short_name ?? "?" }}</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
-                                            <div class="font-medium text-gray-900">{{ findNodeById(route)?.long_name || '???' }}</div>
-                                            <div>Hex ID: !{{ Number(route).toString(16) }}</div>
-                                            <div>Forwarded the packet</div>
-                                        </div>
-                                    </li>
-
+                                    <NodeEntry v-for="{ id, node } in routeNodes" :key="id" :node="node" description="Forwarded the packet" @go-to="$emit('goTo', id)"/>
                                     <!-- node that replied to traceroute -->
-                                    <li @click="$emit('goTo', state.selectedTraceRoute.from)" v-if="state.selectedTraceRoute.from" class="relative flex gap-x-4">
-                                        <div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
-                                            <div class="w-px bg-gray-200"></div>
-                                        </div>
-                                        <div class="my-auto relative flex flex-none items-center justify-center">
-                                            <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.from)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.from)}]` ]">
-                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.from)?.short_name ?? "?" }}</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
-                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.from)?.long_name || '???' }}</div>
-                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.from).toString(16) }}</div>
-                                            <div>Replied to traceroute</div>
-                                        </div>
-                                    </li>
-
+                                    <NodeEntry v-if="fromNode" :node="fromNode" description="Replied to traceroute" @go-to="$emit('goTo', fromNode.node_id)"/> 
                                     <!-- node that gated traceroute to mqtt -->
-                                    <li @click="$emit('goTo', state.selectedTraceRoute.gateway_id)" v-if="state.selectedTraceRoute.gateway_id" class="relative flex gap-x-4">
-                                        <div class="absolute left-0 top-0 flex w-12 justify-center h-6">
-                                            <div class="w-px bg-gray-200"></div>
-                                        </div>
-                                        <div class="my-auto relative flex flex-none items-center justify-center">
-                                            <div>
-                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.gateway_id)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.gateway_id)}]` ]">
-                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.short_name ?? "?" }}</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
-                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.long_name || '???' }}</div>
-                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.gateway_id).toString(16) }}</div>
-                                            <div>Gated the packet to MQTT</div>
-                                        </div>
-                                    </li>
-
+                                    <NodeEntry v-if="gatewayNode" :node="gatewayNode" description="Gated the packet to MQTT" @go-to="$emit('goTo', gatewayNode.node_id)" /> 
                                 </ul>
-
                             </div>
 
                             <div>
diff --git a/webapp/frontend/src/composables/useNodeProcessor.js b/webapp/frontend/src/composables/useNodeProcessor.js
new file mode 100644
index 0000000..3bda542
--- /dev/null
+++ b/webapp/frontend/src/composables/useNodeProcessor.js
@@ -0,0 +1,117 @@
+import { useMapStore } from '@/stores/mapStore';
+import moment from 'moment';
+import { nodesMaxAge, nodesOfflineAge } from '@/config'; // TODO: use config store
+import { icons } from '@/map';
+import { hasNodeUplinkedToMqttRecently, isValidCoordinates } from '@/utils';
+
+export function useNodeProcessor() {
+  const mapStore = useMapStore();  // Access your mapStore from Pinia
+
+  // This function processes new node data
+  const processNewNodes = (newNodes) => {
+    const now = moment();
+    const processedNodes = [];
+    const processedMarkers = {};
+
+    for (const node of newNodes) {
+        // Skip nodes older than configured node max age
+        if (nodesMaxAge.value) {
+            const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
+            if (lastUpdatedAgeInMillis > nodesMaxAge.value * 1000) {
+                continue;
+            }
+        }
+
+        // Compute background/text colors beforehand
+        node.backgroundColor = getNodeColor(node.node_id) || '#888';  // Default to '#888' if undefined
+        node.textColor = getNodeTextColor(node.node_id) || '#FFFFFF';  // Default to white if undefined
+
+        // Add node to the processed list regardless of its position
+        processedNodes.push(node);
+
+        // Skip nodes with invalid or missing position
+        if (!node.latitude || !node.longitude || isNaN(node.latitude) || isNaN(node.longitude)) {
+            continue;
+        }
+
+        // Fix latitude and longitude
+        node.latitude = node.latitude / 10000000;
+        node.longitude = node.longitude / 10000000;
+
+        // Icon based on MQTT connection state
+        let icon = icons.mqttDisconnected;
+
+        // Use offline icon for nodes older than configured node offline age
+        if (nodesOfflineAge.value) {
+            const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
+            if (lastUpdatedAgeInMillis > nodesOfflineAge.value * 1000) {
+            icon = icons.offline;
+            }
+        }
+
+        // Check if node has uplinked to MQTT recently
+        if (hasNodeUplinkedToMqttRecently(node)) {
+            icon = icons.mqttDisconnected;
+        }
+
+        // Filter invalid coordinates
+        if (!isValidCoordinates(node.latitude, node.longitude)) {
+            continue;
+        }
+
+        // Prepare marker data
+        const marker = {
+            type: 'Feature',
+            properties: { 
+                id: node.node_id,
+                role: node.role_name,
+                layer: 'nodes',
+                color: icon,
+            },
+            geometry: {
+                type: 'Point',
+                coordinates: [node.longitude, node.latitude],
+            },
+        };
+
+        // Add the marker to the processed markers dictionary (using node_id as the key)
+        processedMarkers[node.node_id] = marker;
+    }
+
+    // Return processed data (nodes and markers)
+    return { processedNodes, processedMarkers };
+  };
+
+  // Process new data and store it (bulk processing)
+  const parseNodesResponse = (newNodes) => {
+    const { processedNodes, processedMarkers } = processNewNodes(newNodes);
+
+    // Clear old data and update in bulk
+    mapStore.clearNodes();
+    mapStore.setNodes(processedNodes);
+    mapStore.setNodeMarkers(processedMarkers);
+  };
+
+  return {
+    parseNodesResponse,
+  };
+};
+
+
+// convert node id to a hex colour
+function getNodeColor(nodeId) {
+    return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
+};
+
+function getNodeTextColor(nodeId) {
+    // extract rgb components
+    const r = (nodeId & 0xFF0000) >> 16;
+    const g = (nodeId & 0x00FF00) >> 8;
+    const b = nodeId & 0x0000FF;
+
+    // calculate brightness
+    const brightness = ((r * 0.299) + (g * 0.587) + (b * 0.114)) / 255;
+
+    // determine text color based on brightness
+    return brightness > 0.5 ? "#000000" : "#FFFFFF";
+};
\ No newline at end of file
diff --git a/webapp/frontend/src/composables/useSearchedNodes.js b/webapp/frontend/src/composables/useSearchedNodes.js
new file mode 100644
index 0000000..edfd1f6
--- /dev/null
+++ b/webapp/frontend/src/composables/useSearchedNodes.js
@@ -0,0 +1,51 @@
+import { computed, ref, watch } from 'vue';
+import { useUIStore } from '@/stores/uiStore';
+import { useMapStore } from '@/stores/mapStore';
+import { debounce } from 'lodash';
+
+export const useSearchedNodes = () => {
+  const uiStore = useUIStore();
+  const mapStore = useMapStore();
+
+  const searchText = ref(uiStore.searchText);
+
+  // Use a debounced version of the search text to minimize re-computation
+  const debouncedSearchText = ref(searchText.value);
+  const updateSearchText = debounce((newSearchText) => {
+    debouncedSearchText.value = newSearchText;
+  }, 300); // Adjust debounce time (300ms is just an example)
+
+  // Watch for changes to the search text and apply debouncing
+  watch(() => uiStore.searchText, (newSearchText) => {
+    updateSearchText(newSearchText);
+  });
+
+  // Computed property for searched nodes
+  const searchedNodes = computed(() => {
+    const nodes = mapStore.nodes;
+    const query = debouncedSearchText.value.toLowerCase();
+
+    // Filter nodes based on search query, only once per update
+    const filteredNodes = nodes.filter((node) => {
+      const matchesId = node.node_id?.toLowerCase()?.includes(query);
+      const matchesHexId = node.node_id_hex?.toLowerCase()?.includes(query);
+      const matchesLongName = node.long_name?.toLowerCase()?.includes(query);
+      const matchesShortName = node.short_name?.toLowerCase()?.includes(query);
+      return matchesId || matchesHexId || matchesLongName || matchesShortName;
+    });
+
+    // Sort alphabetically by long name
+    const sortedNodes = filteredNodes.sort((nodeA, nodeB) => {
+      const nodeALongName = nodeA.long_name || "";
+      const nodeBLongName = nodeB.long_name || "";
+      return nodeALongName.localeCompare(nodeBLongName);
+    });
+
+    // Only return the first 500 results to avoid UI lag
+    return sortedNodes.slice(0, 500);
+  });
+
+  return {
+    searchedNodes,
+  };
+};
\ No newline at end of file
diff --git a/webapp/frontend/src/config.js b/webapp/frontend/src/config.js
index b027190..60d2bef 100644
--- a/webapp/frontend/src/config.js
+++ b/webapp/frontend/src/config.js
@@ -4,8 +4,6 @@ import { useStorage } from '@vueuse/core';
 export const CURRENT_ANNOUNCEMENT_ID = 1;
 export const BASE_PATH = 'http://localhost:9090';
 
-// string
-export const temperatureFormat = useStorage('temperature-display', 'fahrenheit');
 // boolean
 export const autoUpdatePositionInUrl =  useStorage('auto-update-url', true);
 export const enableMapAnimations = useStorage('map-animations', true);
diff --git a/webapp/frontend/src/directives/v-click-outside.js b/webapp/frontend/src/directives/v-click-outside.js
new file mode 100644
index 0000000..c87d8f7
--- /dev/null
+++ b/webapp/frontend/src/directives/v-click-outside.js
@@ -0,0 +1,16 @@
+export default {
+    mounted(el, binding) {
+      console.log('mounted')
+      el._clickOutsideHandler = (event) => {
+        console.log('handler')
+        if (!(el === event.target || el.contains(event.target))) {
+          binding.value(event);
+        }
+      };
+      document.addEventListener('click', el._clickOutsideHandler);
+    },
+    unmounted(el) {
+      document.removeEventListener('click', el._clickOutsideHandler);
+      el._clickOutsideHandler = null;
+    }
+  };
\ No newline at end of file
diff --git a/webapp/frontend/src/icons/DeviceIcon.vue b/webapp/frontend/src/icons/DeviceIcon.vue
new file mode 100644
index 0000000..eacbd3f
--- /dev/null
+++ b/webapp/frontend/src/icons/DeviceIcon.vue
@@ -0,0 +1,5 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+    </svg>
+  </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/icons/InfoIcon.vue b/webapp/frontend/src/icons/InfoIcon.vue
new file mode 100644
index 0000000..12f9e8b
--- /dev/null
+++ b/webapp/frontend/src/icons/InfoIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+  </svg>
+</template>
diff --git a/webapp/frontend/src/icons/MobileCloseIcon.vue b/webapp/frontend/src/icons/MobileCloseIcon.vue
new file mode 100644
index 0000000..6a86bf6
--- /dev/null
+++ b/webapp/frontend/src/icons/MobileCloseIcon.vue
@@ -0,0 +1,5 @@
+<template>
+    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/webapp/frontend/src/icons/RandomIcon.vue b/webapp/frontend/src/icons/RandomIcon.vue
new file mode 100644
index 0000000..6c83029
--- /dev/null
+++ b/webapp/frontend/src/icons/RandomIcon.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M18 4l3 3l-3 3"></path>
+      <path d="M18 20l3 -3l-3 -3"></path>
+      <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
+      <path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3"></path>
+    </svg>
+  </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/icons/ReloadIcon.vue b/webapp/frontend/src/icons/ReloadIcon.vue
new file mode 100644
index 0000000..3448315
--- /dev/null
+++ b/webapp/frontend/src/icons/ReloadIcon.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path>
+      <path d="M20 4v5h-5"></path>
+    </svg>
+  </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/icons/SearchIcon.vue b/webapp/frontend/src/icons/SearchIcon.vue
new file mode 100644
index 0000000..4729067
--- /dev/null
+++ b/webapp/frontend/src/icons/SearchIcon.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
+      <path d="M21 21l-6 -6"></path>
+    </svg>
+  </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/icons/SettingsIcon.vue b/webapp/frontend/src/icons/SettingsIcon.vue
new file mode 100644
index 0000000..37cf751
--- /dev/null
+++ b/webapp/frontend/src/icons/SettingsIcon.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </svg>
+  </template>
\ No newline at end of file
diff --git a/webapp/frontend/src/main.js b/webapp/frontend/src/main.js
index 5a5dbdb..cdd068b 100644
--- a/webapp/frontend/src/main.js
+++ b/webapp/frontend/src/main.js
@@ -1,11 +1,19 @@
-import './assets/main.css'
+import '@/assets/main.css';
 
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import App from '@/App.vue';
+import router from '@/router';
+import vClickOutside from '@/directives/v-click-outside';
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
-app.mount('#app')
+app.directive('click-outside', vClickOutside);
+app.use(pinia);
+app.use(router);
+
+app.mount('#app');
diff --git a/webapp/frontend/src/map.js b/webapp/frontend/src/map.js
index ec5e719..ccde159 100644
--- a/webapp/frontend/src/map.js
+++ b/webapp/frontend/src/map.js
@@ -1,6 +1,7 @@
 import { markRaw } from 'vue';
 import moment from 'moment';
-import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, escapeString, formatPositionPrecision } from './utils.js';
+import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, escapeString, formatPositionPrecision } from '@/utils';
+import { useMapStore } from '@/stores/mapStore';
 
 // state/config
 let instance = null;
@@ -70,7 +71,8 @@ export const icons = {mqttConnected: '#16a34a', mqttDisconnected: '#2563eb', off
 
 export function getTooltipContentForWaypoint(waypoint) {
     // get from node name
-    var fromNode = findNodeById(waypoint.from);
+    const mapData = useMapStore();
+    var fromNode = mapData.findNodeById(waypoint.from);
 
     var tooltip = `<b>${escapeString(waypoint.name)}</b>` +
         (waypoint.description ? `<br/>${escapeString(waypoint.description)}` : '') +
@@ -93,75 +95,6 @@ export function getTooltipContentForWaypoint(waypoint) {
     return tooltip;
 };
 
-export function getTooltipContentForNode(node) {
-    // determine if node was recently heard uplinking packets to mqtt
-    const nodeHasUplinkedToMqttRecently = hasNodeUplinkedToMqttRecently(node);
-    var mqttStatus = `<span class="text-blue-700">Disconnected</span>`;
-    if(node.mqtt_connection_state_updated_at){
-        var mqttStatusUpdatedAt = moment(new Date(node.mqtt_connection_state_updated_at)).fromNow();
-        if(nodeHasUplinkedToMqttRecently){
-            mqttStatus = `<span><span class="text-green-700">Connected</span> (${mqttStatusUpdatedAt})</span>`;
-        } else {
-            mqttStatus = `<span><span class="text-blue-700">Disconnected</span> (${mqttStatusUpdatedAt})</span>`;
-        }
-    }
-
-    var loraFrequencyRange = getRegionFrequencyRange(node.region_name);
-
-    var tooltip = `<img class="mb-4 w-40 mx-auto" src="/images/devices/${node.hardware_model_name}.png" onerror="this.classList.add('hidden')"/>` +
-        `<b>${escapeString(node.long_name)}</b>` +
-        `<br/>Short Name: ${escapeString(node.short_name)}` +
-        `<br/>MQTT: ${mqttStatus}` +
-        (node.num_online_local_nodes != null ? `<br/>Local Nodes Online: ${node.num_online_local_nodes}` : '') +
-        (node.position_precision != null && node.position_precision !== 32 ? `<br/>Position Precision: ${formatPositionPrecision(node.position_precision)}` : '') +
-        `<br/><br/>Role: ${node.role_name}` +
-        `<br/>Hardware: ${node.hardware_model_name}` +
-        (node.firmware_version != null ? `<br/>Firmware: ${node.firmware_version}` : '') +
-        (node.region_name != null ? `<br/>LoRa Region: ${node.region_name} (${loraFrequencyRange})` : '') +
-        (node.modem_preset_name != null ? `<br/>Modem Preset: ${node.modem_preset_name}` : '') +
-        (node.has_default_channel != null ? `<br/>Has Default Channel: ${node.has_default_channel ? "Yes" : "No"}` : '');
-
-    if(node.battery_level){
-        if(node.battery_level > 100){
-            tooltip += `<br/>Battery: ${node.battery_level > 100 ? 'Plugged In' : node.battery_level}`;
-        } else {
-            tooltip += `<br/>Battery: ${node.battery_level}%`;
-        }
-    }
-
-    if(node.voltage){
-        tooltip += `<br/>Voltage: ${Number(node.voltage).toFixed(2)}V`;
-    }
-
-    if(node.channel_utilization){
-        tooltip += `<br/>Ch Util: ${Number(node.channel_utilization).toFixed(2)}%`;
-    }
-
-    if(node.air_util_tx){
-        tooltip += `<br/>Air Util: ${Number(node.air_util_tx).toFixed(2)}%`;
-    }
-
-    // ignore alt above 42949000 due to https://github.com/meshtastic/firmware/issues/3109
-    if(node.altitude && node.altitude < 42949000){
-        tooltip += `<br/>Altitude: ${node.altitude}m`;
-    }
-
-    // bottom info
-    tooltip += `<br/><br/>ID: ${node.node_id}`;
-    tooltip += `<br/>Hex ID: ${node.node_id_hex}`;
-    tooltip += `<br/>Updated: ${moment(new Date(node.updated_at)).fromNow()}`;
-    tooltip += (node.neighbours_updated_at ? `<br/>Neighbours Updated: ${moment(new Date(node.neighbours_updated_at)).fromNow()}` : '');
-    tooltip += (node.position_updated_at ? `<br/>Position Updated: ${moment(new Date(node.position_updated_at)).fromNow()}` : '');
-
-    // show details button
-    tooltip += `<br/><br/><button onclick="showNodeDetails(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Full Details</button>`;
-    tooltip += `<br/><button onclick="window.showNodeNeighboursThatHeardUs(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Neighbours (Heard Us)</button>`;
-    tooltip += `<br/><button onclick="window.showNodeNeighboursThatWeHeard(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200">Show Neighbours (We Heard)</button>`;
-    tooltip += `</div>`;
-
-    return tooltip;
-}
-
 export function getNeighbourTooltipContent(type, node, neighbourNode, distanceInMeters, snr) {
     return '';
 }
@@ -201,7 +134,7 @@ export function cleanUpNodeNeighbors() {
 };
 
 export function clearNodeOutline() {
-
+    getMap().getSource('node-outlines').setData({});
 };
 
 export function clearMap() {
diff --git a/webapp/frontend/src/router/index.js b/webapp/frontend/src/router/index.js
index 29788a1..f5d4da6 100644
--- a/webapp/frontend/src/router/index.js
+++ b/webapp/frontend/src/router/index.js
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '@/views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
diff --git a/webapp/frontend/src/store.js b/webapp/frontend/src/store.js
index 33b5769..4c70da6 100644
--- a/webapp/frontend/src/store.js
+++ b/webapp/frontend/src/store.js
@@ -1,14 +1,8 @@
 import { reactive, computed } from 'vue';
 
 export const state = reactive({
-    // caches
-    nodes: [],
-    waypoints: [],
-    nodeMarkers: {},
-    waypointMarkers: [],
-
     // state
-    searchText: '',
+    searchText: '', // moved to ui store, maybe should not be there though?
     selectedNodeOutlineCircle: null,
     selectedNodeMqttMetrics: [],
     selectedNodeTraceroutes: [],
@@ -18,42 +12,11 @@ export const state = reactive({
     selectedNodeToShowNeighbours: null,
     selectedNodeToShowNeighbours: null,
     selectedNodeToShowNeighboursType: null,
-    currentPopup: null,
 
     // position history
     selectedNodeToShowPositionHistory: null,
     positionHistoryDateTimeTo: null,
     positionHistoryDateTimeFrom: null,
-
-    // ui
-    loading: false,
-    settingsVisible: false,
-    hardwareStatsVisible: false,
-    infoModalVisible: false,
-    mobileSearchVisible: false,
-    positionHistoryModalExpanded: false,
-    announcementVisible: false,
-});
-
-export const searchedNodes = computed(() => {
-    // search nodes
-    const nodes = state.nodes.filter((node) => {
-        const matchesId = node.node_id?.toLowerCase()?.includes(state.searchText.toLowerCase());
-        const matchesHexId = node.node_id_hex?.toLowerCase()?.includes(state.searchText.toLowerCase());
-        const matchesLongName = node.long_name?.toLowerCase()?.includes(state.searchText.toLowerCase());
-        const matchesShortName = node.short_name?.toLowerCase()?.includes(state.searchText.toLowerCase());
-        return matchesId || matchesHexId || matchesLongName || matchesShortName;
-    });
-
-    // order alphabetically by long name
-    nodes.sort((nodeA, nodeB) => {
-        const nodeALongName = nodeA.long_name || "";
-        const nodeBLongName = nodeB.long_name || "";
-        return nodeALongName.localeCompare(nodeBLongName);
-    });
-
-    // only return the first 500 results to avoid ui lag...
-    return nodes.slice(0, 500);
 });
 
 export const selectedNodeLatestPowerMetric = computed(() => {
diff --git a/webapp/frontend/src/stores/configStore.js b/webapp/frontend/src/stores/configStore.js
new file mode 100644
index 0000000..2065020
--- /dev/null
+++ b/webapp/frontend/src/stores/configStore.js
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia';
+
+// Define your store
+export const useConfigStore = defineStore('config', {
+  state: () => ({
+    // String values
+    temperatureFormat: 'fahrenheit',  // Default value
+    // Boolean values
+    autoUpdatePositionInUrl: true,
+    enableMapAnimations: true,
+    hasSeenInfoModal: false,
+
+    // Time in seconds (for max age values)
+    nodesMaxAge: null,
+    nodesDisconnectedAge: 604800,  // Default value
+    nodesOfflineAge: null,
+    waypointsMaxAge: 604800, // Default value
+
+    // Number values (zoom level, IDs)
+    goToNodeZoomLevel: 15,
+    lastSeenAnnouncementId: 1,
+
+    // Distance values (for max distances)
+    neighboursMaxDistance: null,
+
+    // Device info ranges (can be persisted)
+    deviceMetricsTimeRange: '3d',
+    powerMetricsTimeRange: '3d',
+    environmentMetricsTimeRange: '3d',
+
+    // Map config
+    enabledOverlayLayers: ['Legend', 'Position History'],
+    selectedTileLayerName: 'OpenStreetMap'
+  }),
+  // Automatically persist the state in localStorage
+  persist: {
+    storage: localStorage,  // Use localStorage (default is sessionStorage)
+  },
+});
\ No newline at end of file
diff --git a/webapp/frontend/src/stores/mapStore.js b/webapp/frontend/src/stores/mapStore.js
new file mode 100644
index 0000000..4d95e87
--- /dev/null
+++ b/webapp/frontend/src/stores/mapStore.js
@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+
+export const useMapStore = defineStore('map', {
+  state: () => ({
+    nodes: [],
+    waypoints: [],
+    nodeMarkers: {},
+    waypointMarkers: [],
+  }),
+  actions: {
+    setNodes(nodes) {
+      this.nodes = nodes;
+    },
+    setNodeMarkers(markers) {
+        this.nodeMarkers = markers;
+    },
+    addNode(node, marker) {
+        // TODO do validation i.e. does it exist already?
+        this.nodes.push(node);
+        // allow undefined/null marker (nodes don't always have a marker)
+        if (typeof marker === 'object') this.addNodeMarker(marker);
+    },
+    addNodeMarker(marker) {
+        // TODO do validation checking here -- i.e. do we have the node? is marker.proprties.id set? does it exist already?
+        this.nodeMarkers[marker.properties.id] = marker;
+    },
+    clearNodes() {
+        this.nodes = [];
+        this.nodeMarkers = {};
+    },
+    setWaypoints(waypoints) {
+        this.waypoints = waypoints;
+    },
+    addWaypoint(waypoint, marker) {
+        this.waypoints.push(waypoint);
+        this.addWaypointMarker(marker);
+    },
+    addWaypointMarker(marker) {
+        this.waypointMarkers.push(marker);
+    },
+    clearWaypoints() {
+        this.waypoints = [];
+        this.waypointMarkers = [];
+    },
+    findNodeById(id) {
+        return this.nodes.find((node) => node.node_id.toString() === id.toString()) ?? null;
+    },
+    findNodeMarkerById(id) {
+        return this.nodeMarkers[id] ?? null;
+    },
+    findRandomNode() {
+        return this.nodes[Math.floor(Math.random() * this.nodes.length)] ?? null;
+    },
+  },
+});
\ No newline at end of file
diff --git a/webapp/frontend/src/stores/uiStore.js b/webapp/frontend/src/stores/uiStore.js
new file mode 100644
index 0000000..c55e20d
--- /dev/null
+++ b/webapp/frontend/src/stores/uiStore.js
@@ -0,0 +1,82 @@
+import { defineStore } from 'pinia';
+
+export const useUIStore = defineStore('ui', {
+  state: () => ({
+    searchText: '',
+    loading: false,
+    settingsVisible: false,
+    hardwareStatsVisible: false,
+    infoModalVisible: false,
+    mobileSearchVisible: false,
+    positionHistoryModalExpanded: false,
+    announcementVisible: false,
+  }),
+  actions: {
+    search(text) {
+        this.searchText = text;
+    },
+    clearSearch() {
+        this.search('');
+    },
+    showMobileSearch() {
+        this.mobileSearchVisible = true;
+    },
+    hideMobileSearch() {
+        this.mobileSearchVisible = false;
+    },
+    toggleMobileSearch() {
+        this.mobileSearchVisible = !this.mobileSearchVisible;
+    },
+    expandPositionHistoryModal() {
+        this.positionHistoryModalExpanded = true;
+    },
+    collapsePositionHistoryModal() {
+        this.positionHistoryModalExpanded = false;
+    },
+    togglePositionHistoryModalExpansion() {
+        this.positionHistoryModalExpanded = !this.positionHistoryModalExpanded;
+    },
+    showSettings() {
+        this.settingsVisible = true;
+    },
+    hideSettings() {
+        this.settingsVisible = false;
+    },
+    toggleSettings() {
+      this.settingsVisible = !this.settingsVisible;
+    },
+    showAnnouncement() {
+        this.showAnnouncement = true;
+    },
+    hideAnnouncement() {
+        this.showAnnouncement = false;
+    },
+    toggleAnnouncement() {
+        this.announcementVisible = !this.announcementVisible;
+    },
+    showInfoModal() {
+        this.infoModalVisible = true;
+    },
+    hideInfoModal() {
+        this.infoModalVisible = false;
+    },
+    toggleInfoModal() {
+        this.infoModalVisible = !this.infoModalVisible;
+    },
+    showHardwareStats() {
+        this.hardwareStatsVisible = true;
+    },
+    hideHardwareStats() {
+        this.hardwareStatsVisible = false;
+    },
+    toggleHardwareStats() {
+        this.hardwareStatsVisible = !this.hardwareStatsVisible;
+    },
+    startLoading() {
+        this.loading = true;
+    },
+    stopLoading() {
+        this.loading = false;
+    },
+  }
+});
\ No newline at end of file
diff --git a/webapp/frontend/src/utils.js b/webapp/frontend/src/utils.js
index 2aac4af..f2b6fa1 100644
--- a/webapp/frontend/src/utils.js
+++ b/webapp/frontend/src/utils.js
@@ -1,5 +1,5 @@
-import { state } from './store.js';
-import { temperatureFormat, nodesDisconnectedAge, BASE_PATH } from './config.js';
+import { BASE_PATH } from '@/config';
+import { useConfigStore } from '@/stores/configStore';
 import moment from 'moment';
 
 export const timeSpans = {
@@ -19,6 +19,10 @@ export function getTimeSpan(value) {
     return timeSpans[value];
 };
 
+export function isValidCoordinates(lat, lng) {
+    return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
+}
+
 // convert node id to a hex colour
 export function getNodeColor(nodeId) {
     return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
@@ -202,25 +206,10 @@ export function celsiusToFahrenheit(celsius) {
     return (celsius * 9/5) + 32;
 };
 
-
-/** operates on state */
-
-// find node by id
-export function findNodeById(id) {
-    const node = state.nodes.find((node) => node.node_id.toString() === id.toString());
-    if (node) return node;
-    return null;
-};
-
-// find node marker by id
-export function findNodeMarkerById(id) {
-    return state.nodeMarkers[id] ?? null;
-};
-
 /** operates on config */
 
 export function formatTemperature(celsius) {
-    switch (temperatureFormat.value) {
+    switch (useConfigStore().temperatureFormat) {
         case "celsius": {
             return `${Number(celsius).toFixed(0)}ºC`;
         }
@@ -232,7 +221,7 @@ export function formatTemperature(celsius) {
 }
 
 export function getTemperatureUnit() {
-    switch (temperatureFormat.value) {
+    switch (useConfigStore().temperatureFormat) {
         case "celsius": return "ºC";
         case "fahrenheit": return "ºF";
     }
@@ -246,5 +235,5 @@ export function buildPath(endpoint) {
 export function hasNodeUplinkedToMqttRecently(node) {
     const now = moment();
     const millisecondsSinceNodeLastUplinkedToMqtt = now.diff(moment(node.mqtt_connection_state_updated_at));
-    return millisecondsSinceNodeLastUplinkedToMqtt < nodesDisconnectedAge.value * 1000;
+    return millisecondsSinceNodeLastUplinkedToMqtt < useConfigStore().nodesDisconnectedAge.value * 1000;
 }
\ No newline at end of file
diff --git a/webapp/frontend/src/views/HomeView.vue b/webapp/frontend/src/views/HomeView.vue
index 2743c23..dca596c 100644
--- a/webapp/frontend/src/views/HomeView.vue
+++ b/webapp/frontend/src/views/HomeView.vue
@@ -1,27 +1,32 @@
 <script setup>
-import Header from '../components/Header.vue';
-import InfoModal from '../components/InfoModal.vue';
-import HardwareModelList from '../components/HardwareModelList.vue';
-import Settings from '../components/Settings.vue';
-import NodeInfo from '../components/NodeInfo.vue';
-import NodeNeighborsModal from '../components/NodeNeighborsModal.vue';
-import NodePositionHistoryModal from '../components/NodePositionHistoryModal.vue';
-import TracerouteInfo from '../components/TracerouteInfo.vue';
-import Announcement from '../components/Announcement.vue';
+import Header from '@/components/Header.vue';
+import InfoModal from '@/components/InfoModal.vue';
+import HardwareModelList from '@/components/HardwareModelList.vue';
+import Settings from '@/components/Settings.vue';
+import NodeInfo from '@/components/NodeInfo.vue';
+import NodeNeighborsModal from '@/components/NodeNeighborsModal.vue';
+import NodePositionHistoryModal from '@/components/NodePositionHistoryModal.vue';
+import TracerouteInfo from '@/components/TracerouteInfo.vue';
+import Announcement from '@/components/Announcement.vue';
+import NodeTooltip from '@/components/NodeTooltip.vue';
+
+import { useUIStore } from '@/stores/uiStore';
+import { useMapStore } from '@/stores/mapStore';
+import { useNodeProcessor } from '@/composables/useNodeProcessor';
+
 
 import axios from 'axios';
 import moment from 'moment';
 import maplibregl from 'maplibre-gl';
-import LegendControl from '../LegendControl.js';
-import LayerControl from '../LayerControl.js';
-import { onMounted, useTemplateRef, ref, watch, markRaw } from 'vue';
-import { state } from '../store.js';
+import LegendControl from '@/LegendControl';
+import LayerControl from '@/LayerControl';
+import { onMounted, useTemplateRef, ref, watch, markRaw, nextTick, createApp, shallowRef } from 'vue';
+import { state } from '@/store';
 import { 
   layerGroups,
   tileLayers,
   icons,
   getTooltipContentForWaypoint,
-  getTooltipContentForNode,
   getNeighbourTooltipContent,
   clearAllNodes,
   clearAllNeighbors,
@@ -35,7 +40,7 @@ import {
   clearMap,
   setMap,
   getMap,
-} from '../map.js';
+} from '@/map';
 import {
   nodesMaxAge,
   nodesDisconnectedAge,
@@ -50,7 +55,7 @@ import {
   hasSeenInfoModal,
   lastSeenAnnouncementId,
   CURRENT_ANNOUNCEMENT_ID,
-} from '../config.js';
+} from '@/config';
 import { 
   getColorForSnr,
   getPositionPrecisionInMeters,
@@ -60,13 +65,22 @@ import {
   formatPositionPrecision,
   isMobile,
   elementOrAnyAncestorHasClass,
-  findNodeById,
-  findNodeMarkerById,
   hasNodeUplinkedToMqttRecently,
   buildPath,
-} from '../utils.js';
+  isValidCoordinates,
+} from '@/utils';
 const mapEl = useTemplateRef('appMap');
 
+// related to node popup on hover/click
+const popup = shallowRef(null); // Keep a single popup reference
+const popupTarget = ref(null); // DOM container for Vue teleport
+const isTooltipLocked = ref(false); // Locked open (via click)
+const selectedNode = ref(null);
+
+const ui = useUIStore();
+const mapData = useMapStore();
+const { parseNodesResponse } = useNodeProcessor();
+
 // watchers
 watch(
   () => state.positionHistoryDateTimeTo,
@@ -85,50 +99,82 @@ watch(
   }, {deep: true}
 );
 
+watch(
+    () => mapData.nodeMarkers,
+    (newMarkers, oldMarkers) => {
+        // This will trigger whenever nodeMarkers change
+        updateMapNodeSource(newMarkers);
+    },
+    { deep: true } // Ensure that nested changes are also observed
+);
+
+function updateMapNodeSource(markers) {
+    const source = getMap().getSource('nodes'); 
+    if (source) {
+        source.setData({
+            type: 'FeatureCollection',
+            features: Object.values(markers),
+        });
+    }
+}
+
 function showNodeOutline(id) {
     // remove any existing node circle
     clearNodeOutline();
 
     // find node marker by id
-    const nodeMarker = state.nodeMarkers[id];
+    const nodeMarker = mapData.findNodeMarkerById(id);
     if (!nodeMarker) {
         return;
     }
 
     // find node by id
-    const node = findNodeById(id);
+    const node = mapData.findNodeById(id);
     if (!node) {
         return;
     }
 
-    // add position precision circle around node
-    if(node.position_precision != null && node.position_precision > 0 && node.position_precision < 32){
-        state.selectedNodeOutlineCircle = L.circle(nodeMarker.getLatLng(), {
-            radius: getPositionPrecisionInMeters(node.position_precision),
-        }).addTo(getMap());
+    if (node.position_precision != null && node.position_precision > 0 && node.position_precision < 32) {
+        const zoomLevel = getMap().getZoom(); // Get current zoom level
+        const radiusInMeters = getPositionPrecisionInMeters(node.position_precision);
+        const zoomFactor = 1 - (zoomLevel / 20);
+        let adjustedRadius = radiusInMeters * zoomFactor;
+        // Set a minimum radius (e.g., 10 meters) to avoid disappearing circles
+        adjustedRadius = Math.max(adjustedRadius, 10);
+        console.log(adjustedRadius)
+
+        // Create a circle as a GeoJSON feature
+        const geojsonCircle = {
+            type: 'Feature',
+            geometry: {
+                type: 'Point',
+                coordinates: nodeMarker.geometry.coordinates,
+            },
+            properties: {
+                radius: adjustedRadius // You can store the radius in the properties if needed
+            }
+        };
+        getMap().getSource('node-outlines').setData(geojsonCircle);
     }
 }
 
-window.showNodeDetails = function(id) {
-    // find node
-    const node = findNodeById(id);
-    if (!node) {
-        return;
-    }
-    state.selectedNode = node;
+function showNeighbors(type, id) {
+    let func = showNodeNeighboursThatHeardUs;
+    if (type === 'weHeard') func = showNodeNeighboursThatWeHeard;
+    func(id);
 }
 
-window.showNodeNeighboursThatHeardUs = function(id) {
+function showNodeNeighboursThatHeardUs(id) {
     cleanUpNodeNeighbors();
 
     // find node
-    const node = findNodeById(id);
+    const node = mapData.findNodeById(id);
     if (!node) {
         return;
     }
 
     // find node marker
-    const nodeMarker = findNodeMarkerById(node.node_id);
+    const nodeMarker = mapData.findNodeMarkerById(node.node_id);
     if (!nodeMarker) {
       return;
     }
@@ -139,7 +185,7 @@ window.showNodeNeighboursThatHeardUs = function(id) {
 
     // find all nodes that have us as a neighbour
     const neighbourNodeInfos = [];
-    for (const nodeThatMayHaveHeardUs of state.nodes) {
+    for (const nodeThatMayHaveHeardUs of mapData.nodes) {
         // find our node in this nodes neighbours
         const nodeNeighbours = nodeThatMayHaveHeardUs.neighbours ?? [];
         const neighbour = nodeNeighbours.find(function(neighbour) {
@@ -172,7 +218,7 @@ window.showNodeNeighboursThatHeardUs = function(id) {
         }
 
         // find neighbour node marker
-        const neighbourNodeMarker = findNodeMarkerById(neighbourNode.node_id);
+        const neighbourNodeMarker = mapData.findNodeMarkerById(neighbourNode.node_id);
         if (!neighbourNodeMarker) {
             continue;
         }
@@ -213,17 +259,17 @@ window.showNodeNeighboursThatHeardUs = function(id) {
     }
 }
 
-window.showNodeNeighboursThatWeHeard = function(id) {
+function showNodeNeighboursThatWeHeard(id) {
     cleanUpNodeNeighbors();
 
     // find node
-    const node = findNodeById(id);
+    const node = mapData.findNodeById(id);
     if (!node) {
         return;
     }
 
     // find node marker
-    const nodeMarker = findNodeMarkerById(node.node_id);
+    const nodeMarker = mapData.findNodeMarkerById(node.node_id);
     if (!nodeMarker) {
       return;
     }
@@ -243,12 +289,12 @@ window.showNodeNeighboursThatWeHeard = function(id) {
         continue;
       }
       // find neighbor node
-      const neighbourNode = findNodeById(neighbour.node_id);
+      const neighbourNode = mapData.findNodeById(neighbour.node_id);
       if (!neighbourNode) {
         continue;
       }
       // find neighbor node marker
-      const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
+      const neighbourNodeMarker = mapData.findNodeMarkerById(neighbour.node_id);
       if (!neighbourNodeMarker) {
         continue;
       }
@@ -287,13 +333,10 @@ window.showNodeNeighboursThatWeHeard = function(id) {
     }
 } 
 
-function isValidCoordinates(lat, lng) {
-    return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
-}
-
 function onNodesUpdated(nodes) {
     const now = moment();
-    state.nodes = [];
+    // clear cach
+    mapData.clearNodes();
     for (const node of nodes) {
         // skip nodes older than configured node max age
         if (nodesMaxAge.value) {
@@ -304,7 +347,7 @@ function onNodesUpdated(nodes) {
         }
 
         // add node to cache
-        state.nodes.push(node);
+        mapData.addNode(node);
 
         // skip nodes without position
         if (!node.latitude || !node.longitude) {
@@ -356,23 +399,24 @@ function onNodesUpdated(nodes) {
             }
         };
 
-        // add maker to cache
-        state.nodeMarkers[node.node_id] = marker;
+        // add marker to cache
+        mapData.addNodeMarker(marker);
     }
     // set data
     const source = getMap().getSource('nodes');
     if (source) {
         source.setData({
             type: 'FeatureCollection',
-            features: Object.values(state.nodeMarkers),
+            features: Object.values(mapData.nodeMarkers),
         });
     }
 }
 
 function onWaypointsUpdated(waypoints) {
-    state.waypoints = [];
     const now = moment();
-    // add nodes
+    // clear cache
+    mapData.clearWaypoints();
+    // add waypoints
     for (const waypoint of waypoints) {
         // skip waypoints older than configured waypoint max age
         if (waypointsMaxAge.value) {
@@ -401,7 +445,7 @@ function onWaypointsUpdated(waypoints) {
         waypoint.latitude = waypoint.latitude / 10000000;
         waypoint.longitude = waypoint.longitude / 10000000;
 
-        // determine emoji to show as marker icon
+        // TODO: determine emoji to show as marker icon
         const emoji = waypoint.icon === 0 ? 128205 : waypoint.icon;
         const emojiText = String.fromCodePoint(emoji);
 
@@ -409,8 +453,6 @@ function onWaypointsUpdated(waypoints) {
             continue;
         }
 
-        state.waypoints.push(waypoint);
-
         // create waypoint marker
         const marker = {
             type: 'Feature',
@@ -422,19 +464,20 @@ function onWaypointsUpdated(waypoints) {
                 coordinates: [waypoint.longitude, waypoint.latitude]
             }
         };
-        // add maker to cache
-        state.waypointMarkers.push(marker);
+        // add waypoint & marker to cache
+        mapData.addWaypoint(waypoint, marker);
     }
     // set data
     const source = getMap().getSource('waypoints');
     if (source) {
         source.setData({
             type: 'FeatureCollection',
-            features: Object.values(state.waypointMarkers),
+            features: Object.values(mapData.waypointMarkers),
         });
     }
 }
 
+// TODO
 function onPositionHistoryUpdated(updatedPositionHistories) {
   let positionHistoryLinesCords = [];
   // add nodes
@@ -445,7 +488,7 @@ function onPositionHistoryUpdated(updatedPositionHistories) {
     }
 
     // find node this position is for
-    const node = findNodeById(positionHistory.node_id);
+    const node = mapData.findNodeById(positionHistory.node_id);
     if (!node) {
       continue;
     }
@@ -483,7 +526,7 @@ function onPositionHistoryUpdated(updatedPositionHistories) {
 
     // add gateway info if available
     if (positionHistory.gateway_id) {
-        const gatewayNode = findNodeById(positionHistory.gateway_id);
+        const gatewayNode = mapData.findNodeById(positionHistory.gateway_id);
         const gatewayNodeInfo = gatewayNode ? `[${gatewayNode.short_name}] ${gatewayNode.long_name}` : "???";
         tooltip += `<br/>Heard by: <a href="javascript:void(0);" onclick="goToNode(${positionHistory.gateway_id})">${gatewayNodeInfo}</a>`;
     }
@@ -504,22 +547,20 @@ function onPositionHistoryUpdated(updatedPositionHistories) {
 }
 
 function goToRandomNode() {
-    if (state.nodes.length > 0) {
-        const randomNode = state.nodes[Math.floor(Math.random() * state.nodes.length)];
-        if (randomNode) {
-            // go to node
-            if (goToNode(randomNode.node_id)) {
-                return;
-            }
-            // fallback to showing node details since we can't go to the node
-            window.showNodeDetails(randomNode.node_id);
+    const randomNode = mapData.findRandomNode();
+    if (randomNode) {
+        // go to node
+        if (goToNode(randomNode.node_id)) {
+            return;
         }
+        // fallback to showing node details since we can't go to the node
+        state.selectedNode = randomNode;
     }
 }
 
 function showNodePositionHistory(nodeId) {
   // find node
-  const node = findNodeById(nodeId);
+  const node = mapData.findNodeById(nodeId);
   if (!node) {
     return;
   }
@@ -527,7 +568,7 @@ function showNodePositionHistory(nodeId) {
   // update ui
   state.selectedNode = null;
   state.selectedNodeToShowPositionHistory = node;
-  state.positionHistoryModalExpanded = true;
+  ui.expandPositionHistoryModal();
 
   // close node info tooltip as position history shows under it
   closeAllTooltips();
@@ -560,29 +601,33 @@ function loadNodePositionHistory(nodeId) {
     });
 }
 
-function reload(goToNodeId, zoom) {
+async function reload(goToNodeId, zoom) {
     // show loading
-    state.loading = true;
+    ui.startLoading();
     // clear previous data
     clearMap();
-    axios.get(buildPath('/api/v1/nodes')).then(response => {
-        // update nodes
-        onNodesUpdated(response.data.nodes);
+
+    try {
+        const response = await axios.get(buildPath('/api/v1/nodes'));
+        parseNodesResponse(response.data.nodes);
+    } catch (e) {
+        console.error('Error fetching nodes:', e);
+    } finally {
         // hide loading
-        state.loading = false;
-    });
+        ui.stopLoading();
+    }
 }
 
 function goToNode(id, animate, zoom){
     // find node
-    const node = findNodeById(id);
+    const node = mapData.findNodeById(id);
     if (!node) {
         alert("Could not find node: " + id);
         return false;
     }
 
     // find node marker by id
-    const nodeMarker = findNodeMarkerById(id);
+    const nodeMarker = mapData.findNodeMarkerById(id);
     if (!nodeMarker) {
         return false;
     }
@@ -591,19 +636,18 @@ function goToNode(id, animate, zoom){
     closeAllPopups();
     closeAllTooltips();
 
-    // select node
-    showNodeOutline(id);
-
     // fly to node marker
     const shouldAnimate = animate != null ? animate : true;
-    getMap().flyTo(nodeMarker.getLatLng(), parseFloat(zoom || goToNodeZoomLevel.value), {
-        animate: enableMapAnimations.value ? shouldAnimate : false,
+    const coords = nodeMarker.geometry.coordinates;
+    getMap().flyTo({
+        center: coords,
+        zoom: parseFloat(zoom || goToNodeZoomLevel.value)
     });
-
-    // open tooltip for node
-    getMap().openTooltip(getTooltipContentForNode(node), nodeMarker.getLatLng(), {
-        interactive: true, // allow clicking buttons inside tooltip
-        permanent: true, // don't auto dismiss when clicking buttons inside tooltip
+    getMap().once('moveend', async () => {
+        // add position bubble for node
+        showNodeOutline(id);
+        // open popup for node
+        await openLockedTooltipFromNode(nodeMarker);
     });
 
     // successfully went to node
@@ -613,10 +657,9 @@ function goToNode(id, animate, zoom){
 
 function onSearchResultNodeClick(node) {
   // clear search
-  state.searchText = '';
-
-  // hide search
-  state.mobileSearchVisible = false;
+  ui.search('');
+  // hide mobile search
+  ui.hideMobileSearch();
 
   // go to node
   if (goToNode(node.node_id) ){
@@ -624,7 +667,7 @@ function onSearchResultNodeClick(node) {
   }
 
   // fallback to showing node details since we can't go to the node
-  window.showNodeDetails(node.node_id);
+  state.selectedNode = node;
 }
 
 onMounted(() => {
@@ -669,18 +712,18 @@ onMounted(() => {
                 layers: {
                     'All': {
                         type: 'layer_control',
-                        hideAllExcept: ['nodes'],
+                        hideAllExcept: ['nodes', 'node-outlines'],
                         disableCluster: 'nodes',
                     },
                     'Routers': {
                         type: 'source_filter',
                         source: 'nodes',
-                        getter: function() { return Object.values(state.nodeMarkers) },
+                        getter: function() { return Object.values(mapData.nodeMarkers) },
                         filter: function (node) { return ['ROUTER', 'ROUTER_CLIENT', 'ROUTER_LATE', 'REPEATER'].includes(node.properties.role); }
                     },
                     'Clustered': {
                         type: 'layer_control',
-                        hideAllExcept: ['clusters', 'unclustered-points', 'cluster-count'],
+                        hideAllExcept: ['clusters', 'unclustered-points', 'cluster-count', 'node-outlines'],
                     },
                     'None': {
                         type: 'layer_control',
@@ -729,6 +772,10 @@ onMounted(() => {
                 features: [],
             }
         });
+        getMap().addSource('node-outlines', {
+            type: 'geojson',
+            data: [],
+        });
         map.addLayer({
             id: 'clusters',
             type: 'circle',
@@ -800,6 +847,17 @@ onMounted(() => {
                 'circle-stroke-color': '#ffffff'
             }
         });
+        getMap().addLayer({
+            id: 'node-outlines',
+            type: 'circle',
+            source: 'node-outlines',
+            paint: {
+                'circle-radius': ['get', 'radius'], // Use the radius from properties
+                'circle-color': 'rgba(255, 0, 0, 0.5)', // Adjust the color as needed
+                'circle-stroke-width': 2,
+                'circle-stroke-color': '#FF0000'
+            }
+        });
 
         map.on('mouseenter', 'clusters', () => {
             map.getCanvas().style.cursor = 'pointer';
@@ -827,58 +885,161 @@ onMounted(() => {
         // the unclustered-point layer, open a popup at
         // the location of the feature, with
         // description HTML from its properties.
-        map.on('click', 'unclustered-points', showPopupForEvent);
-        map.on('mouseenter', 'unclustered-points', showPopupForEvent);
-        map.on('click', 'nodes', showPopupForEvent);
-        map.on('mouseenter', 'nodes', showPopupForEvent);
+        map.on('click', 'unclustered-points', handleNodePopup);
+        map.on('mouseenter', 'unclustered-points', handleNodePopup);
+        map.on('mouseleave', 'unclustered-points', handleNodePopup);
+
+        map.on('click', 'nodes', handleNodePopup);
+        map.on('mouseenter', 'nodes', handleNodePopup);
+        map.on('mouseleave', 'nodes', handleNodePopup);
 
         layerControl.applyDefaults();
+
         reload();
     })
 });
 
-function measurePopupSize(htmlContent) {
-    const popupContainer = document.createElement('div');
-    popupContainer.className = 'maplibregl-popup maplibregl-popup-anchor-bottom';
-    popupContainer.style.position = 'absolute';
-    popupContainer.style.top = '-9999px';
-    popupContainer.style.left = '-9999px';
-    popupContainer.style.visibility = 'hidden';
+function measureTooltipSize(node) {
+  return new Promise((resolve) => {
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.top = '-9999px';
+    container.style.left = '-9999px';
+    container.style.visibility = 'hidden';
 
-    const content = document.createElement('div');
-    content.className = 'maplibregl-popup-content';
-    content.innerHTML = htmlContent;
+    document.body.appendChild(container);
 
-    popupContainer.appendChild(content);
-    document.body.appendChild(popupContainer);
+    const app = createApp(NodeTooltip, { node });
+    app.mount(container);
 
-    const width = popupContainer.offsetWidth;
-    const height = popupContainer.offsetHeight;
+    // Let Vue render
+    requestAnimationFrame(() => {
+      const width = container.offsetWidth;
+      const height = container.offsetHeight;
 
-    document.body.removeChild(popupContainer);
+      // Cleanup
+      app.unmount();
+      document.body.removeChild(container);
 
-    return { width, height };
+      resolve({ width, height });
+    });
+  });
 }
 
-function showPopupForEvent(e) {
-    if (e.features[0].popup) {
-        return; // already has a popup open
-    }
-    const map = getMap();
-    const coordinates = e.features[0].geometry.coordinates.slice();
-    const nodeId = e.features[0].properties.id;
-    const html = getTooltipContentForNode(findNodeById(nodeId));
+async function openLockedTooltipFromNode(feature) {
+    console.log('openLockedTooltipFromNode', feature);
+    const nodeId = feature?.properties?.id;
+    const node = mapData.findNodeById(nodeId ?? '');
+    const coordinates = feature?.geometry?.coordinates?.slice();
 
+    if (!node || !coordinates) return;
+
+    // Close any existing tooltip first
+    cleanupPopup();
+
+    // Show the tooltip (acts like click)
+    await showTooltip(node, coordinates);
+
+    // Lock it so it doesn't close on hover-out
+    isTooltipLocked.value = true;
+}
+
+async function handleNodePopup(e) {
+    const nodeId = e.features?.[0]?.properties?.id;
+    const node = mapData.findNodeById(nodeId ?? '');
+    const coordinates = e.features?.[0]?.geometry?.coordinates?.slice();
+
+    if ((!node || !coordinates) && e.type !== 'mouseleave') return;
+
+    // Mouseenter (hover)
+    if (e.type === 'mouseenter') {
+        if (!isTooltipLocked.value) {
+            await showTooltip(node, coordinates);
+        }
+    }
+
+    // Mouseleave
+    if (e.type === 'mouseleave') {
+        if (!isTooltipLocked.value) {
+            cleanupPopup();
+        }
+    }
+
+    // Click locks the popup open
+    if (e.type === 'click') {
+        if (!isTooltipLocked.value) {
+            // Show the tooltip and only then lock it
+            await showTooltip(node, coordinates);
+            isTooltipLocked.value = true; // Lock after showing the tooltip
+        }
+    }
+}
+
+async function showTooltip(node, coordinates) {
+    // Don't cleanup immediately if it's locked
+    if (!isTooltipLocked.value) {
+        cleanupPopup();
+    }
+
+    // Create a fresh container
+    const container = document.createElement('div');
+    popupTarget.value = container;
+    document.body.appendChild(container);
+
+    // Set it before rendering
+    selectedNode.value = node;
+
+    // Now wait for Vue to mount into the target
+    await new Promise(resolve => requestAnimationFrame(() => resolve()));
+
+    // get best anchor info
+    const bestPosition = await determineAnchorForNode(node, coordinates);
+
+    // Create MapLibre popup
+    const mapPopup = new maplibregl.Popup({
+        closeButton: false,
+        closeOnClick: true,
+        anchor: bestPosition.anchor,
+    })
+        .setLngLat(coordinates)
+        .setDOMContent(container)
+        .addTo(getMap());
+
+    popup.value = mapPopup;
+
+    mapPopup.on('close', () => {
+        isTooltipLocked.value = false;
+        cleanupPopup();
+    });
+}
+
+function cleanupPopup() {
+    try {
+        if (popup.value) {
+            popup.value.remove();
+        }
+    } catch (e) {
+        console.warn('Error removing popup:', e);
+    }
+    popup.value = null;
+    selectedNode.value = null;
+
+    if (popupTarget.value && popupTarget.value.parentNode) {
+        popupTarget.value.parentNode.removeChild(popupTarget.value);
+    }
+
+    popupTarget.value = null;
+}
+
+async function determineAnchorForNode(node, coordinates) {
+    // Measure the popup size
+    const map = getMap();
+    const { width: popupWidth, height: popupHeight } = await measureTooltipSize(node);
     const mapContainer = map.getContainer();
     const mapWidth = mapContainer.offsetWidth;
     const mapHeight = mapContainer.offsetHeight;
-    
     // Get screen point of the marker
     const screenPoint = map.project(coordinates);
-
-    // Measure the popup size
-    const { width: popupWidth, height: popupHeight } = measurePopupSize(html);
-
     // Calculate available space around the marker
     const padding = 10;
     const headerHeight = document.querySelector('header')?.offsetHeight || 0;
@@ -955,42 +1116,17 @@ function showPopupForEvent(e) {
             bestScore = visibilityScore;
             bestOption = key;
         }
-    });    
-
-    const popup = new maplibregl.Popup({
-        closeButton: true,
-        closeOnClick: true,
-        anchor: popupOptions[bestOption].anchor,
     });
 
-    popup
-        .setLngLat(coordinates)
-        .setHTML(html)
-        .addTo(map);
-    
-    if (e.type === 'mouseenter') {
-        const removePopup = () => {
-            popup.remove();
-            getMap().off('mousemove', onMouseMove);
-            getMap().getCanvas().style.cursor = '';
-        };
-        const onMouseMove = (e) => {
-            const features = getMap().queryRenderedFeatures(e.point, { layers: ['unclustered-points'] });
-            if (!features.length) {
-                removePopup();
-            }
-        };
-        getMap().on('mousemove', onMouseMove);
-    }
-    e.features[0].popup = popup;
+    return popupOptions[bestOption];
 }
 
 onMounted(() => {
   if (lastSeenAnnouncementId.value !== CURRENT_ANNOUNCEMENT_ID) {
-    state.announcementVisible = true;
+    ui.showAnnouncement();
   }
   if (!isMobile() && hasSeenInfoModal.value === false) {
-    state.infoModalVisible = true;
+    ui.showInfoModal();
   }
 })
 </script>
@@ -998,7 +1134,7 @@ onMounted(() => {
 <template>
     <div class="flex flex-col h-full w-full overflow-hidden">
         <div class="flex flex-col h-full">
-            <header>
+            <header v-click-outside="ui.clearSearch">
                 <Announcement />
                 <Header 
                 @reload="reload"
@@ -1016,4 +1152,7 @@ onMounted(() => {
     <NodeNeighborsModal @dismiss="cleanUpNodeNeighbors" />
     <NodePositionHistoryModal @dismiss="cleanUpPositionHistory" />
     <TracerouteInfo @go-to="goToNode" />
+    <Teleport v-if="popupTarget && selectedNode" :to="popupTarget">
+        <NodeTooltip :node="selectedNode" @show-neighbors="showNeighbors"/>
+    </Teleport>
 </template>
\ No newline at end of file