diff --git a/opennms-webapp-rest/src/main/java/org/opennms/web/rest/v2/DashboardRestService.java b/opennms-webapp-rest/src/main/java/org/opennms/web/rest/v2/DashboardRestService.java
new file mode 100644
index 000000000000..c7e4a252d922
--- /dev/null
+++ b/opennms-webapp-rest/src/main/java/org/opennms/web/rest/v2/DashboardRestService.java
@@ -0,0 +1,116 @@
+/*
+ * Licensed to The OpenNMS Group, Inc (TOG) under one or more
+ * contributor license agreements.  See the LICENSE.md file
+ * distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * TOG licenses this file to You under the GNU Affero General
+ * Public License Version 3 (the "License") or (at your option)
+ * any later version.  You may not use this file except in
+ * compliance with the License.  You may obtain a copy of the
+ * License at:
+ *
+ *      https://www.gnu.org/licenses/agpl-3.0.txt
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied.  See the License for the specific
+ * language governing permissions and limitations under the
+ * License.
+ */
+package org.opennms.web.rest.v2;
+
+import java.util.Comparator;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+import java.util.stream.Collectors;
+
+import javax.ws.rs.core.Response;
+import javax.ws.rs.core.Response.Status;
+
+import org.codehaus.jackson.map.ObjectMapper;
+import org.opennms.features.distributed.kvstore.api.JsonStore;
+import org.opennms.netmgt.dao.api.ServiceTypeDao;
+import org.opennms.netmgt.model.OnmsServiceType;
+import org.opennms.web.rest.v2.api.DashboardRestApi;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+/**
+ * Implementation of {@link DashboardRestApi}. Persists the single system-wide
+ * dashboard layout JSON document in the {@link JsonStore} (the same key-value
+ * store used by e.g. ResourceRestService), keyed by a fixed context/key.
+ */
+@Service
+public class DashboardRestService implements DashboardRestApi {
+    private static final Logger LOG = LoggerFactory.getLogger(DashboardRestService.class);
+
+    // One document for the whole system. Future per-user / named dashboards would
+    // vary the key while keeping the same store.
+    private static final String CONTEXT = "dashboard";
+    private static final String KEY = "system";
+
+    @Autowired
+    private JsonStore jsonStore;
+
+    @Autowired
+    private ServiceTypeDao serviceTypeDao;
+
+    private final ObjectMapper objectMapper = new ObjectMapper();
+
+    @Override
+    public Response getSystemLayout() {
+        final Optional<String> stored = jsonStore.get(KEY, CONTEXT);
+        if (stored.isEmpty()) {
+            return Response.status(Status.NOT_FOUND).build();
+        }
+        try {
+            final Map<?, ?> layout = objectMapper.readValue(stored.get(), Map.class);
+            return Response.ok(layout).build();
+        } catch (final Exception e) {
+            LOG.error("Failed to parse stored system dashboard layout", e);
+            return Response.serverError().build();
+        }
+    }
+
+    @Override
+    public Response updateSystemLayout(final Map<String, Object> layout) {
+        if (layout == null) {
+            return Response.status(Status.BAD_REQUEST).build();
+        }
+        try {
+            final String json = objectMapper.writeValueAsString(layout);
+            jsonStore.put(KEY, json, CONTEXT);
+            return Response.noContent().build();
+        } catch (final Exception e) {
+            LOG.error("Failed to store system dashboard layout", e);
+            return Response.serverError().build();
+        }
+    }
+
+    @Override
+    @Transactional(readOnly = true)
+    public Response getServiceTypes() {
+        try {
+            final List<Map<String, Object>> types = serviceTypeDao.findAll().stream()
+                    .sorted(Comparator.comparing(OnmsServiceType::getName, String.CASE_INSENSITIVE_ORDER))
+                    .map(t -> {
+                        final Map<String, Object> m = new LinkedHashMap<>();
+                        m.put("id", t.getId());
+                        m.put("name", t.getName());
+                        return m;
+                    })
+                    .collect(Collectors.toList());
+            return Response.ok(types).build();
+        } catch (final Exception e) {
+            LOG.error("Failed to list service types", e);
+            return Response.serverError().build();
+        }
+    }
+}
diff --git a/opennms-webapp-rest/src/main/java/org/opennms/web/rest/v2/api/DashboardRestApi.java b/opennms-webapp-rest/src/main/java/org/opennms/web/rest/v2/api/DashboardRestApi.java
new file mode 100644
index 000000000000..83678afaa20a
--- /dev/null
+++ b/opennms-webapp-rest/src/main/java/org/opennms/web/rest/v2/api/DashboardRestApi.java
@@ -0,0 +1,77 @@
+/*
+ * Licensed to The OpenNMS Group, Inc (TOG) under one or more
+ * contributor license agreements.  See the LICENSE.md file
+ * distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * TOG licenses this file to You under the GNU Affero General
+ * Public License Version 3 (the "License") or (at your option)
+ * any later version.  You may not use this file except in
+ * compliance with the License.  You may obtain a copy of the
+ * License at:
+ *
+ *      https://www.gnu.org/licenses/agpl-3.0.txt
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied.  See the License for the specific
+ * language governing permissions and limitations under the
+ * License.
+ */
+package org.opennms.web.rest.v2.api;
+
+import java.util.Map;
+
+import javax.ws.rs.Consumes;
+import javax.ws.rs.GET;
+import javax.ws.rs.PUT;
+import javax.ws.rs.Path;
+import javax.ws.rs.Produces;
+import javax.ws.rs.core.MediaType;
+import javax.ws.rs.core.Response;
+
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+
+/**
+ * REST API for the configurable system-wide dashboard layout (NMS-19851).
+ *
+ * A single JSON layout document is stored for the whole system. The document is
+ * opaque to the backend (the UI owns its shape); it is persisted verbatim.
+ */
+@Path("dashboard")
+@Tag(name = "Dashboard", description = "System-wide dashboard layout API V2")
+public interface DashboardRestApi {
+
+    @GET
+    @Path("system")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Operation(
+            summary = "Get the system-wide dashboard layout.",
+            description = "Returns the stored system-wide dashboard layout document, or 404 if none has been saved yet.",
+            operationId = "getSystemDashboardLayout"
+    )
+    Response getSystemLayout();
+
+    @PUT
+    @Path("system")
+    @Consumes(MediaType.APPLICATION_JSON)
+    @Produces(MediaType.APPLICATION_JSON)
+    @Operation(
+            summary = "Save the system-wide dashboard layout.",
+            description = "Replaces the stored system-wide dashboard layout document.",
+            operationId = "updateSystemDashboardLayout"
+    )
+    Response updateSystemLayout(Map<String, Object> layout);
+
+    @GET
+    @Path("service-types")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Operation(
+            summary = "List monitored service types (id + name).",
+            description = "Used by the dashboard Quick Search 'Providing service' control.",
+            operationId = "getDashboardServiceTypes"
+    )
+    Response getServiceTypes();
+}
diff --git a/opennms-webapp/src/main/webapp/WEB-INF/web.xml b/opennms-webapp/src/main/webapp/WEB-INF/web.xml
index feb0250c4d0a..b0207e9387fc 100644
--- a/opennms-webapp/src/main/webapp/WEB-INF/web.xml
+++ b/opennms-webapp/src/main/webapp/WEB-INF/web.xml
@@ -157,7 +157,7 @@
     <init-param>
       <description>Sets the header value.</description>
       <param-name>value</param-name>
-      <param-value>accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=()</param-value>
+      <param-value>accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(self), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=()</param-value>
     </init-param>
   </filter>
 
diff --git a/opennms-webapp/src/main/webapp/includes/quicksearch-box.jsp b/opennms-webapp/src/main/webapp/includes/quicksearch-box.jsp
index a9f50cf330e2..9c8f964679c1 100644
--- a/opennms-webapp/src/main/webapp/includes/quicksearch-box.jsp
+++ b/opennms-webapp/src/main/webapp/includes/quicksearch-box.jsp
@@ -83,5 +83,8 @@
         </div>
       </div>
     </form>
+    <div class="form-group" style="margin-top:0.75rem;">
+      <a class="btn btn-light btn-block" style="border:1px solid #ccc;" href="ui/#/dashboard">Try the new Dashboard (beta) &raquo;</a>
+    </div>
   </div>
 </div>
diff --git a/ui/package.json b/ui/package.json
index c7eb3ea5fa35..cd23198de4a7 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -65,11 +65,11 @@
     "@featherds/toggle-button": "^0.12.43",
     "@featherds/tooltip": "0.12.43",
     "@featherds/utils": "0.12.43",
-    "@primevue/themes": "^4.5.4",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@primevue/themes": "^4.5.4",
     "@vueuse/core": "^9.13.0",
     "ace-builds": "^1.32.6",
     "axios": "^1.15.0",
@@ -81,6 +81,7 @@
     "date-fns-tz": "^3.2.0",
     "dotenv": "^17.2.3",
     "fast-xml-parser": "^5.5.11",
+    "grid-layout-plus": "^1.1.1",
     "ip-regex": "^5.0.0",
     "is-ip": "^5.0.1",
     "is-valid-domain": "^0.1.6",
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index f9f3a75dc6ee..a8f9cbd3ab7b 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -197,6 +197,9 @@ importers:
       fast-xml-parser:
         specifier: ^5.5.11
         version: 5.6.0
+      grid-layout-plus:
+        specifier: ^1.1.1
+        version: 1.1.1(vue@3.5.33(typescript@5.4.5))
       ip-regex:
         specifier: ^5.0.0
         version: 5.0.0
@@ -717,6 +720,15 @@ packages:
   '@featherds/utils@0.12.44':
     resolution: {integrity: sha512-ic6JDH7mL5fYkqDD7Vu/caE+CbshlBDyt5clGG/0GxtYFU462RRuiEAphuyDlfA8IggHMIyQK+XUAqSJX1kkYA==}
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
   '@fortawesome/fontawesome-common-types@6.7.2':
     resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==}
     engines: {node: '>=6'}
@@ -755,6 +767,9 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@interactjs/types@1.10.27':
+    resolution: {integrity: sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -762,6 +777,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
+  '@juggle/resize-observer@3.4.0':
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+
   '@lit-labs/ssr-dom-shim@1.5.1':
     resolution: {integrity: sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==}
 
@@ -815,42 +833,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.6':
     resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.6':
     resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.6':
     resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.6':
     resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.6':
     resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.6':
     resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
@@ -955,79 +967,66 @@ packages:
     resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.60.1':
     resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.60.1':
     resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.60.1':
     resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.60.1':
     resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.60.1':
     resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==}
     cpu: [loong64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.60.1':
     resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.60.1':
     resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==}
     cpu: [ppc64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.60.1':
     resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.60.1':
     resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.60.1':
     resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.60.1':
     resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.60.1':
     resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.60.1':
     resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==}
@@ -1400,6 +1399,14 @@ packages:
     resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@vexip-ui/hooks@2.9.4':
+    resolution: {integrity: sha512-dGUiBAeHIsnSVigGSPHcuHBVqrSGW8LV+zGohvOpBfXs8Ynn5ZcSmybIWJ3G826NsicPu9rqwcJG8uvSgG4k4Q==}
+    peerDependencies:
+      vue: ^3.2.25
+
+  '@vexip-ui/utils@2.16.4':
+    resolution: {integrity: sha512-KX+Q4EsuwDp6ZlRJ7OAkiYxu52D5CVM8zpqQz/FXYV+JUtzl9T3dvxgtA8gQ0wm5Sh/xT6jp8Wo4X7tLAzRh/A==}
+
   '@vitejs/plugin-vue@5.2.4':
     resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -2239,6 +2246,11 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  grid-layout-plus@1.1.1:
+    resolution: {integrity: sha512-7CWehJubrVC8Ps5QFUlnDsp0kiREvKfi3Pdjp21EyY8BNzSusqI3Utcxvu1Y9UUKe3YExvbhJzIxHK6rorbRaQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
   hammerjs@2.0.8:
     resolution: {integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==}
     engines: {node: '>=0.8.0'}
@@ -2295,6 +2307,9 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  interactjs@1.10.27:
+    resolution: {integrity: sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==}
+
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -3765,6 +3780,17 @@ snapshots:
 
   '@featherds/utils@0.12.44': {}
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
   '@fortawesome/fontawesome-common-types@6.7.2': {}
 
   '@fortawesome/fontawesome-svg-core@6.7.2':
@@ -3795,6 +3821,8 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@interactjs/types@1.10.27': {}
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -3806,6 +3834,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@juggle/resize-observer@3.4.0': {}
+
   '@lit-labs/ssr-dom-shim@1.5.1': {}
 
   '@lit/reactive-element@2.1.2':
@@ -4715,6 +4745,15 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       eslint-visitor-keys: 3.4.3
 
+  '@vexip-ui/hooks@2.9.4(vue@3.5.33(typescript@5.4.5))':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@juggle/resize-observer': 3.4.0
+      '@vexip-ui/utils': 2.16.4
+      vue: 3.5.33(typescript@5.4.5)
+
+  '@vexip-ui/utils@2.16.4': {}
+
   '@vitejs/plugin-vue@5.2.4(vite@6.4.2(@types/node@25.6.0)(sass@1.99.0))(vue@3.5.33(typescript@5.4.5))':
     dependencies:
       vite: 6.4.2(@types/node@25.6.0)(sass@1.99.0)
@@ -5669,6 +5708,13 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  grid-layout-plus@1.1.1(vue@3.5.33(typescript@5.4.5)):
+    dependencies:
+      '@vexip-ui/hooks': 2.9.4(vue@3.5.33(typescript@5.4.5))
+      '@vexip-ui/utils': 2.16.4
+      interactjs: 1.10.27
+      vue: 3.5.33(typescript@5.4.5)
+
   hammerjs@2.0.8: {}
 
   happy-dom@9.20.3:
@@ -5715,6 +5761,10 @@ snapshots:
 
   ini@1.3.8: {}
 
+  interactjs@1.10.27:
+    dependencies:
+      '@interactjs/types': 1.10.27
+
   internmap@2.0.3: {}
 
   ip-regex@5.0.0: {}
diff --git a/ui/src/components/Dashboard/DashboardFilterControl.vue b/ui/src/components/Dashboard/DashboardFilterControl.vue
new file mode 100644
index 000000000000..2864382955d4
--- /dev/null
+++ b/ui/src/components/Dashboard/DashboardFilterControl.vue
@@ -0,0 +1,146 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Global dashboard filter (NMS-10507): surveillance categories + IP match applied
+  to every panel that declares support for them. Per-panel overrides come with the
+  options dialog in milestone 5; this is the dashboard-wide control.
+-->
+<template>
+  <PButton
+    text
+    icon="pi pi-filter"
+    :label="filterLabel"
+    @click="toggle"
+  />
+  <PPopover ref="op">
+    <div class="dashboard-filter">
+      <label class="dashboard-filter__label">Surveillance categories</label>
+      <PMultiSelect
+        v-model="categories"
+        :options="categoryOptions"
+        option-label="label"
+        option-value="value"
+        placeholder="All categories"
+        filter
+        display="chip"
+        class="dashboard-filter__field"
+      />
+
+      <label class="dashboard-filter__label">IP address match</label>
+      <PInputText
+        v-model="ipMatch"
+        placeholder="e.g. 10.1.*.*"
+        class="dashboard-filter__field"
+      />
+
+      <div class="dashboard-filter__actions">
+        <PButton
+          text
+          label="Clear"
+          @click="clear"
+        />
+        <PButton
+          label="Apply"
+          @click="apply"
+        />
+      </div>
+    </div>
+  </PPopover>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import MultiSelect from 'primevue/multiselect'
+import InputText from 'primevue/inputtext'
+import { getCategories } from '@/services/categoryService'
+import { useDashboardStore } from '@/stores/dashboardStore'
+
+const PButton = Button
+const PPopover = Popover
+const PMultiSelect = MultiSelect
+const PInputText = InputText
+
+const store = useDashboardStore()
+
+const op = ref()
+const categories = ref<string[]>([...store.layout.globalFilter.surveillanceCategories])
+const ipMatch = ref<string>(store.layout.globalFilter.ipMatch ?? '')
+const categoryOptions = ref<{ label: string; value: string }[]>([])
+
+const activeCount = computed(
+  () =>
+    store.layout.globalFilter.surveillanceCategories.length + (store.layout.globalFilter.ipMatch ? 1 : 0)
+)
+const filterLabel = computed(() => (activeCount.value ? `Filter (${activeCount.value})` : 'Filter'))
+
+const toggle = (event: Event) => op.value?.toggle(event)
+
+onMounted(async () => {
+  const resp = await getCategories()
+  if (resp) {
+    categoryOptions.value = resp.category.map((c) => ({ label: c.name, value: c.name }))
+  }
+})
+
+const apply = (event: Event) => {
+  store.setGlobalFilter({
+    surveillanceCategories: [...categories.value],
+    ipMatch: ipMatch.value.trim() ? ipMatch.value.trim() : null
+  })
+  op.value?.toggle(event)
+}
+
+const clear = () => {
+  categories.value = []
+  ipMatch.value = ''
+  store.setGlobalFilter({ surveillanceCategories: [], ipMatch: null })
+}
+</script>
+
+<style scoped lang="scss">
+.dashboard-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 18rem;
+  padding: 0.5rem;
+
+  &__label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+
+  &__field {
+    width: 100%;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/DashboardGrid.vue b/ui/src/components/Dashboard/DashboardGrid.vue
new file mode 100644
index 000000000000..59b130468746
--- /dev/null
+++ b/ui/src/components/Dashboard/DashboardGrid.vue
@@ -0,0 +1,222 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  The layout engine (milestone 2): grid-layout-plus provides drag + resize on a
+  12-column grid, enabled only in edit mode. This component is the only place that
+  knows about geometry; PanelFrame and the panel components are unchanged by it.
+  Geometry flows grid -> store via @layout-updated; panel add/remove/collapse
+  flow store -> grid via the reconcile watch (never on pure geometry changes, so
+  we don't fight the user mid-drag).
+-->
+<template>
+  <div
+    class="dashboard-grid"
+    :class="{ 'dashboard-grid--edit': editMode }"
+  >
+    <GridLayout
+      v-if="layout.length"
+      v-model:layout="layout"
+      :col-num="12"
+      :row-height="ROW_HEIGHT"
+      :margin="[12, 0]"
+      :is-draggable="editMode"
+      :is-resizable="editMode"
+      :vertical-compact="true"
+      @layout-updated="onLayoutUpdated"
+    >
+      <GridItem
+        v-for="item in layout"
+        :key="item.i"
+        :i="item.i"
+        :x="item.x"
+        :y="item.y"
+        :w="item.w"
+        :h="item.h"
+        :min-w="minW(item.i)"
+        :min-h="minH(item.i)"
+        :is-resizable="editMode && !isAuto(item.i)"
+        drag-allow-from=".p-panel-header"
+      >
+        <PanelFrame
+          v-if="getPanel(item.i)"
+          :panel="(getPanel(item.i) as DashboardPanel)"
+          @request-height="onRequestHeight"
+        />
+      </GridItem>
+    </GridLayout>
+    <div
+      v-else
+      class="dashboard-grid__empty"
+    >
+      No panels. Use “Edit” → “Add panel” to add one.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+// grid-layout-plus 1.x injects its own styles at runtime — no CSS import needed.
+import { GridLayout, GridItem } from 'grid-layout-plus'
+import PanelFrame from './PanelFrame.vue'
+import { getPanelDefinition } from './registry'
+import { useDashboardStore } from '@/stores/dashboardStore'
+import type { DashboardPanel } from '@/types/dashboard'
+
+// PIXEL-BASED grid. row-height is 1px and the vertical margin is 0, so a grid
+// cell is exactly `h` pixels tall — eliminating the coarse ~56px row quantization
+// that left big gaps under short panels. Vertical spacing between panels comes
+// from GAP (baked into each cell's h); the panel itself does not fill the gap.
+const ROW_HEIGHT = 1
+const GAP = 12 // px of empty space below each panel (visual gap between rows)
+const COLLAPSED_H = 40 + GAP // header-only height when a panel is collapsed
+const MIN_AUTO_H = 40 + GAP
+const MIN_FIXED_H = 96
+
+// Old saved layouts (and the default) store h/y in ~44px ROW units; pixel h is
+// always > 40. Convert small values up so legacy layouts render at sane sizes;
+// values already in pixels pass through unchanged (idempotent).
+const toPx = (h: number) => (h <= 40 ? Math.round(h * 56) : h)
+
+interface GridItemModel {
+  i: string
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+const store = useDashboardStore()
+const { panels, editMode } = storeToRefs(store)
+
+const getPanel = (id: string): DashboardPanel | undefined => panels.value.find((p) => p.id === id)
+
+const toItem = (p: DashboardPanel): GridItemModel => ({
+  i: p.id,
+  x: p.x,
+  y: p.y,
+  w: p.w,
+  h: p.collapsed ? COLLAPSED_H : toPx(p.h)
+})
+
+const layout = ref<GridItemModel[]>(panels.value.map(toItem))
+
+const minW = (id: string) => getPanelDefinition(getPanel(id)?.type ?? '')?.minSize?.w ?? 2
+// Auto-height panels size to content, so they may shrink to their content height.
+const minH = (id: string) => {
+  const p = getPanel(id)
+  if (p && !p.collapsed && store.resolvedHeightMode(p) === 'auto') return MIN_AUTO_H
+  return MIN_FIXED_H
+}
+
+// Vertical compaction: place each item at the lowest non-colliding y within its
+// columns. grid-layout-plus does NOT recompact on programmatic height changes,
+// so we do it ourselves to guarantee no overlaps after auto-height resizes /
+// add / remove. Only mutates the local layout (positions re-derive on load).
+const compactLayout = () => {
+  const sorted = [...layout.value].sort((a, b) => a.y - b.y || a.x - b.x)
+  const placed: GridItemModel[] = []
+  for (const it of sorted) {
+    let bottom = 0
+    for (const p of placed) {
+      const xOverlap = it.x < p.x + p.w && p.x < it.x + it.w
+      if (xOverlap) bottom = Math.max(bottom, p.y + p.h)
+    }
+    it.y = bottom
+    placed.push(it)
+  }
+  // ALWAYS reassign with FRESH item objects. grid-layout-plus only reacts to a
+  // change of the layout array reference / length (watch on [layout, length]) —
+  // it ignores in-place h/y mutations. A new array of new objects forces it to
+  // re-read and re-render (this is what makes auto-height + compaction apply).
+  layout.value = layout.value.map((it) => ({ ...it }))
+}
+
+// Reconcile the grid model on add/remove/collapse only — keeping existing items'
+// live x/y/w so an in-flight drag isn't reset.
+watch(
+  () => panels.value.map((p) => `${p.id}:${p.collapsed}`).join('|'),
+  () => {
+    const byId = new Map(layout.value.map((it) => [it.i, it]))
+    layout.value = panels.value.map((p) => {
+      const existing = byId.get(p.id)
+      if (existing) {
+        existing.h = p.collapsed ? COLLAPSED_H : toPx(p.h)
+        return existing
+      }
+      return toItem(p)
+    })
+    compactLayout()
+  }
+)
+
+const isAuto = (id: string): boolean => {
+  const p = getPanel(id)
+  return !!p && !p.collapsed && store.resolvedHeightMode(p) === 'auto'
+}
+
+// An auto-height panel reported its natural pixel height; size the grid cell to
+// exactly that height plus the inter-panel GAP (pixel-perfect, no quantization).
+const onRequestHeight = (id: string, px: number) => {
+  const item = layout.value.find((it) => it.i === id)
+  if (!item || !isAuto(id)) return
+  const h = Math.max(MIN_AUTO_H, Math.round(px) + GAP)
+  if (item.h !== h) {
+    item.h = h
+    compactLayout()
+  }
+}
+
+const onLayoutUpdated = (newLayout: GridItemModel[]) => {
+  store.syncGeometry(newLayout)
+}
+
+// After initial render, once panels have reported their auto heights, compact the
+// columns so there are no leftover gaps between short panels.
+onMounted(() => {
+  nextTick(compactLayout)
+  setTimeout(compactLayout, 400)
+  setTimeout(compactLayout, 1200)
+})
+</script>
+
+<style scoped lang="scss">
+.dashboard-grid {
+  // scroll the panel area internally so the dashboard never overflows the footer
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem;
+  padding-bottom: 1.5rem;
+
+  &--edit :deep(.vgl-item) {
+    cursor: move;
+  }
+
+  &__empty {
+    padding: 2rem;
+    text-align: center;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/DashboardToolbar.vue b/ui/src/components/Dashboard/DashboardToolbar.vue
new file mode 100644
index 000000000000..bf2ff265f6ed
--- /dev/null
+++ b/ui/src/components/Dashboard/DashboardToolbar.vue
@@ -0,0 +1,230 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Dashboard-level controls: global timeframe, refresh interval + pause (NMS-4404),
+  and the edit-mode affordances (add panel, save, done). The global filter control
+  (NMS-10507) lands in milestone 2 alongside drag/resize.
+-->
+<template>
+  <div class="dashboard-toolbar">
+    <h2 class="dashboard-toolbar__title">Home</h2>
+
+    <div class="dashboard-toolbar__controls">
+      <DashboardFilterControl />
+
+      <span
+        class="dashboard-toolbar__control"
+        title="Time range applied to panels that show time-based data (e.g. Availability). Other panels show current state."
+      >
+        <PSelect
+          v-model="timeframePreset"
+          :options="timeframeOptions"
+          option-label="label"
+          option-value="value"
+          aria-label="Dashboard timeframe"
+        />
+      </span>
+
+      <span
+        class="dashboard-toolbar__control"
+        title="How often the dashboard automatically reloads its data. Use Pause to stop auto-refresh."
+      >
+        <PSelect
+          v-model="refreshSeconds"
+          :options="refreshOptions"
+          option-label="label"
+          option-value="value"
+          aria-label="Refresh interval"
+        />
+      </span>
+
+      <PButton
+        text
+        :icon="isPaused ? 'pi pi-play' : 'pi pi-pause'"
+        :label="isPaused ? 'Resume' : 'Pause'"
+        :title="isPaused ? 'Resume automatic data refresh' : 'Pause automatic data refresh'"
+        @click="store.togglePaused()"
+      />
+
+      <PButton
+        text
+        :icon="isFullscreen ? 'pi pi-window-minimize' : 'pi pi-window-maximize'"
+        :label="isFullscreen ? 'Exit full screen' : 'Full screen'"
+        title="Show the dashboard full screen — for NOC wall displays"
+        @click="toggleFullscreen"
+      />
+
+      <template v-if="editMode">
+        <PSelect
+          v-model="panelToAdd"
+          :options="addablePanels"
+          option-label="title"
+          option-value="type"
+          placeholder="Add panel…"
+          :show-clear="false"
+          aria-label="Add panel"
+          @change="onAdd"
+        />
+        <PButton
+          text
+          label="Reset to default"
+          icon="pi pi-replay"
+          title="Replace the current layout with the built-in default dashboard (legacy homepage parity). Applied when you Save."
+          @click="onResetToDefault"
+        />
+        <PButton
+          label="Save"
+          icon="pi pi-save"
+          :disabled="!isDirty"
+          :loading="isSaving"
+          @click="store.save()"
+        />
+        <PButton
+          text
+          label="Done"
+          @click="store.setEditMode(false)"
+        />
+      </template>
+      <PButton
+        v-else
+        outlined
+        label="Edit"
+        icon="pi pi-pencil"
+        @click="store.setEditMode(true)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { TimeframePreset } from '@/types/dashboard'
+import { refreshOptions, timeframeOptions } from './timeframe'
+import { listPanelDefinitions } from './registry'
+import DashboardFilterControl from './DashboardFilterControl.vue'
+import { useDashboardStore } from '@/stores/dashboardStore'
+
+const PButton = Button
+const PSelect = Select
+
+const store = useDashboardStore()
+const { editMode, isDirty, isSaving, isPaused } = storeToRefs(store)
+
+const panelToAdd = ref<string | null>(null)
+
+const timeframePreset = computed<TimeframePreset>({
+  get: () => store.layout.globalTimeframe.preset,
+  set: (preset) => store.setGlobalTimeframe({ preset, from: null, to: null })
+})
+
+const refreshSeconds = computed<number>({
+  get: () => store.layout.refresh.seconds,
+  set: (seconds) => store.setRefreshSeconds(seconds)
+})
+
+// Offer every registered panel; duplicates are allowed (e.g. two filtered copies).
+const addablePanels = computed(() => listPanelDefinitions().map((d) => ({ type: d.type, title: d.title })))
+
+const onAdd = () => {
+  if (panelToAdd.value) {
+    store.addPanel(panelToAdd.value)
+    panelToAdd.value = null
+  }
+}
+
+const onResetToDefault = () => {
+  if (window.confirm('Replace the current layout with the built-in default dashboard? Your current arrangement is overwritten when you Save.')) {
+    store.applyFactoryDefault()
+  }
+}
+
+// Full-screen the dashboard content for NOC wall displays. Tries the Fullscreen
+// API; if it's blocked (e.g. Permissions-Policy), falls back to a CSS "maximize"
+// that fills the browser viewport over the app chrome.
+const isFullscreen = ref(false)
+const cssMaximized = ref(false)
+
+const dashboardEl = () => document.getElementById('dashboard-root')
+
+const enterCssMaximize = () => {
+  dashboardEl()?.classList.add('dashboard-maximized')
+  cssMaximized.value = true
+  isFullscreen.value = true
+}
+const exitCssMaximize = () => {
+  dashboardEl()?.classList.remove('dashboard-maximized')
+  cssMaximized.value = false
+  isFullscreen.value = false
+}
+
+const toggleFullscreen = async () => {
+  const el = dashboardEl()
+  if (!el) return
+  if (isFullscreen.value) {
+    if (document.fullscreenElement) {
+      await document.exitFullscreen().catch(() => undefined)
+    }
+    if (cssMaximized.value) exitCssMaximize()
+    return
+  }
+  try {
+    await el.requestFullscreen()
+  } catch {
+    // Fullscreen API unavailable/blocked — use CSS maximize instead.
+    enterCssMaximize()
+  }
+}
+
+const onFullscreenChange = () => {
+  // keep state in sync when the user exits via Esc
+  if (!cssMaximized.value) isFullscreen.value = !!document.fullscreenElement
+}
+
+onMounted(() => document.addEventListener('fullscreenchange', onFullscreenChange))
+onBeforeUnmount(() => document.removeEventListener('fullscreenchange', onFullscreenChange))
+</script>
+
+<style scoped lang="scss">
+.dashboard-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 0.75rem 1rem;
+
+  &__title {
+    margin: 0;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/PanelFrame.vue b/ui/src/components/Dashboard/PanelFrame.vue
new file mode 100644
index 000000000000..6ae0836977bc
--- /dev/null
+++ b/ui/src/components/Dashboard/PanelFrame.vue
@@ -0,0 +1,274 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Chrome around a single dashboard panel. The outer <div> (frameRef) is the grid
+  item content and the element we measure for auto-height (PrimeVue's component
+  ref doesn't reliably expose a DOM node). Panel surface/text use Feather theme
+  variables so the dashboard follows light/dark mode (the .open-dark theme).
+-->
+<template>
+  <div
+    ref="frameRef"
+    class="panel-frame"
+    :class="heightModeClass"
+  >
+    <PPanel
+      class="panel-frame__panel"
+      :class="{ 'panel-frame__panel--missing': !panelDef }"
+      :toggleable="collapsible"
+      :collapsed="panel.collapsed"
+      @update:collapsed="onCollapsedChange"
+    >
+      <template #header>
+        <a
+          v-if="titleHref && !editMode"
+          class="panel-frame__title panel-frame__title--link"
+          :href="titleHref"
+          :title="`Open ${displayTitle}`"
+        >{{ displayTitle }}</a>
+        <span
+          v-else
+          class="panel-frame__title"
+        >{{ displayTitle }}</span>
+      </template>
+
+      <template
+        v-if="editMode"
+        #icons
+      >
+        <button
+          v-if="renamable"
+          type="button"
+          class="p-panel-header-icon"
+          title="Rename panel"
+          @click="onRename"
+        >
+          <i class="pi pi-pencil" />
+        </button>
+        <button
+          type="button"
+          class="p-panel-header-icon"
+          title="Panel options"
+          @click="showOptions = true"
+        >
+          <i class="pi pi-cog" />
+        </button>
+        <button
+          type="button"
+          class="p-panel-header-icon"
+          title="Remove panel"
+          @click="onRemove"
+        >
+          <i class="pi pi-times" />
+        </button>
+      </template>
+
+      <component
+        :is="panelDef.component"
+        v-if="panelDef"
+        :options="panel.options"
+        :filter="resolvedFilter"
+        :timeframe="resolvedTimeframe"
+        :refresh-tick="refreshTick"
+      />
+      <div
+        v-else
+        class="panel-frame__missing"
+      >
+        Unknown panel type: <code>{{ panel.type }}</code>
+      </div>
+    </PPanel>
+  </div>
+
+  <PanelOptionsDialog
+    v-model:visible="showOptions"
+    :panel="panel"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import Panel from 'primevue/panel'
+import type { DashboardPanel } from '@/types/dashboard'
+import { getPanelDefinition } from './registry'
+import { useDashboardStore } from '@/stores/dashboardStore'
+import PanelOptionsDialog from './PanelOptionsDialog.vue'
+
+const PPanel = Panel
+
+const props = defineProps<{ panel: DashboardPanel }>()
+const emit = defineEmits<{ (e: 'request-height', id: string, px: number): void }>()
+
+const store = useDashboardStore()
+const { editMode, refreshTick } = storeToRefs(store)
+
+const frameRef = ref<HTMLElement | null>(null)
+const showOptions = ref(false)
+
+const panelDef = computed(() => getPanelDefinition(props.panel.type))
+const collapsible = computed(() => panelDef.value?.collapsible !== false)
+const renamable = computed(() => panelDef.value?.renamable !== false)
+
+const displayTitle = computed(() => props.panel.titleOverride || panelDef.value?.title || props.panel.type)
+// Legacy deep-link for the panel title (matches the front-page box headers).
+const titleHref = computed(() => panelDef.value?.titleHref ?? null)
+
+const resolvedFilter = computed(() => store.resolvedFilter(props.panel))
+const resolvedTimeframe = computed(() => store.resolvedTimeframe(props.panel))
+
+const heightMode = computed(() => store.resolvedHeightMode(props.panel))
+const heightModeClass = computed(() => (heightMode.value === 'auto' ? 'panel-frame--auto' : 'panel-frame--fixed'))
+
+// --- Auto-height: measure the frame div's natural height and fit the grid cell ---
+let resizeObserver: ResizeObserver | null = null
+
+const measure = () => {
+  if (heightMode.value !== 'auto' || props.panel.collapsed) return
+  const el = frameRef.value
+  if (el) emit('request-height', props.panel.id, el.offsetHeight)
+}
+
+const setupObserver = () => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  if (heightMode.value === 'auto' && frameRef.value) {
+    resizeObserver = new ResizeObserver(() => measure())
+    resizeObserver.observe(frameRef.value)
+  }
+  nextTick(measure)
+}
+
+onMounted(setupObserver)
+watch([heightMode, () => props.panel.collapsed], setupObserver)
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+})
+
+const onCollapsedChange = (collapsed: boolean) => {
+  store.setPanelCollapsed(props.panel.id, collapsed)
+}
+
+const onRename = () => {
+  // eslint-disable-next-line no-alert
+  const next = window.prompt('Panel title', displayTitle.value)
+  if (next !== null) {
+    store.setPanelTitle(props.panel.id, next)
+  }
+}
+
+const onRemove = () => {
+  store.removePanel(props.panel.id)
+}
+</script>
+
+<style scoped lang="scss">
+.panel-frame {
+  min-width: 0;
+
+  &--fixed {
+    // fill the grid cell minus the inter-panel gap; content scrolls inside it
+    height: calc(100% - 12px);
+    display: flex;
+    flex-direction: column;
+
+    .panel-frame__panel {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+
+      // PrimeVue 4 chain: content-container > content-wrapper > content
+      :deep(.p-panel-content-container),
+      :deep(.p-panel-content-wrapper) {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+      }
+
+      :deep(.p-panel-content) {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: auto;
+      }
+    }
+  }
+
+  &--auto {
+    height: auto;
+
+    .panel-frame__panel {
+      height: auto;
+    }
+
+    :deep(.p-panel-content) {
+      overflow: visible;
+    }
+  }
+
+  // Theme via Feather variables so panels follow light/dark mode.
+  .panel-frame__panel {
+    background: var(--feather-elevation-background-2, #ffffff);
+    color: var(--feather-primary-text-on-surface, #1f1f1f);
+    border-color: var(--feather-border-on-surface, #e0e0e0);
+
+    // tighter padding so short auto panels don't round up to an extra grid row
+    :deep(.p-panel-header) {
+      background: transparent;
+      color: var(--feather-primary-text-on-surface, #1f1f1f);
+      padding: 0.5rem 0.75rem;
+    }
+
+    :deep(.p-panel-content) {
+      background: transparent;
+      color: inherit;
+      padding: 0.5rem 0.75rem;
+    }
+
+    &--missing {
+      color: var(--feather-error, #b00020);
+    }
+  }
+
+  &__title {
+    font-weight: 600;
+    color: inherit;
+
+    &--link {
+      text-decoration: none;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__missing {
+    color: var(--feather-error, #b00020);
+    font-style: italic;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/PanelOptionsDialog.vue b/ui/src/components/Dashboard/PanelOptionsDialog.vue
new file mode 100644
index 000000000000..b8cc389ddf89
--- /dev/null
+++ b/ui/src/components/Dashboard/PanelOptionsDialog.vue
@@ -0,0 +1,367 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Per-panel options: height mode (all panels) + panel-type-specific settings. -->
+<template>
+  <PDialog
+    v-model:visible="visibleModel"
+    modal
+    :header="`Panel options — ${title}`"
+    :style="{ width: '32rem' }"
+  >
+    <div class="opts">
+      <fieldset class="opts__group">
+        <legend class="opts__legend">Panel height</legend>
+        <label class="opts__radio">
+          <input
+            v-model="heightMode"
+            type="radio"
+            value="fixed"
+          >
+          Fixed height (scrollbar)
+        </label>
+        <label class="opts__radio">
+          <input
+            v-model="heightMode"
+            type="radio"
+            value="auto"
+          >
+          Auto-fit to content
+        </label>
+      </fieldset>
+
+      <label
+        v-if="supportsShade"
+        class="opts__radio"
+      >
+        <input
+          v-model="shade"
+          type="checkbox"
+        >
+        Shade rows by severity
+      </label>
+
+      <div
+        v-if="panel.type === 'notes'"
+        class="opts__field"
+      >
+        <label class="opts__label">Notes</label>
+        <PTextarea
+          v-model="notesText"
+          rows="6"
+          auto-resize
+          class="opts__control"
+        />
+      </div>
+
+      <div
+        v-else-if="panel.type === 'html-content'"
+        class="opts__field"
+      >
+        <label class="opts__label">Content URL</label>
+        <PInputText
+          v-model="htmlUrl"
+          placeholder="/opennms/… or https://this-server/…"
+          class="opts__control"
+          :class="{ 'opts__control--error': !!urlError }"
+        />
+        <small
+          v-if="urlError"
+          class="opts__error"
+        >{{ urlError }}</small>
+        <small
+          v-else
+          class="opts__hint"
+        >
+          Loaded in an iframe. Only same-origin URLs work (the dashboard CSP is <code>frame-src 'self'</code>);
+          note many external sites also refuse to be framed.
+        </small>
+      </div>
+
+      <template v-if="panel.type === 'metric-chart'">
+        <div class="opts__field">
+          <label class="opts__label">Entity</label>
+          <PSelect
+            v-model="chartEntity"
+            :options="entityOptions"
+            :loading="entitiesLoading"
+            filter
+            class="opts__control"
+          />
+          <small class="opts__hint">Entities that have data for the selected metric.</small>
+        </div>
+        <div class="opts__field">
+          <label class="opts__label">Metric</label>
+          <PSelect
+            v-model="chartMetric"
+            :options="kpiOptions"
+            option-label="label"
+            option-value="value"
+            class="opts__control"
+          />
+        </div>
+      </template>
+
+      <template v-if="panel.type === 'topn'">
+        <div class="opts__field">
+          <label class="opts__label">Rank by (KPI)</label>
+          <PSelect
+            v-model="topnKpi"
+            :options="kpiOptions"
+            option-label="label"
+            option-value="value"
+            class="opts__control"
+          />
+        </div>
+        <fieldset class="opts__group">
+          <legend class="opts__legend">Order</legend>
+          <label class="opts__radio">
+            <input
+              v-model="topnDirection"
+              type="radio"
+              value="desc"
+            >
+            Descending (highest first)
+          </label>
+          <label class="opts__radio">
+            <input
+              v-model="topnDirection"
+              type="radio"
+              value="asc"
+            >
+            Ascending (lowest first)
+          </label>
+        </fieldset>
+        <div class="opts__field">
+          <label class="opts__label">How many (N)</label>
+          <input
+            v-model.number="topnN"
+            type="number"
+            min="1"
+            max="50"
+            class="opts__control opts__number"
+          >
+        </div>
+      </template>
+    </div>
+
+    <template #footer>
+      <PButton
+        text
+        label="Cancel"
+        @click="visibleModel = false"
+      />
+      <PButton
+        label="Apply"
+        @click="apply"
+      />
+    </template>
+  </PDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import Dialog from 'primevue/dialog'
+import Textarea from 'primevue/textarea'
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import Button from 'primevue/button'
+import type { DashboardPanel, PanelHeightMode } from '@/types/dashboard'
+import { getPanelDefinition } from './registry'
+import { useDashboardStore } from '@/stores/dashboardStore'
+import { DEFAULT_TOPN_KPI, DEFAULT_TOPN_N, TOPN_KPIS } from '@/services/topnService'
+import { DEFAULT_CHART_ENTITY, DEFAULT_CHART_METRIC, listMetricEntities } from '@/services/metricChartService'
+
+const PDialog = Dialog
+const PTextarea = Textarea
+const PInputText = InputText
+const PSelect = Select
+const PButton = Button
+
+const kpiOptions = TOPN_KPIS.map((k) => ({ label: k.label, value: k.id }))
+
+const props = defineProps<{ panel: DashboardPanel; visible: boolean }>()
+const emit = defineEmits<{ (e: 'update:visible', value: boolean): void }>()
+
+const store = useDashboardStore()
+
+const visibleModel = computed({
+  get: () => props.visible,
+  set: (v) => emit('update:visible', v)
+})
+
+const title = computed(
+  () => props.panel.titleOverride || getPanelDefinition(props.panel.type)?.title || props.panel.type
+)
+
+const heightMode = ref<PanelHeightMode>('auto')
+const shade = ref(false)
+const notesText = ref('')
+const htmlUrl = ref('')
+const topnKpi = ref(DEFAULT_TOPN_KPI)
+
+// panels that support optional severity row shading (legacy-style)
+const SHADEABLE = ['pending-situations', 'nodes-with-alarms', 'availability']
+const supportsShade = computed(() => SHADEABLE.includes(props.panel.type))
+const topnN = ref(DEFAULT_TOPN_N)
+const topnDirection = ref<'asc' | 'desc'>('desc')
+
+// metric-chart: one entity x one metric (single-select each)
+const chartEntity = ref(DEFAULT_CHART_ENTITY)
+const chartMetric = ref(DEFAULT_CHART_METRIC)
+const entityOptions = ref<string[]>([])
+const entitiesLoading = ref(false)
+
+const loadEntities = async () => {
+  entitiesLoading.value = true
+  const entities = await listMetricEntities(chartMetric.value)
+  // keep the current selection listed even if it has no data right now
+  if (chartEntity.value && !entities.includes(chartEntity.value)) {
+    entities.unshift(chartEntity.value)
+  }
+  entityOptions.value = entities
+  entitiesLoading.value = false
+}
+
+watch(chartMetric, () => {
+  if (props.panel.type === 'metric-chart' && props.visible) loadEntities()
+})
+
+// External URLs are blocked by the dashboard CSP (frame-src 'self'); validate
+// up front so the user gets an explanation instead of a silent broken iframe.
+const urlError = computed(() => {
+  const t = htmlUrl.value.trim()
+  if (!t) return ''
+  let parsed: URL
+  try {
+    parsed = new URL(t, window.location.origin)
+  } catch {
+    return 'That is not a valid URL.'
+  }
+  if (parsed.origin !== window.location.origin) {
+    return `External URLs (${parsed.origin}) are blocked by the dashboard security policy (frame-src 'self'). Use a URL on this server, or ask an admin to allow the host in the server CSP.`
+  }
+  return ''
+})
+
+const syncFromPanel = () => {
+  heightMode.value = store.resolvedHeightMode(props.panel)
+  shade.value = !!props.panel.options?.shade
+  notesText.value = String(props.panel.options?.text ?? '')
+  htmlUrl.value = String(props.panel.options?.url ?? '')
+  topnKpi.value = String(props.panel.options?.kpi ?? DEFAULT_TOPN_KPI)
+  topnN.value = Number(props.panel.options?.n ?? DEFAULT_TOPN_N)
+  topnDirection.value = props.panel.options?.direction === 'asc' ? 'asc' : 'desc'
+  chartEntity.value = String(props.panel.options?.entity ?? DEFAULT_CHART_ENTITY)
+  chartMetric.value = String(props.panel.options?.metric ?? DEFAULT_CHART_METRIC)
+  if (props.panel.type === 'metric-chart') loadEntities()
+}
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (v) syncFromPanel()
+  }
+)
+
+const apply = () => {
+  if (props.panel.type === 'html-content' && urlError.value) {
+    return // keep the dialog open; the error is shown inline
+  }
+  store.setPanelHeightMode(props.panel.id, heightMode.value)
+  const opts: Record<string, unknown> = { ...props.panel.options }
+  if (supportsShade.value) opts.shade = shade.value
+  if (props.panel.type === 'notes') opts.text = notesText.value
+  if (props.panel.type === 'html-content') opts.url = htmlUrl.value.trim()
+  if (props.panel.type === 'topn') {
+    opts.kpi = topnKpi.value
+    opts.n = Math.min(50, Math.max(1, Number(topnN.value) || DEFAULT_TOPN_N))
+    opts.direction = topnDirection.value
+  }
+  if (props.panel.type === 'metric-chart') {
+    opts.entity = chartEntity.value
+    opts.metric = chartMetric.value
+  }
+  store.setPanelOptions(props.panel.id, opts)
+  visibleModel.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.opts {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__group {
+    border: 1px solid var(--feather-border-on-surface, #ddd);
+    border-radius: 4px;
+    padding: 0.5rem 0.75rem;
+  }
+
+  &__legend {
+    font-weight: 600;
+    padding: 0 0.25rem;
+  }
+
+  &__radio {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.2rem 0;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  &__label {
+    font-weight: 600;
+  }
+
+  &__control {
+    width: 100%;
+  }
+
+  &__hint {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__error {
+    color: var(--feather-error, #b00020);
+  }
+
+  &__control--error {
+    outline: 1px solid var(--feather-error, #b00020);
+    border-radius: 4px;
+  }
+
+  &__number {
+    width: 6rem;
+    padding: 0.4rem 0.5rem;
+    border: 1px solid var(--feather-border-on-surface, #ccc);
+    border-radius: 4px;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/defaultLayout.ts b/ui/src/components/Dashboard/defaultLayout.ts
new file mode 100644
index 000000000000..a4b49543c3b9
--- /dev/null
+++ b/ui/src/components/Dashboard/defaultLayout.ts
@@ -0,0 +1,70 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { type DashboardLayout, type DashboardPanel, TimeframePreset } from '@/types/dashboard'
+
+const panel = (id: string, type: string, x: number, y: number, w: number, h: number): DashboardPanel => ({
+  id,
+  type,
+  x,
+  y,
+  w,
+  h,
+  collapsed: false,
+  titleOverride: null,
+  filterOverride: null,
+  timeframeOverride: null,
+  refreshSeconds: null,
+  options: {}
+})
+
+// Built-in default used until the backend (NMS-19851) persists a layout, and
+// as the "reset" target. A factory (not a constant) so each load gets a fresh,
+// independently-mutable object.
+export const createDefaultLayout = (): DashboardLayout => ({
+  scope: 'SYSTEM',
+  version: 1,
+  refresh: { seconds: 120, paused: false },
+  globalFilter: { surveillanceCategories: [], ipMatch: null },
+  globalTimeframe: { preset: TimeframePreset.Last24h, from: null, to: null },
+  // Three columns with a wider middle (3 / 6 / 3 of 12), matching the legacy
+  // homepage column order/positions for easy side-by-side comparison:
+  //   Left   : Situations, Nodes w/ Alarms, Service Outages, Business Services,
+  //            Applications, News Feed
+  //   Center : Status Overview, Availability (24h), Regional Status map
+  //   Right  : Notifications, Resource Graphs, KSC Reports, Quick Search
+  panels: [
+    panel('situations-1', 'pending-situations', 0, 0, 3, 3),
+    panel('nodes-1', 'nodes-with-alarms', 0, 3, 3, 5),
+    panel('outages-1', 'service-outages', 0, 8, 3, 3),
+    panel('bsm-1', 'business-services', 0, 11, 3, 3),
+    panel('apps-1', 'applications', 0, 14, 3, 3),
+    panel('news-1', 'newsfeed', 0, 17, 3, 5),
+    panel('status-1', 'status-overview', 3, 0, 6, 5),
+    panel('availability-1', 'availability', 3, 5, 6, 4),
+    panel('map-1', 'regional-map', 3, 9, 6, 7),
+    panel('notif-1', 'notifications', 9, 0, 3, 3),
+    panel('graphs-1', 'resource-graphs', 9, 3, 3, 2),
+    panel('ksc-1', 'ksc-reports', 9, 5, 3, 2),
+    panel('quicksearch-1', 'quick-search', 9, 7, 3, 5)
+  ]
+})
diff --git a/ui/src/components/Dashboard/panels/ApplicationsPanel.vue b/ui/src/components/Dashboard/panels/ApplicationsPanel.vue
new file mode 100644
index 000000000000..33fbea56bf77
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/ApplicationsPanel.vue
@@ -0,0 +1,38 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Dashboard panel replicating the legacy "Applications with Pending Alarms" box. -->
+<template>
+  <StatusListPanel
+    empty-text="There are no pending alarms."
+    :loader="getApplicationsStatus"
+    :refresh-tick="refreshTick"
+  />
+</template>
+
+<script setup lang="ts">
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getApplicationsStatus } from '@/services/statusService'
+import StatusListPanel from './StatusListPanel.vue'
+
+defineProps<PanelComponentProps>()
+</script>
diff --git a/ui/src/components/Dashboard/panels/AvailabilityPanel.vue b/ui/src/components/Dashboard/panels/AvailabilityPanel.vue
new file mode 100644
index 000000000000..70ee2477ce10
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/AvailabilityPanel.vue
@@ -0,0 +1,160 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Dashboard panel replicating the legacy "Availability Over the Past 24 Hours" box. -->
+<template>
+  <div class="avail">
+    <p
+      v-if="loading"
+      class="avail__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!sections.length"
+      class="avail__muted"
+    >
+      No availability data.
+    </p>
+    <table
+      v-else
+      class="avail__table"
+    >
+      <thead>
+        <tr>
+          <th class="avail__cat">Categories</th>
+          <th class="avail__num">Outages</th>
+          <th class="avail__num">Availability</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template
+          v-for="section in sections"
+          :key="section.name"
+        >
+          <tr
+            v-for="cat in section.categories"
+            :key="section.name + '/' + cat.name"
+            :class="{ 'avail__total': isTotal(section) }"
+            :style="shade && !isTotal(section) ? { backgroundColor: severityTint(cat.availabilityClass) } : undefined"
+          >
+            <td class="avail__cat">
+              <a
+                v-if="!isTotal(section)"
+                :href="categoryLink(cat.name)"
+                :title="`Outage details for ${cat.name}`"
+              >{{ cat.name }}</a>
+              <template v-else>{{ cat.name }}</template>
+            </td>
+            <td class="avail__num">{{ cat.outageText }}</td>
+            <td
+              class="avail__num"
+              :style="{ color: severityColor(cat.availabilityClass) }"
+            >{{ cat.availabilityText }}</td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getAvailability, type AvailabilitySection } from '@/services/availabilityService'
+import { severityColor, severityTint } from '../severity'
+
+const props = defineProps<PanelComponentProps>()
+
+const shade = computed(() => !!props.options?.shade)
+
+const loading = ref(true)
+const sections = ref<AvailabilitySection[]>([])
+
+// The REST response already includes a "Total" section holding the real
+// "Overall Service Availability" row — render it as the bold total (don't add
+// our own, which previously produced a duplicate).
+const isTotal = (s: AvailabilitySection) => s.name === 'Total'
+
+// Category name links to the legacy RTC outage detail page (categories-box.jsp).
+const categoryLink = (name: string) =>
+  `/opennms/rtc/category.jsp?showoutages=avail&category=${encodeURIComponent(name)}`
+
+const load = async () => {
+  loading.value = true
+  sections.value = await getAvailability()
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.refreshTick, load)
+</script>
+
+<style scoped lang="scss">
+.avail {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th {
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 2px solid var(--feather-border-on-surface, #ccc);
+    padding: 0.25rem 0.5rem;
+  }
+
+  td {
+    padding: 0.2rem 0.5rem;
+    border-bottom: 1px solid var(--feather-border-on-surface, #eee);
+  }
+
+  &__num {
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  &__cat {
+    text-align: left;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__total td {
+    font-weight: 700;
+    border-top: 2px solid var(--feather-border-on-surface, #ccc);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/BusinessServicesPanel.vue b/ui/src/components/Dashboard/panels/BusinessServicesPanel.vue
new file mode 100644
index 000000000000..267a87335f95
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/BusinessServicesPanel.vue
@@ -0,0 +1,38 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Dashboard panel replicating the legacy "Business Services with Pending Alarms" box. -->
+<template>
+  <StatusListPanel
+    empty-text="There are no pending alarms."
+    :loader="getBusinessServicesStatus"
+    :refresh-tick="refreshTick"
+  />
+</template>
+
+<script setup lang="ts">
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getBusinessServicesStatus } from '@/services/statusService'
+import StatusListPanel from './StatusListPanel.vue'
+
+defineProps<PanelComponentProps>()
+</script>
diff --git a/ui/src/components/Dashboard/panels/HtmlContentPanel.vue b/ui/src/components/Dashboard/panels/HtmlContentPanel.vue
new file mode 100644
index 000000000000..2c0d5472a422
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/HtmlContentPanel.vue
@@ -0,0 +1,66 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- HTML Content panel: loads a user-provided URL in an iframe (edit via gear). -->
+<template>
+  <div class="html-content">
+    <iframe
+      v-if="url"
+      :src="url"
+      class="html-content__frame"
+      title="Panel content"
+      sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+    />
+    <p
+      v-else
+      class="html-content__empty"
+    >
+      No URL set. In Edit mode, open this panel's options (⚙) to provide a URL.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+
+const props = defineProps<PanelComponentProps>()
+
+const url = computed(() => String(props.options?.url ?? ''))
+</script>
+
+<style scoped lang="scss">
+.html-content {
+  height: 100%;
+
+  &__frame {
+    width: 100%;
+    height: 100%;
+    min-height: 200px;
+    border: 0;
+  }
+
+  &__empty {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/KscReportsPanel.vue b/ui/src/components/Dashboard/panels/KscReportsPanel.vue
new file mode 100644
index 000000000000..0562e21fd192
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/KscReportsPanel.vue
@@ -0,0 +1,87 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Dashboard panel for the legacy "KSC Reports" search box. Simplified launcher:
+  links to the KSC report list. (Full report-name typeahead is a follow-up.)
+-->
+<template>
+  <div class="search-box">
+    <form
+      class="search-box__form"
+      action="/opennms/KSC/index.jsp"
+      method="get"
+    >
+      <input
+        class="search-box__text"
+        name="report"
+        placeholder="Type the KSC report name"
+      >
+      <button
+        class="search-box__btn"
+        type="submit"
+        title="Open KSC reports"
+      >
+        <i class="pi pi-search" />
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PanelComponentProps } from '@/types/dashboard'
+
+defineProps<PanelComponentProps>()
+</script>
+
+<style scoped lang="scss">
+.search-box {
+  font-size: 0.875rem;
+
+  &__lead {
+    margin: 0 0 0.5rem;
+    font-weight: 600;
+  }
+
+  &__form {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  &__text {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid var(--feather-border-on-surface, #ccc);
+    border-radius: 4px;
+  }
+
+  &__btn {
+    flex: 0 0 auto;
+    padding: 0.3rem 0.6rem;
+    border: 1px solid var(--feather-border-on-surface, #ccc);
+    border-radius: 4px;
+    background: var(--feather-surface, #fff);
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/MetricChartPanel.vue b/ui/src/components/Dashboard/panels/MetricChartPanel.vue
new file mode 100644
index 000000000000..cc54713bbbbf
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/MetricChartPanel.vue
@@ -0,0 +1,222 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Metric-chart panel: a line chart of one metric on one entity over the
+  (resolved) timeframe. Entity and metric are picked via the panel options
+  (gear), one of each. Defaults: localhost / Node Response Time (ICMP).
+-->
+<template>
+  <div
+    ref="rootRef"
+    class="metric-chart"
+  >
+    <div class="metric-chart__plot">
+      <canvas ref="canvasRef" />
+    </div>
+    <p
+      v-if="loading"
+      class="metric-chart__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="empty"
+      class="metric-chart__muted"
+    >
+      No data for {{ entity }} — {{ metricLabel }} in this timeframe.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import Chart from 'chart.js/auto'
+import { format } from 'date-fns'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { TOPN_KPIS } from '@/services/topnService'
+import {
+  DEFAULT_CHART_ENTITY,
+  DEFAULT_CHART_METRIC,
+  queryMetricSeries,
+  type MetricSeries
+} from '@/services/metricChartService'
+
+const props = defineProps<PanelComponentProps>()
+
+const LINE_COLOR = '#3a87ad' // legacy OpenNMS chart blue
+const FILL_COLOR = 'rgba(58, 135, 173, 0.15)'
+
+const rootRef = ref<HTMLElement | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const loading = ref(true)
+const empty = ref(false)
+
+let chart: Chart<'line', (number | null)[], string> | null = null
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let series: MetricSeries | null = null
+
+const metricId = computed(() => String(props.options?.metric ?? DEFAULT_CHART_METRIC))
+const entity = computed(() => String(props.options?.entity ?? DEFAULT_CHART_ENTITY))
+const metricLabel = computed(() => TOPN_KPIS.find((k) => k.id === metricId.value)?.label ?? metricId.value)
+
+// Axis/grid colors must follow the theme (same approach as Status Overview).
+const textColor = (): string => {
+  const el = rootRef.value
+  if (el) {
+    const c = getComputedStyle(el).getPropertyValue('--feather-primary-text-on-surface').trim()
+    if (c) return c
+  }
+  return '#333333'
+}
+const gridColor = () => 'rgba(128, 128, 128, 0.2)'
+
+// No chart.js date adapter in this app — use a category axis with labels
+// formatted by range (time-only within ~2 days, date+time beyond).
+const timeLabels = (s: MetricSeries): string[] => {
+  const span = (s.timestamps[s.timestamps.length - 1] ?? 0) - (s.timestamps[0] ?? 0)
+  const fmt = span <= 48 * 3_600_000 ? 'HH:mm' : 'MMM d HH:mm'
+  return s.timestamps.map((t) => format(new Date(t), fmt))
+}
+
+const render = () => {
+  const canvas = canvasRef.value
+  if (!canvas || !series) return
+  const labels = timeLabels(series)
+  const data = series.values
+  const datasetLabel = `${entity.value} — ${metricLabel.value} (${series.unit})`
+  const color = textColor()
+
+  if (chart) {
+    chart.data.labels = labels
+    chart.data.datasets[0].data = data
+    chart.data.datasets[0].label = datasetLabel
+    const o = chart.options
+    if (o.plugins?.legend?.labels) o.plugins.legend.labels.color = color
+    if (o.scales?.x?.ticks) o.scales.x.ticks.color = color
+    if (o.scales?.y?.ticks) o.scales.y.ticks.color = color
+    if (o.scales?.y && 'title' in o.scales.y && o.scales.y.title) o.scales.y.title.color = color
+    chart.update()
+    return
+  }
+
+  chart = new Chart(canvas, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: datasetLabel,
+          data,
+          borderColor: LINE_COLOR,
+          backgroundColor: FILL_COLOR,
+          borderWidth: 2,
+          pointRadius: 0,
+          pointHitRadius: 8,
+          tension: 0.2,
+          fill: true,
+          spanGaps: true
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: { legend: { position: 'bottom', labels: { color, boxWidth: 12 } } },
+      scales: {
+        x: {
+          ticks: { color, maxTicksLimit: 8, maxRotation: 0, autoSkip: true },
+          grid: { color: gridColor() }
+        },
+        y: {
+          beginAtZero: true,
+          title: { display: true, text: series.unit, color },
+          ticks: { color },
+          grid: { color: gridColor() }
+        }
+      }
+    }
+  })
+}
+
+const load = async () => {
+  loading.value = true
+  series = await queryMetricSeries(metricId.value, entity.value, props.timeframe)
+  empty.value = !series
+  loading.value = false
+  await nextTick()
+  if (series) {
+    render()
+  } else if (chart) {
+    chart.destroy()
+    chart = null
+  }
+}
+
+onMounted(() => {
+  load()
+  if (rootRef.value) {
+    resizeObserver = new ResizeObserver(() => chart?.resize())
+    resizeObserver.observe(rootRef.value)
+  }
+  // recolor axes/legend when the .open-dark theme is toggled
+  themeObserver = new MutationObserver(render)
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })
+})
+
+watch(
+  [() => props.refreshTick, metricId, entity, () => props.timeframe.preset, () => props.timeframe.from, () => props.timeframe.to],
+  load
+)
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  themeObserver?.disconnect()
+  themeObserver = null
+  chart?.destroy()
+  chart = null
+})
+</script>
+
+<style scoped lang="scss">
+.metric-chart {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &__plot {
+    flex: 1 1 auto;
+    min-height: 0;
+    position: relative;
+  }
+
+  &__muted {
+    text-align: center;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/NewsFeedPanel.vue b/ui/src/components/Dashboard/panels/NewsFeedPanel.vue
new file mode 100644
index 000000000000..501780dc5b2c
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/NewsFeedPanel.vue
@@ -0,0 +1,129 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Dashboard panel replicating the legacy OpenNMS News Feed box. -->
+<template>
+  <div class="news-feed">
+    <p
+      v-if="loading"
+      class="news-feed__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!items.length"
+      class="news-feed__muted"
+    >
+      No news available.
+    </p>
+    <ul
+      v-else
+      class="news-feed__list"
+    >
+      <li
+        v-for="(item, idx) in items"
+        :key="idx"
+        class="news-feed__item"
+      >
+        <a
+          class="news-feed__title"
+          :href="item.link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >{{ item.title }}</a>
+        <p class="news-feed__desc">{{ item.shortDescription }}</p>
+        <p
+          v-if="item.tags?.length"
+          class="news-feed__tags"
+        >
+          <span
+            v-for="tag in item.tags"
+            :key="tag"
+            class="news-feed__tag"
+          >#{{ tag }}</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getNewsFeed, type NewsFeedItem } from '@/services/newsfeedService'
+
+const props = defineProps<PanelComponentProps>()
+
+const loading = ref(true)
+const items = ref<NewsFeedItem[]>([])
+
+const load = async () => {
+  loading.value = true
+  items.value = await getNewsFeed()
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.refreshTick, load)
+</script>
+
+<style scoped lang="scss">
+.news-feed {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--feather-border-on-surface, #e0e0e0);
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__desc {
+    margin: 0.25rem 0 0;
+    color: var(--feather-secondary-text-on-surface, #555);
+  }
+
+  &__tags {
+    margin: 0.25rem 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  &__tag {
+    font-size: 0.75rem;
+    color: var(--feather-secondary-text-on-surface, #888);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/NodesWithAlarmsPanel.vue b/ui/src/components/Dashboard/panels/NodesWithAlarmsPanel.vue
new file mode 100644
index 000000000000..7aa971b20ffb
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/NodesWithAlarmsPanel.vue
@@ -0,0 +1,161 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Dashboard panel replicating the legacy alarm summary-box: nodes that currently
+  have alarms, with their alarm count and highest severity. Alarms are fetched
+  and grouped by node client-side.
+-->
+<template>
+  <div class="nodes-alarms">
+    <p
+      v-if="loading"
+      class="nodes-alarms__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!rows.length"
+      class="nodes-alarms__muted"
+    >
+      There are no nodes with pending alarms.
+    </p>
+    <ul
+      v-else
+      class="nodes-alarms__list"
+    >
+      <li
+        v-for="row in rows"
+        :key="row.nodeId"
+        class="nodes-alarms__row"
+        :style="shade ? { backgroundColor: severityTint(row.maxSeverity) } : undefined"
+      >
+        <span
+          class="nodes-alarms__sev"
+          :style="{ backgroundColor: severityColor(row.maxSeverity) }"
+          :title="severityLabel(row.maxSeverity)"
+        />
+        <a
+          class="nodes-alarms__node"
+          :href="`/opennms/element/node.jsp?node=${row.nodeId}`"
+        >{{ row.nodeLabel }}</a>
+        <span class="nodes-alarms__count">{{ row.count }} alarm{{ row.count === 1 ? '' : 's' }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { SORT } from '@featherds/table'
+import type { PanelComponentProps } from '@/types/dashboard'
+import type { Alarm } from '@/types'
+import { getAlarms } from '@/services/alarmService'
+import { maxSeverity, severityColor, severityLabel, severityTint } from '../severity'
+
+interface NodeAlarmRow {
+  nodeId: number
+  nodeLabel: string
+  count: number
+  maxSeverity: string
+}
+
+const props = defineProps<PanelComponentProps>()
+
+const loading = ref(true)
+const rows = ref<NodeAlarmRow[]>([])
+const shade = computed(() => !!props.options?.shade)
+
+const MAX_ROWS = 12
+
+const load = async () => {
+  loading.value = true
+  const resp = await getAlarms({ limit: 250, orderBy: 'lastEventTime', order: SORT.DESCENDING })
+  const alarms: Alarm[] = resp ? resp.alarm : []
+
+  const byNode = new Map<number, NodeAlarmRow>()
+  for (const a of alarms) {
+    if (a.nodeId == null) continue
+    const existing = byNode.get(a.nodeId)
+    if (existing) {
+      existing.count += 1
+      existing.maxSeverity = maxSeverity([existing.maxSeverity, a.severity])
+    } else {
+      byNode.set(a.nodeId, {
+        nodeId: a.nodeId,
+        nodeLabel: a.nodeLabel ?? `Node ${a.nodeId}`,
+        count: 1,
+        maxSeverity: a.severity
+      })
+    }
+  }
+
+  rows.value = [...byNode.values()].slice(0, MAX_ROWS)
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.refreshTick, load)
+</script>
+
+<style scoped lang="scss">
+.nodes-alarms {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--feather-border-on-surface, #e0e0e0);
+  }
+
+  &__sev {
+    flex: 0 0 auto;
+    width: 0.5rem;
+    height: 1.1rem;
+    border-radius: 2px;
+  }
+
+  &__node {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__count {
+    flex: 0 0 auto;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/NotesPanel.vue b/ui/src/components/Dashboard/panels/NotesPanel.vue
new file mode 100644
index 000000000000..2f7b32398b37
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/NotesPanel.vue
@@ -0,0 +1,65 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Free-text Notes panel. Text is stored in the panel options (edit via gear). -->
+<template>
+  <div class="notes">
+    <p
+      v-if="text"
+      class="notes__text"
+    >
+      {{ text }}
+    </p>
+    <p
+      v-else
+      class="notes__empty"
+    >
+      No notes yet. In Edit mode, open this panel's options (⚙) to add text.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+
+const props = defineProps<PanelComponentProps>()
+
+const text = computed(() => String(props.options?.text ?? ''))
+</script>
+
+<style scoped lang="scss">
+.notes {
+  font-size: 0.875rem;
+
+  &__text {
+    margin: 0;
+    white-space: pre-wrap; // preserve line breaks / spacing from the textarea
+    word-break: break-word;
+  }
+
+  &__empty {
+    margin: 0;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/NotificationsPanel.vue b/ui/src/components/Dashboard/panels/NotificationsPanel.vue
new file mode 100644
index 000000000000..4ef0e8f8969c
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/NotificationsPanel.vue
@@ -0,0 +1,98 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Dashboard panel replicating the legacy notification-box. -->
+<template>
+  <div class="notif-panel">
+    <p
+      v-if="loading"
+      class="notif-panel__muted"
+    >
+      Loading…
+    </p>
+    <template v-else-if="summary">
+      <p>
+        <i class="pi pi-user" />
+        You have
+        <a :href="userLink">{{ phrase(summary.userUnacknowledgedCount) }}</a>
+      </p>
+      <p>
+        <i class="pi pi-users" />
+        There {{ summary.teamUnacknowledgedCount === 1 ? 'is' : 'are' }}
+        <a :href="teamLink">{{ phrase(summary.teamUnacknowledgedCount) }}</a>
+      </p>
+      <p>
+        <i class="pi pi-calendar" />
+        <a href="/opennms/roles">On-Call Schedule</a>
+      </p>
+    </template>
+    <p
+      v-else
+      class="notif-panel__muted"
+    >
+      Unable to load notifications.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getNotificationSummary, type NotificationSummary } from '@/services/notificationService'
+
+const props = defineProps<PanelComponentProps>()
+
+const loading = ref(true)
+const summary = ref<NotificationSummary | null>(null)
+
+const userLink = '/opennms/notification/browse?acktype=unack&filtertype=user'
+const teamLink = '/opennms/notification/browse?acktype=unack'
+
+const phrase = (n: number) => (n === 0 ? 'no outstanding notices' : `${n} outstanding notice${n === 1 ? '' : 's'}`)
+
+const load = async () => {
+  loading.value = true
+  const result = await getNotificationSummary()
+  summary.value = result || null
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.refreshTick, load)
+</script>
+
+<style scoped lang="scss">
+.notif-panel {
+  font-size: 0.875rem;
+
+  p {
+    margin: 0 0 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/OutagesPanel.vue b/ui/src/components/Dashboard/panels/OutagesPanel.vue
new file mode 100644
index 000000000000..917fb4a97250
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/OutagesPanel.vue
@@ -0,0 +1,122 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Dashboard panel replicating the legacy "Nodes with Service Outages" box. -->
+<template>
+  <div class="outages">
+    <p
+      v-if="loading"
+      class="outages__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!outages.length"
+      class="outages__muted"
+    >
+      There are no current outages.
+    </p>
+    <ul
+      v-else
+      class="outages__list"
+    >
+      <li
+        v-for="(o, idx) in outages"
+        :key="o.id ?? idx"
+        class="outages__row"
+      >
+        <span class="outages__dot" />
+        <a
+          class="outages__node"
+          :href="`/opennms/element/node.jsp?node=${o.nodeId}`"
+        >{{ o.nodeLabel ?? `Node ${o.nodeId}` }}</a>
+        <span class="outages__svc">{{ serviceName(o) }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getCurrentOutages, outageServiceName, type CurrentOutage } from '@/services/outageService'
+
+const props = defineProps<PanelComponentProps>()
+
+const loading = ref(true)
+const outages = ref<CurrentOutage[]>([])
+
+const serviceName = outageServiceName
+
+const load = async () => {
+  loading.value = true
+  outages.value = await getCurrentOutages()
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.refreshTick, load)
+</script>
+
+<style scoped lang="scss">
+.outages {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--feather-border-on-surface, #e0e0e0);
+  }
+
+  &__dot {
+    flex: 0 0 auto;
+    width: 0.5rem;
+    height: 1.1rem;
+    border-radius: 2px;
+    background-color: #cc0000;
+  }
+
+  &__node {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__svc {
+    flex: 0 0 auto;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/QuickSearchPanel.vue b/ui/src/components/Dashboard/panels/QuickSearchPanel.vue
new file mode 100644
index 000000000000..52b55b47299c
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/QuickSearchPanel.vue
@@ -0,0 +1,147 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Dashboard panel replicating the legacy Quick Search box: simple forms that GET
+  to element/nodeList.htm (node id / label / IP), matching quicksearch-box.jsp.
+-->
+<template>
+  <div class="quick-search">
+    <form
+      v-for="field in fields"
+      :key="field.name"
+      class="quick-search__row"
+      action="/opennms/element/nodeList.htm"
+      method="get"
+    >
+      <label class="quick-search__label">{{ field.label }}</label>
+      <input
+        type="hidden"
+        name="listInterfaces"
+        :value="field.listInterfaces"
+      >
+      <div class="quick-search__input">
+        <input
+          class="quick-search__text"
+          :name="field.name"
+          :placeholder="field.placeholder"
+        >
+        <button
+          class="quick-search__btn"
+          type="submit"
+          :title="`Search by ${field.label}`"
+        >
+          <i class="pi pi-search" />
+        </button>
+      </div>
+    </form>
+
+    <form
+      v-if="services.length"
+      class="quick-search__row"
+      action="/opennms/element/nodeList.htm"
+      method="get"
+    >
+      <label class="quick-search__label">Providing service</label>
+      <input
+        type="hidden"
+        name="listInterfaces"
+        value="false"
+      >
+      <div class="quick-search__input">
+        <select
+          class="quick-search__text"
+          name="service"
+        >
+          <option
+            v-for="svc in services"
+            :key="svc.id"
+            :value="svc.id"
+          >{{ svc.name }}</option>
+        </select>
+        <button
+          class="quick-search__btn"
+          type="submit"
+          title="Search by providing service"
+        >
+          <i class="pi pi-search" />
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getServiceTypes, type ServiceType } from '@/services/dashboardService'
+
+defineProps<PanelComponentProps>()
+
+const fields = [
+  { label: 'Node ID', name: 'nodeId', placeholder: 'Node ID', listInterfaces: 'false' },
+  { label: 'Node label', name: 'nodename', placeholder: 'localhost', listInterfaces: 'true' },
+  { label: 'TCP/IP Address', name: 'iplike', placeholder: '*.*.*.* or *:*:*:*:*:*:*:*', listInterfaces: 'false' }
+]
+
+const services = ref<ServiceType[]>([])
+onMounted(async () => {
+  services.value = await getServiceTypes()
+})
+</script>
+
+<style scoped lang="scss">
+.quick-search {
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 0.15rem;
+  }
+
+  &__input {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  &__text {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid var(--feather-border-on-surface, #ccc);
+    border-radius: 4px;
+  }
+
+  &__btn {
+    flex: 0 0 auto;
+    padding: 0.3rem 0.6rem;
+    border: 1px solid var(--feather-border-on-surface, #ccc);
+    border-radius: 4px;
+    background: var(--feather-surface, #fff);
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/RegionalMapPanel.vue b/ui/src/components/Dashboard/panels/RegionalMapPanel.vue
new file mode 100644
index 000000000000..3dfba4d876f2
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/RegionalMapPanel.vue
@@ -0,0 +1,239 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Dashboard panel replicating the legacy "Regional Status" map: geolocated nodes
+  on a Leaflet/OSM map, markers colored by each node's highest alarm severity.
+  Reuses the modern UI's node geo data (/api/v2/nodes assetRecord) + vue-leaflet.
+-->
+<template>
+  <div
+    ref="containerRef"
+    class="map-panel"
+  >
+    <LMap
+      ref="mapRef"
+      :zoom="zoom"
+      :center="center"
+      :max-zoom="19"
+      :min-zoom="1"
+      :use-global-leaflet="false"
+      @ready="onReady"
+    >
+      <template v-if="ready">
+        <LTileLayer
+          :url="tileUrl"
+          :attribution="attribution"
+        />
+        <LMarker
+          v-for="m in markers"
+          :key="m.id"
+          :lat-lng="[m.lat, m.lng]"
+        >
+          <LIcon
+            :icon-url="iconFor(m.severity)"
+            :icon-size="[16, 16]"
+          />
+        </LMarker>
+      </template>
+    </LMap>
+    <div
+      v-if="loading"
+      class="map-panel__overlay"
+    >
+      Loading…
+    </div>
+    <div
+      v-else-if="!markers.length"
+      class="map-panel__overlay"
+    >
+      No geolocated nodes.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import 'leaflet/dist/leaflet.css'
+import { LMap, LTileLayer, LMarker, LIcon } from '@vue-leaflet/vue-leaflet'
+import type { Map as LeafletMapType } from 'leaflet'
+import API from '@/services'
+import type { Alarm, Node } from '@/types'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { maxSeverity } from '../severity'
+import CriticalIcon from '@/assets/Critical-icon.png'
+import MajorIcon from '@/assets/Major-icon.png'
+import MinorIcon from '@/assets/Minor-icon.png'
+import WarningIcon from '@/assets/Warning-icon.png'
+import NormalIcon from '@/assets/Normal-icon.png'
+
+const props = defineProps<PanelComponentProps>()
+
+interface MapMarker {
+  id: number
+  lat: number
+  lng: number
+  severity: string
+  label: string
+}
+
+// Remember the user's pan/zoom across reloads (per browser).
+const VIEW_KEY = 'opennms.dashboard.regionalMap.view'
+interface SavedView {
+  lat: number
+  lng: number
+  zoom: number
+}
+const loadSavedView = (): SavedView | null => {
+  try {
+    const s = localStorage.getItem(VIEW_KEY)
+    return s ? (JSON.parse(s) as SavedView) : null
+  } catch {
+    return null
+  }
+}
+const saved = loadSavedView()
+
+const containerRef = ref<HTMLElement | null>(null)
+const mapRef = ref()
+const ready = ref(false)
+const loading = ref(true)
+const markers = ref<MapMarker[]>([])
+const center = ref<[number, number]>(saved ? [saved.lat, saved.lng] : [20, 0])
+const zoom = ref<number>(saved ? saved.zoom : 2)
+
+let leaflet: LeafletMapType | null = null
+let resizeObserver: ResizeObserver | null = null
+
+const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+const attribution = '&copy; OpenStreetMap contributors'
+
+const saveView = () => {
+  if (!leaflet) return
+  try {
+    const c = leaflet.getCenter()
+    localStorage.setItem(VIEW_KEY, JSON.stringify({ lat: c.lat, lng: c.lng, zoom: leaflet.getZoom() }))
+  } catch {
+    /* ignore storage errors */
+  }
+}
+
+const iconFor = (severity: string) => {
+  switch ((severity || '').toUpperCase()) {
+    case 'CRITICAL':
+      return CriticalIcon
+    case 'MAJOR':
+      return MajorIcon
+    case 'MINOR':
+      return MinorIcon
+    case 'WARNING':
+      return WarningIcon
+    default:
+      return NormalIcon
+  }
+}
+
+const onReady = (mapObject: LeafletMapType) => {
+  leaflet = mapObject
+  ready.value = true
+  // persist pan/zoom as the user moves
+  leaflet.on('moveend', saveView)
+  leaflet.on('zoomend', saveView)
+  // the panel may size after the map mounts; fix tile layout once laid out
+  setTimeout(() => leaflet?.invalidateSize(), 150)
+  setTimeout(() => leaflet?.invalidateSize(), 600)
+}
+
+const load = async () => {
+  loading.value = true
+  const [nodesResp, alarmsResp] = await Promise.all([
+    API.getNodes({ limit: 2000 }),
+    API.getAlarms({ limit: 2000 })
+  ])
+  const nodes: Node[] = nodesResp ? nodesResp.node : []
+  const alarms: Alarm[] = alarmsResp ? alarmsResp.alarm : []
+
+  // highest alarm severity per node id
+  const sevByNode = new Map<number, string>()
+  for (const a of alarms) {
+    if (a.nodeId == null) continue
+    const cur = sevByNode.get(a.nodeId)
+    sevByNode.set(a.nodeId, cur ? maxSeverity([cur, a.severity]) : a.severity)
+  }
+
+  const result: MapMarker[] = []
+  for (const n of nodes) {
+    const lat = Number(n.assetRecord?.latitude)
+    const lng = Number(n.assetRecord?.longitude)
+    const hasCoords = !!n.assetRecord?.latitude && !!n.assetRecord?.longitude && Number.isFinite(lat) && Number.isFinite(lng)
+    if (!hasCoords) continue
+    const id = Number(n.id)
+    result.push({ id, lat, lng, severity: sevByNode.get(id) ?? 'NORMAL', label: n.label })
+  }
+  markers.value = result
+  loading.value = false
+  setTimeout(() => leaflet?.invalidateSize(), 50)
+}
+
+onMounted(() => {
+  load()
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(() => leaflet?.invalidateSize())
+    resizeObserver.observe(containerRef.value)
+  }
+})
+watch(() => props.refreshTick, load)
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  leaflet = null
+})
+</script>
+
+<style scoped lang="scss">
+.map-panel {
+  position: relative;
+  height: 100%;
+  min-height: 200px;
+
+  :deep(.leaflet-container) {
+    height: 100%;
+    width: 100%;
+    background: #aadaff;
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 500; // above leaflet tiles
+    pointer-events: none;
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    background: rgba(255, 255, 255, 0.85);
+    color: var(--feather-secondary-text-on-surface, #555);
+    font-size: 0.8125rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/ResourceGraphsPanel.vue b/ui/src/components/Dashboard/panels/ResourceGraphsPanel.vue
new file mode 100644
index 000000000000..1af764d10143
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/ResourceGraphsPanel.vue
@@ -0,0 +1,93 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Dashboard panel for the legacy "Resource Graphs" search box. Simplified
+  launcher: links to the resource graph chooser and finds a node by label so the
+  user can open its graphs. (Full node typeahead is a follow-up.)
+-->
+<template>
+  <div class="search-box">
+    <form
+      class="search-box__form"
+      action="/opennms/element/nodeList.htm"
+      method="get"
+    >
+      <input
+        type="hidden"
+        name="listInterfaces"
+        value="false"
+      >
+      <input
+        class="search-box__text"
+        name="nodename"
+        placeholder="Type the node label"
+      >
+      <button
+        class="search-box__btn"
+        type="submit"
+        title="Find node and view its resource graphs"
+      >
+        <i class="pi pi-search" />
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PanelComponentProps } from '@/types/dashboard'
+
+defineProps<PanelComponentProps>()
+</script>
+
+<style scoped lang="scss">
+.search-box {
+  font-size: 0.875rem;
+
+  &__lead {
+    margin: 0 0 0.5rem;
+    font-weight: 600;
+  }
+
+  &__form {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  &__text {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid var(--feather-border-on-surface, #ccc);
+    border-radius: 4px;
+  }
+
+  &__btn {
+    flex: 0 0 auto;
+    padding: 0.3rem 0.6rem;
+    border: 1px solid var(--feather-border-on-surface, #ccc);
+    border-radius: 4px;
+    background: var(--feather-surface, #fff);
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/SamplePanel.vue b/ui/src/components/Dashboard/panels/SamplePanel.vue
new file mode 100644
index 000000000000..b4960d5539ec
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/SamplePanel.vue
@@ -0,0 +1,80 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Reference panel for the dashboard framework. It does no real data fetching;
+  it simply renders the cross-cutting contracts (filter, timeframe, refresh)
+  it receives, which is enough to verify the framework wiring end-to-end.
+  Real panels (Notifications, Availability, Status Overview, NMS-4433 threshold
+  alarms, ...) follow this same prop shape — see PanelComponentProps.
+-->
+<template>
+  <div class="sample-panel">
+    <p class="sample-panel__lead">Sample dashboard panel — framework wiring check.</p>
+    <dl class="sample-panel__facts">
+      <dt>Timeframe</dt>
+      <dd>{{ timeframe.preset }}</dd>
+      <dt>Surveillance categories</dt>
+      <dd>{{ categoriesLabel }}</dd>
+      <dt>IP match</dt>
+      <dd>{{ filter.ipMatch || 'any' }}</dd>
+      <dt>Refresh ticks</dt>
+      <dd>{{ refreshTick }}</dd>
+    </dl>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+
+const props = defineProps<PanelComponentProps>()
+
+const categoriesLabel = computed(() =>
+  props.filter.surveillanceCategories.length ? props.filter.surveillanceCategories.join(', ') : 'all'
+)
+</script>
+
+<style scoped lang="scss">
+.sample-panel {
+  font-size: 0.875rem;
+
+  &__lead {
+    margin: 0 0 0.75rem;
+  }
+
+  &__facts {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.25rem 1rem;
+    margin: 0;
+
+    dt {
+      font-weight: 600;
+    }
+
+    dd {
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/SituationsPanel.vue b/ui/src/components/Dashboard/panels/SituationsPanel.vue
new file mode 100644
index 000000000000..c2a445099be4
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/SituationsPanel.vue
@@ -0,0 +1,133 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!-- Dashboard panel replicating the legacy "Pending Situations" box. -->
+<template>
+  <div class="situations">
+    <p
+      v-if="loading"
+      class="situations__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!situations.length"
+      class="situations__muted"
+    >
+      There are no pending situations.
+    </p>
+    <ul
+      v-else
+      class="situations__list"
+    >
+      <li
+        v-for="s in situations"
+        :key="s.id"
+        class="situations__row"
+        :style="shade ? { backgroundColor: severityTint(s.severity) } : undefined"
+      >
+        <span
+          class="situations__sev"
+          :style="{ backgroundColor: severityColor(s.severity) }"
+          :title="severityLabel(s.severity)"
+        />
+        <a
+          class="situations__title"
+          :href="`/opennms/alarm/detail.htm?id=${s.id}`"
+        >Situation {{ s.id }}</a>
+        <span class="situations__meta">{{ describe(s) }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getPendingSituations, type Situation } from '@/services/situationService'
+import { severityColor, severityLabel, severityTint } from '../severity'
+
+const props = defineProps<PanelComponentProps>()
+
+const loading = ref(true)
+const situations = ref<Situation[]>([])
+const shade = computed(() => !!props.options?.shade)
+
+const describe = (s: Situation): string => {
+  const parts: string[] = []
+  if (s.affectedNodeCount != null) parts.push(`${s.affectedNodeCount} node${s.affectedNodeCount === 1 ? '' : 's'}`)
+  if (s.situationAlarmCount != null) parts.push(`${s.situationAlarmCount} alarm${s.situationAlarmCount === 1 ? '' : 's'}`)
+  return parts.join(', ')
+}
+
+const load = async () => {
+  loading.value = true
+  situations.value = await getPendingSituations()
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.refreshTick, load)
+</script>
+
+<style scoped lang="scss">
+.situations {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--feather-border-on-surface, #e0e0e0);
+  }
+
+  &__sev {
+    flex: 0 0 auto;
+    width: 0.5rem;
+    height: 1.1rem;
+    border-radius: 2px;
+  }
+
+  &__title {
+    flex: 0 0 auto;
+  }
+
+  &__meta {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/StatusListPanel.vue b/ui/src/components/Dashboard/panels/StatusListPanel.vue
new file mode 100644
index 000000000000..6eb708cd99ae
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/StatusListPanel.vue
@@ -0,0 +1,122 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Shared renderer for "<things> with Pending Alarms" list panels (business
+  services, applications): a list of name + severity badge, with an empty state.
+  Parameterized by a loader returning StatusListItem[].
+-->
+<template>
+  <div class="status-list">
+    <p
+      v-if="loading"
+      class="status-list__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!items.length"
+      class="status-list__muted"
+    >
+      {{ emptyText }}
+    </p>
+    <ul
+      v-else
+      class="status-list__list"
+    >
+      <li
+        v-for="item in items"
+        :key="item.id"
+        class="status-list__row"
+      >
+        <span
+          class="status-list__sev"
+          :style="{ backgroundColor: severityColor(item.severity) }"
+          :title="severityLabel(item.severity)"
+        />
+        <span class="status-list__name">{{ item.name }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { type StatusListItem } from '@/services/statusService'
+import { severityColor, severityLabel } from '../severity'
+
+const props = defineProps<{
+  loader: () => Promise<StatusListItem[]>
+  emptyText: string
+  refreshTick: number
+}>()
+
+const loading = ref(true)
+const items = ref<StatusListItem[]>([])
+
+const load = async () => {
+  loading.value = true
+  items.value = await props.loader()
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.refreshTick, load)
+</script>
+
+<style scoped lang="scss">
+.status-list {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--feather-border-on-surface, #e0e0e0);
+  }
+
+  &__sev {
+    flex: 0 0 auto;
+    width: 0.5rem;
+    height: 1.1rem;
+    border-radius: 2px;
+  }
+
+  &__name {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/StatusOverviewPanel.vue b/ui/src/components/Dashboard/panels/StatusOverviewPanel.vue
new file mode 100644
index 000000000000..52f76a577042
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/StatusOverviewPanel.vue
@@ -0,0 +1,252 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Dashboard panel replicating the legacy Status Overview, on Chart.js: two
+  doughnuts — nodes grouped by unacknowledged alarms, and nodes grouped by
+  current outages — from /api/v2/status/summary/nodes/{alarms,outages}.
+-->
+<template>
+  <div
+    ref="rootRef"
+    class="status-overview"
+  >
+    <div class="status-overview__donuts">
+      <div class="status-overview__donut">
+        <canvas ref="alarmsCanvas" />
+        <div class="status-overview__center">
+          <span class="status-overview__total">{{ alarmsTotal }}</span>
+          <span class="status-overview__cap">Alarms</span>
+        </div>
+      </div>
+      <div class="status-overview__donut">
+        <canvas ref="outagesCanvas" />
+        <div class="status-overview__center">
+          <span class="status-overview__total">{{ outagesTotal }}</span>
+          <span class="status-overview__cap">Outages</span>
+        </div>
+      </div>
+    </div>
+    <p
+      v-if="loading"
+      class="status-overview__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="alarmsTotal === 0 && outagesTotal === 0"
+      class="status-overview__muted"
+    >
+      No alarms or outages.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import Chart from 'chart.js/auto'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { getNodesByAlarms, getNodesByOutages, type StatusSummaryEntry } from '@/services/statusService'
+
+const props = defineProps<PanelComponentProps>()
+
+// Legacy status-box palette (title-case labels from the summary endpoints).
+const STATUS_COLORS: Record<string, string> = {
+  Normal: '#336600',
+  Warning: '#ffcc00',
+  Minor: '#ff9900',
+  Major: '#ff3300',
+  Critical: '#cc0000',
+  Indeterminate: '#808080',
+  Cleared: '#9e9e9e'
+}
+const colorFor = (label: string) => STATUS_COLORS[label] ?? '#999999'
+
+// Legend label text must follow the theme — Chart.js defaults to a dark gray that
+// is unreadable on the dark surface. Read the Feather text color off the panel.
+const legendColor = (): string => {
+  const el = rootRef.value
+  if (el) {
+    const c = getComputedStyle(el).getPropertyValue('--feather-primary-text-on-surface').trim()
+    if (c) return c
+  }
+  return '#333333'
+}
+
+// Slice clicks deep-link to the legacy severity-filtered node list, matching
+// the original homepage donuts (status-box onclick).
+const statusUrl = (strategy: 'alarms' | 'outages', severity: string) =>
+  `/opennms/status/index.jsp?title=Node%20List&type=nodes&strategy=${strategy}&severityFilter=${encodeURIComponent(severity)}`
+
+const rootRef = ref<HTMLElement | null>(null)
+const alarmsCanvas = ref<HTMLCanvasElement | null>(null)
+const outagesCanvas = ref<HTMLCanvasElement | null>(null)
+let resizeObserver: ResizeObserver | null = null
+const alarmsEntries = ref<StatusSummaryEntry[]>([])
+const outagesEntries = ref<StatusSummaryEntry[]>([])
+const loading = ref(true)
+
+let alarmsChart: Chart<'doughnut', number[], string> | null = null
+let outagesChart: Chart<'doughnut', number[], string> | null = null
+
+const sum = (entries: StatusSummaryEntry[]) => entries.reduce((a, e) => a + e.count, 0)
+const alarmsTotal = computed(() => sum(alarmsEntries.value))
+const outagesTotal = computed(() => sum(outagesEntries.value))
+
+const renderDonut = (
+  canvas: HTMLCanvasElement | null,
+  entries: StatusSummaryEntry[],
+  existing: Chart<'doughnut', number[], string> | null,
+  strategy: 'alarms' | 'outages'
+): Chart<'doughnut', number[], string> | null => {
+  if (!canvas) return existing
+  const filtered = entries.filter((e) => e.count > 0)
+  const labels = filtered.map((e) => e.label)
+  const data = filtered.map((e) => e.count)
+  const colors = filtered.map((e) => colorFor(e.label))
+
+  if (existing) {
+    existing.data.labels = labels
+    existing.data.datasets[0].data = data
+    existing.data.datasets[0].backgroundColor = colors
+    const legend = existing.options.plugins?.legend
+    if (legend) legend.labels = { ...(legend.labels ?? {}), color: legendColor() }
+    existing.update()
+    return existing
+  }
+
+  return new Chart(canvas, {
+    type: 'doughnut',
+    data: { labels, datasets: [{ data, backgroundColor: colors, borderWidth: 1 }] },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      cutout: '55%',
+      plugins: { legend: { position: 'bottom', labels: { color: legendColor() } } },
+      onClick: (_event, elements, chart) => {
+        const idx = elements[0]?.index
+        const severity = idx === undefined ? undefined : chart.data.labels?.[idx]
+        if (severity) window.location.assign(statusUrl(strategy, String(severity)))
+      },
+      onHover: (_event, elements, chart) => {
+        chart.canvas.style.cursor = elements.length ? 'pointer' : 'default'
+      }
+    }
+  })
+}
+
+const load = async () => {
+  loading.value = true
+  const [alarms, outages] = await Promise.all([getNodesByAlarms(), getNodesByOutages()])
+  alarmsEntries.value = alarms
+  outagesEntries.value = outages
+  loading.value = false
+  await nextTick()
+  alarmsChart = renderDonut(alarmsCanvas.value, alarms, alarmsChart, 'alarms')
+  outagesChart = renderDonut(outagesCanvas.value, outages, outagesChart, 'outages')
+}
+
+let themeObserver: MutationObserver | null = null
+
+const recolorLegends = () => {
+  alarmsChart = renderDonut(alarmsCanvas.value, alarmsEntries.value, alarmsChart, 'alarms')
+  outagesChart = renderDonut(outagesCanvas.value, outagesEntries.value, outagesChart, 'outages')
+}
+
+onMounted(() => {
+  load()
+  // resize charts when the panel (grid item) is resized
+  if (rootRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      alarmsChart?.resize()
+      outagesChart?.resize()
+    })
+    resizeObserver.observe(rootRef.value)
+  }
+  // recolor the legend when the .open-dark theme is toggled (no refresh needed)
+  themeObserver = new MutationObserver(recolorLegends)
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })
+})
+watch(() => props.refreshTick, load)
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  themeObserver?.disconnect()
+  themeObserver = null
+  alarmsChart?.destroy()
+  outagesChart?.destroy()
+  alarmsChart = null
+  outagesChart = null
+})
+</script>
+
+<style scoped lang="scss">
+.status-overview {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &__donuts {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &__donut {
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &__center {
+    position: absolute;
+    top: 42%;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  &__total {
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  &__cap {
+    font-size: 0.7rem;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__muted {
+    text-align: center;
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/TopnPanel.vue b/ui/src/components/Dashboard/panels/TopnPanel.vue
new file mode 100644
index 000000000000..ee66b2f87017
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/TopnPanel.vue
@@ -0,0 +1,145 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Top-N panel: ranks entities by a chosen KPI over the (resolved) timeframe.
+  KPI, N, and sort direction are set via the panel options (gear). Defaults:
+  Node Response Time, descending, N=5.
+-->
+<template>
+  <div class="topn">
+    <p
+      v-if="loading"
+      class="topn__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!rows.length"
+      class="topn__muted"
+    >
+      No data for {{ kpiLabel }} in this timeframe.
+    </p>
+    <ol
+      v-else
+      class="topn__list"
+    >
+      <li
+        v-for="(row, idx) in rows"
+        :key="idx"
+        class="topn__row"
+      >
+        <span class="topn__rank">{{ idx + 1 }}</span>
+        <span class="topn__label">{{ row.label }}</span>
+        <span class="topn__value">{{ format(row.value) }} {{ row.unit }}</span>
+      </li>
+    </ol>
+    <p
+      v-if="!loading"
+      class="topn__caption"
+    >
+      {{ kpiLabel }} · {{ direction === 'desc' ? 'highest' : 'lowest' }} {{ n }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import {
+  DEFAULT_TOPN_KPI,
+  DEFAULT_TOPN_N,
+  TOPN_KPIS,
+  queryTopn,
+  type TopnRow
+} from '@/services/topnService'
+
+const props = defineProps<PanelComponentProps>()
+
+const loading = ref(true)
+const rows = ref<TopnRow[]>([])
+
+const kpiId = computed(() => String(props.options?.kpi ?? DEFAULT_TOPN_KPI))
+const n = computed(() => Number(props.options?.n ?? DEFAULT_TOPN_N))
+const direction = computed<'asc' | 'desc'>(() => (props.options?.direction === 'asc' ? 'asc' : 'desc'))
+const kpiLabel = computed(() => TOPN_KPIS.find((k) => k.id === kpiId.value)?.label ?? kpiId.value)
+
+const format = (v: number) => (Math.abs(v) >= 100 ? v.toFixed(0) : v.toFixed(2))
+
+const load = async () => {
+  loading.value = true
+  rows.value = await queryTopn(kpiId.value, props.timeframe, n.value, direction.value)
+  loading.value = false
+}
+
+onMounted(load)
+watch([() => props.refreshTick, kpiId, n, direction, () => props.timeframe.preset], load)
+</script>
+
+<style scoped lang="scss">
+.topn {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--feather-secondary-text-on-surface, #666);
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--feather-border-on-surface, #e0e0e0);
+  }
+
+  &__rank {
+    flex: 0 0 1.25rem;
+    text-align: right;
+    font-weight: 700;
+    color: var(--feather-secondary-text-on-surface, #888);
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__value {
+    flex: 0 0 auto;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__caption {
+    margin: 0.5rem 0 0;
+    font-size: 0.75rem;
+    color: var(--feather-secondary-text-on-surface, #888);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/registry.ts b/ui/src/components/Dashboard/registry.ts
new file mode 100644
index 000000000000..d01520825de1
--- /dev/null
+++ b/ui/src/components/Dashboard/registry.ts
@@ -0,0 +1,262 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { type Component, defineAsyncComponent } from 'vue'
+import type { FilterKey, PanelHeightMode } from '@/types/dashboard'
+
+export interface PanelGridSize {
+  w: number
+  h: number
+}
+
+// A panel is self-contained: registering one entry here is all that's needed to
+// make it available in the "Add panel" picker. The registry is the single place
+// that grows as panels are added (NMS-4433 etc).
+export interface PanelDefinition {
+  type: string
+  title: string
+  category: 'status' | 'inventory' | 'info'
+  component: Component
+  defaultSize: PanelGridSize
+  minSize?: PanelGridSize
+  // default height behaviour; user can override per panel instance. 'fixed' =
+  // fixed grid height with scrollbar, 'auto' = grow/shrink to content.
+  defaultHeightMode?: PanelHeightMode
+  supportsTimeframe?: boolean // show timeframe control for this panel (user-requested)
+  supportedFilters?: FilterKey[] // filters this panel honors (NMS-10507)
+  // legacy deep-link the panel title opens (matches the front-page box headers)
+  titleHref?: string
+  renamable?: boolean // default true
+  collapsible?: boolean // default true (NMS-11946)
+  roles?: string[] // future: restrict visibility via useRole()
+  // not offered in the "Add panel" picker; still renders if a layout references
+  // it (dev/debug panels like 'sample')
+  hidden?: boolean
+}
+
+export const panelRegistry: Record<string, PanelDefinition> = {
+  'pending-situations': {
+    type: 'pending-situations',
+    title: 'Pending Situations',
+    titleHref: '/opennms/alarm/list.htm',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/SituationsPanel.vue')),
+    defaultSize: { w: 4, h: 3 },
+    minSize: { w: 3, h: 2 },
+    renamable: true,
+    collapsible: true
+  },
+  'nodes-with-alarms': {
+    type: 'nodes-with-alarms',
+    title: 'Nodes with Pending Alarms',
+    titleHref: '/opennms/alarm/list.htm',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/NodesWithAlarmsPanel.vue')),
+    defaultSize: { w: 4, h: 5 },
+    minSize: { w: 3, h: 3 },
+    renamable: true,
+    collapsible: true
+  },
+  'service-outages': {
+    type: 'service-outages',
+    title: 'Nodes with Service Outages',
+    titleHref: '/opennms/outage/list.htm',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/OutagesPanel.vue')),
+    defaultSize: { w: 4, h: 4 },
+    minSize: { w: 3, h: 3 },
+    renamable: true,
+    collapsible: true
+  },
+  'status-overview': {
+    type: 'status-overview',
+    defaultHeightMode: 'fixed',
+    title: 'Status Overview',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/StatusOverviewPanel.vue')),
+    defaultSize: { w: 4, h: 6 },
+    minSize: { w: 3, h: 4 },
+    renamable: true,
+    collapsible: true
+  },
+  'business-services': {
+    type: 'business-services',
+    title: 'Business Services with Pending Alarms',
+    titleHref: '/opennms/topology?provider=Business%20Services&layout=Hierarchy%20Layout&szl=1',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/BusinessServicesPanel.vue')),
+    defaultSize: { w: 4, h: 3 },
+    minSize: { w: 3, h: 2 },
+    renamable: true,
+    collapsible: true
+  },
+  applications: {
+    type: 'applications',
+    title: 'Applications with Pending Alarms',
+    titleHref: '/opennms/application/index.jsp',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/ApplicationsPanel.vue')),
+    defaultSize: { w: 4, h: 3 },
+    minSize: { w: 3, h: 2 },
+    renamable: true,
+    collapsible: true
+  },
+  availability: {
+    type: 'availability',
+    defaultHeightMode: 'fixed',
+    title: 'Availability Over the Past 24 Hours',
+    titleHref: '/opennms/rtc/index.jsp',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/AvailabilityPanel.vue')),
+    defaultSize: { w: 6, h: 4 },
+    minSize: { w: 4, h: 3 },
+    renamable: true,
+    collapsible: true
+  },
+  'regional-map': {
+    type: 'regional-map',
+    defaultHeightMode: 'fixed',
+    title: 'Regional Status',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/RegionalMapPanel.vue')),
+    defaultSize: { w: 8, h: 6 },
+    minSize: { w: 4, h: 4 },
+    renamable: true,
+    collapsible: true
+  },
+  notifications: {
+    type: 'notifications',
+    title: 'Notifications',
+    titleHref: '/opennms/notification/index.jsp',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/NotificationsPanel.vue')),
+    defaultSize: { w: 4, h: 3 },
+    minSize: { w: 2, h: 2 },
+    renamable: true,
+    collapsible: true
+  },
+  newsfeed: {
+    type: 'newsfeed',
+    defaultHeightMode: 'fixed',
+    title: 'OpenNMS News Feed',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/NewsFeedPanel.vue')),
+    defaultSize: { w: 4, h: 5 },
+    minSize: { w: 3, h: 3 },
+    renamable: true,
+    collapsible: true
+  },
+  'resource-graphs': {
+    type: 'resource-graphs',
+    title: 'Resource Graphs',
+    titleHref: '/opennms/graph/index.jsp',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/ResourceGraphsPanel.vue')),
+    defaultSize: { w: 3, h: 2 },
+    minSize: { w: 2, h: 2 },
+    renamable: true,
+    collapsible: true
+  },
+  'ksc-reports': {
+    type: 'ksc-reports',
+    title: 'KSC Reports',
+    titleHref: '/opennms/KSC/index.jsp',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/KscReportsPanel.vue')),
+    defaultSize: { w: 3, h: 2 },
+    minSize: { w: 2, h: 2 },
+    renamable: true,
+    collapsible: true
+  },
+  'quick-search': {
+    type: 'quick-search',
+    title: 'Quick Search',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/QuickSearchPanel.vue')),
+    defaultSize: { w: 3, h: 5 },
+    minSize: { w: 2, h: 3 },
+    renamable: true,
+    collapsible: true
+  },
+  topn: {
+    type: 'topn',
+    title: 'Top N',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/TopnPanel.vue')),
+    defaultSize: { w: 3, h: 4 },
+    minSize: { w: 2, h: 2 },
+    supportsTimeframe: true,
+    renamable: true,
+    collapsible: true
+  },
+  'metric-chart': {
+    type: 'metric-chart',
+    defaultHeightMode: 'fixed',
+    title: 'Metric Chart',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/MetricChartPanel.vue')),
+    defaultSize: { w: 6, h: 5 },
+    minSize: { w: 3, h: 3 },
+    supportsTimeframe: true,
+    renamable: true,
+    collapsible: true
+  },
+  notes: {
+    type: 'notes',
+    title: 'Notes',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/NotesPanel.vue')),
+    defaultSize: { w: 3, h: 3 },
+    minSize: { w: 2, h: 2 },
+    renamable: true,
+    collapsible: true
+  },
+  'html-content': {
+    type: 'html-content',
+    defaultHeightMode: 'fixed',
+    title: 'HTML Content',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/HtmlContentPanel.vue')),
+    defaultSize: { w: 4, h: 5 },
+    minSize: { w: 2, h: 3 },
+    renamable: true,
+    collapsible: true
+  },
+  sample: {
+    type: 'sample',
+    hidden: true, // framework wiring check — keep for debugging, not for production
+    title: 'Sample Panel',
+    category: 'info',
+    component: defineAsyncComponent(() => import('./panels/SamplePanel.vue')),
+    defaultSize: { w: 4, h: 4 },
+    minSize: { w: 2, h: 2 },
+    supportsTimeframe: true,
+    supportedFilters: ['surveillanceCategories', 'ipMatch'],
+    renamable: true,
+    collapsible: true
+  }
+}
+
+export const getPanelDefinition = (type: string): PanelDefinition | undefined => panelRegistry[type]
+
+export const listPanelDefinitions = (): PanelDefinition[] =>
+  Object.values(panelRegistry).filter((d) => !d.hidden)
diff --git a/ui/src/components/Dashboard/severity.ts b/ui/src/components/Dashboard/severity.ts
new file mode 100644
index 000000000000..85478ef586f5
--- /dev/null
+++ b/ui/src/components/Dashboard/severity.ts
@@ -0,0 +1,62 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+// OnmsSeverity ordering + display metadata for dashboard panels. Hex colors
+// approximate the OpenNMS standard severity palette (used directly by the
+// canvas-based Status Overview chart, which can't read the SCSS .severity-*
+// classes). Keep highest-severity-first.
+
+export interface SeverityMeta {
+  key: string
+  label: string
+  color: string
+  weight: number
+}
+
+export const SEVERITIES: SeverityMeta[] = [
+  { key: 'CRITICAL', label: 'Critical', color: '#a81d1d', weight: 7 },
+  { key: 'MAJOR', label: 'Major', color: '#d4663a', weight: 6 },
+  { key: 'MINOR', label: 'Minor', color: '#e89b3b', weight: 5 },
+  { key: 'WARNING', label: 'Warning', color: '#f0c419', weight: 4 },
+  { key: 'NORMAL', label: 'Normal', color: '#3a7d2c', weight: 3 },
+  { key: 'INDETERMINATE', label: 'Indeterminate', color: '#808080', weight: 2 },
+  { key: 'CLEARED', label: 'Cleared', color: '#9e9e9e', weight: 1 }
+]
+
+// Severities shown in the alarm Status Overview chart (the actionable set).
+export const ALARM_CHART_SEVERITIES = ['CRITICAL', 'MAJOR', 'MINOR', 'WARNING', 'INDETERMINATE']
+
+const FALLBACK: SeverityMeta = { key: 'UNKNOWN', label: 'Unknown', color: '#999999', weight: 0 }
+
+export const severityMeta = (key: string): SeverityMeta =>
+  SEVERITIES.find((s) => s.key === (key ?? '').toUpperCase()) ?? { ...FALLBACK, key, label: key || 'Unknown' }
+
+export const severityColor = (key: string): string => severityMeta(key).color
+
+// Low-opacity tint of the severity color, for optional row shading (8-digit hex).
+export const severityTint = (key: string): string => `${severityMeta(key).color}33`
+
+export const severityLabel = (key: string): string => severityMeta(key).label
+
+// Highest severity among a set of severity keys (by weight).
+export const maxSeverity = (keys: string[]): string =>
+  keys.reduce((max, k) => (severityMeta(k).weight > severityMeta(max).weight ? k : max), 'CLEARED')
diff --git a/ui/src/components/Dashboard/timeframe.ts b/ui/src/components/Dashboard/timeframe.ts
new file mode 100644
index 000000000000..93bcf9cef260
--- /dev/null
+++ b/ui/src/components/Dashboard/timeframe.ts
@@ -0,0 +1,44 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { TimeframePreset } from '@/types/dashboard'
+
+export const timeframeOptions: { label: string; value: TimeframePreset }[] = [
+  { label: 'Last 24 hours', value: TimeframePreset.Last24h },
+  { label: 'Today', value: TimeframePreset.Today },
+  { label: 'Yesterday', value: TimeframePreset.Yesterday },
+  { label: 'This week', value: TimeframePreset.ThisWeek },
+  { label: 'Last week', value: TimeframePreset.LastWeek },
+  { label: 'Last 7 days', value: TimeframePreset.Last7Days },
+  { label: 'Last 30 days', value: TimeframePreset.Last30Days },
+  { label: 'This month', value: TimeframePreset.ThisMonth },
+  { label: 'Last month', value: TimeframePreset.LastMonth },
+  { label: 'Custom range', value: TimeframePreset.Custom }
+]
+
+export const refreshOptions: { label: string; value: number }[] = [
+  { label: 'Off', value: 0 },
+  { label: 'Every 30 seconds', value: 30 },
+  { label: 'Every minute', value: 60 },
+  { label: 'Every 2 minutes', value: 120 },
+  { label: 'Every 5 minutes', value: 300 }
+]
diff --git a/ui/src/composables/useDashboardRefresh.ts b/ui/src/composables/useDashboardRefresh.ts
new file mode 100644
index 000000000000..b6acfafe6ca3
--- /dev/null
+++ b/ui/src/composables/useDashboardRefresh.ts
@@ -0,0 +1,52 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { onUnmounted, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useDashboardStore } from '@/stores/dashboardStore'
+
+// Owns the single global refresh timer (NMS-4404). Panels react to
+// store.refreshTick rather than each holding their own timer. Auto-refresh is
+// suspended while paused, while in edit mode, or when the interval is "off".
+export const useDashboardRefresh = () => {
+  const store = useDashboardStore()
+  const { refreshSeconds, isPaused, editMode } = storeToRefs(store)
+  let timer: ReturnType<typeof setInterval> | null = null
+
+  const clear = () => {
+    if (timer !== null) {
+      clearInterval(timer)
+      timer = null
+    }
+  }
+
+  const restart = () => {
+    clear()
+    if (isPaused.value || editMode.value || refreshSeconds.value <= 0) {
+      return
+    }
+    timer = setInterval(() => store.tickRefresh(), refreshSeconds.value * 1000)
+  }
+
+  watch([refreshSeconds, isPaused, editMode], restart, { immediate: true })
+  onUnmounted(clear)
+}
diff --git a/ui/src/containers/Dashboard.vue b/ui/src/containers/Dashboard.vue
new file mode 100644
index 000000000000..0494ca5fa6d6
--- /dev/null
+++ b/ui/src/containers/Dashboard.vue
@@ -0,0 +1,97 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Configurable system-wide dashboard (NMS-19851). Mounted at /dashboard during
+  development; the cutover (milestone 7) repoints the home route here and retires
+  the JSP index page.
+-->
+<template>
+  <div
+    id="dashboard-root"
+    class="dashboard-container"
+  >
+    <DashboardToolbar />
+    <DashboardGrid />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import DashboardToolbar from '@/components/Dashboard/DashboardToolbar.vue'
+import DashboardGrid from '@/components/Dashboard/DashboardGrid.vue'
+import { useDashboardRefresh } from '@/composables/useDashboardRefresh'
+import { useDashboardStore } from '@/stores/dashboardStore'
+
+const store = useDashboardStore()
+
+// Single global refresh timer for the whole dashboard.
+useDashboardRefresh()
+
+onMounted(() => store.load())
+</script>
+
+<style scoped lang="scss">
+.dashboard-container {
+  // fill the app's main content area and scroll INTERNALLY so a tall dashboard
+  // never overflows past the app footer/copyright bar.
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--feather-background, #f3f5f7);
+
+  &:fullscreen {
+    overflow: hidden;
+  }
+
+  // CSS "maximize" fallback when the Fullscreen API is blocked
+  &.dashboard-maximized {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+  }
+}
+</style>
+
+<!-- Global (non-scoped) rules. -->
+<style lang="scss">
+// PrimeVue overlays teleport to <body>, outside the app font scope, so they fall
+// back to the serif default. Keep them sans-serif.
+.p-select-overlay,
+.p-select-list,
+.p-multiselect-overlay,
+.p-multiselect-list,
+.p-popover,
+.p-popover * {
+  font-family: 'OpenSans', Helvetica, Arial, sans-serif;
+}
+
+// Only when the dashboard is the active page: give the app content chain a
+// definite height so the dashboard can scroll internally (and not push past the
+// footer). Scoped via :has() so other pages keep their normal auto height.
+.app-content-container:has(#dashboard-root),
+.main-content:has(#dashboard-root) {
+  height: 100%;
+  min-height: 0;
+}
+</style>
diff --git a/ui/src/main/router/index.ts b/ui/src/main/router/index.ts
index 6284c44bc758..e38654eacad1 100644
--- a/ui/src/main/router/index.ts
+++ b/ui/src/main/router/index.ts
@@ -91,6 +91,12 @@ const router = createRouter({
       name: 'home',
       component: Home
     },
+    {
+      // configurable system-wide dashboard (NMS-19851); home route repoints here at cutover
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: () => import('@/containers/Dashboard.vue')
+    },
     {
       // for compatibility with legacy plugins
       // should be removed when all plugins have unique 'extensionId' and follow new pattern
diff --git a/ui/src/services/availabilityService.ts b/ui/src/services/availabilityService.ts
new file mode 100644
index 000000000000..2a068fa84ad8
--- /dev/null
+++ b/ui/src/services/availabilityService.ts
@@ -0,0 +1,64 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { rest } from './axiosInstances'
+
+// Front-page RTC availability per category (legacy categories-box), from
+// GET /rest/availability → { section: [{ name, categories: { category: [...] } }] }.
+export interface AvailabilityCategory {
+  name: string
+  outageText: string
+  availabilityText: string
+  availability: number
+  availabilityClass: string
+  outageClass: string
+}
+
+export interface AvailabilitySection {
+  name: string
+  categories: AvailabilityCategory[]
+}
+
+// JAXB-style JSON collapses single-element arrays to objects; normalize.
+const toArray = <T>(v: T | T[] | undefined | null): T[] => (v == null ? [] : Array.isArray(v) ? v : [v])
+
+export const getAvailability = async (): Promise<AvailabilitySection[]> => {
+  try {
+    const resp = await rest.get('/availability', { headers: { Accept: 'application/json' } })
+    if (resp.status === 204 || !resp.data?.section) {
+      return []
+    }
+    return toArray<any>(resp.data.section).map((s) => ({
+      name: s.name,
+      categories: toArray<any>(s.categories?.category).map((c) => ({
+        name: c.name,
+        outageText: c['outage-text'] ?? '',
+        availabilityText: c['availability-text'] ?? '',
+        availability: Number(c.availability ?? 0),
+        availabilityClass: c['availability-class'] ?? 'Normal',
+        outageClass: c['outage-class'] ?? 'Normal'
+      }))
+    }))
+  } catch (err) {
+    return []
+  }
+}
diff --git a/ui/src/services/dashboardService.ts b/ui/src/services/dashboardService.ts
new file mode 100644
index 000000000000..82724ef2d763
--- /dev/null
+++ b/ui/src/services/dashboardService.ts
@@ -0,0 +1,70 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import axios from 'axios'
+import { v2 } from './axiosInstances'
+import type { DashboardLayout } from '@/types/dashboard'
+import { createDefaultLayout } from '@/components/Dashboard/defaultLayout'
+
+// Single system-wide dashboard document, served by DashboardRestService at
+// /api/v2/dashboard/system. GET 404s until a layout has been saved, in which
+// case we fall back to the built-in default.
+const endpoint = '/dashboard/system'
+
+export const getSystemDashboard = async (): Promise<DashboardLayout> => {
+  try {
+    const response = await v2.get<DashboardLayout>(endpoint)
+
+    if (response.status === 200 && Array.isArray(response.data?.panels)) {
+      return response.data
+    }
+
+    return createDefaultLayout()
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response?.status === 404) {
+      // no layout saved yet — use the built-in default
+      return createDefaultLayout()
+    }
+
+    console.error('Failed to load system dashboard layout:', error)
+    return createDefaultLayout()
+  }
+}
+
+export const saveSystemDashboard = async (layout: DashboardLayout): Promise<void> => {
+  await v2.put(endpoint, layout)
+}
+
+export interface ServiceType {
+  id: number
+  name: string
+}
+
+// Monitored service types (id + name) for the Quick Search "Providing service" control.
+export const getServiceTypes = async (): Promise<ServiceType[]> => {
+  try {
+    const resp = await v2.get('/dashboard/service-types', { headers: { Accept: 'application/json' } })
+    return Array.isArray(resp.data) ? (resp.data as ServiceType[]) : []
+  } catch (err) {
+    return []
+  }
+}
diff --git a/ui/src/services/metricChartService.ts b/ui/src/services/metricChartService.ts
new file mode 100644
index 000000000000..c9f9888d2daa
--- /dev/null
+++ b/ui/src/services/metricChartService.ts
@@ -0,0 +1,90 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { rest } from './axiosInstances'
+import type { Timeframe } from '@/types/dashboard'
+import { TOPN_KPIS, listKpiSources, timeframeRange } from './topnService'
+
+// Metric-chart panel: one entity x one metric over the resolved timeframe.
+// Metrics are the same registry the Top-N panel uses (TOPN_KPIS).
+export const DEFAULT_CHART_METRIC = 'response-time'
+export const DEFAULT_CHART_ENTITY = 'localhost'
+
+export interface MetricSeries {
+  timestamps: number[]
+  values: (number | null)[] // null = gap (NaN from RRD); chart renders a break
+  unit: string
+}
+
+// Entity labels that carry the given metric, for the options dropdown.
+export const listMetricEntities = async (metricId: string): Promise<string[]> => {
+  try {
+    const sources = await listKpiSources(metricId)
+    return [...new Set(sources.map((s) => s.label))].sort((a, b) => a.localeCompare(b))
+  } catch {
+    return []
+  }
+}
+
+export const queryMetricSeries = async (
+  metricId: string,
+  entityLabel: string,
+  timeframe: Timeframe
+): Promise<MetricSeries | null> => {
+  const kpi = TOPN_KPIS.find((k) => k.id === metricId) ?? TOPN_KPIS[0]
+  try {
+    const sources = await listKpiSources(kpi.id)
+    const source =
+      sources.find((s) => s.label === entityLabel) ??
+      sources.find((s) => s.label.toLowerCase() === entityLabel.toLowerCase())
+    if (!source) return null
+
+    const { start, end } = timeframeRange(timeframe)
+    // ~200 points; never below the 5-min collection interval (a single huge
+    // bucket returns NaN from RRD — same constraint as Top-N).
+    const step = Math.max(300_000, Math.floor((end - start) / 200))
+    const payload = {
+      start,
+      end,
+      step,
+      maxrows: 2000,
+      relaxed: true,
+      source: [
+        {
+          label: 'm',
+          resourceId: source.resourceId,
+          attribute: source.attribute,
+          aggregation: 'AVERAGE',
+          transient: false
+        }
+      ]
+    }
+    const resp = await rest.post('/measurements', payload, { headers: { Accept: 'application/json' } })
+    const timestamps: number[] = resp.data?.timestamps ?? []
+    const raw: number[] = resp.data?.columns?.[0]?.values ?? []
+    const values = raw.map((v) => (Number.isFinite(v) ? v * kpi.scale : null))
+    if (!timestamps.length || values.every((v) => v === null)) return null
+    return { timestamps, values, unit: kpi.unit }
+  } catch {
+    return null
+  }
+}
diff --git a/ui/src/services/newsfeedService.ts b/ui/src/services/newsfeedService.ts
new file mode 100644
index 000000000000..5e25d99e8197
--- /dev/null
+++ b/ui/src/services/newsfeedService.ts
@@ -0,0 +1,45 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { v2 } from './axiosInstances'
+
+// Mirrors NewsFeedItem from the v2 /newsfeed endpoint (response: { items: [...] }).
+export interface NewsFeedItem {
+  title: string
+  link: string
+  description: string
+  shortDescription: string
+  categories: string[]
+  tags: string[]
+}
+
+export const getNewsFeed = async (): Promise<NewsFeedItem[]> => {
+  try {
+    const resp = await v2.get('/newsfeed')
+    if (resp.status === 204) {
+      return []
+    }
+    return (resp.data?.items ?? []) as NewsFeedItem[]
+  } catch (err) {
+    return []
+  }
+}
diff --git a/ui/src/services/notificationService.ts b/ui/src/services/notificationService.ts
new file mode 100644
index 000000000000..4becad310c8f
--- /dev/null
+++ b/ui/src/services/notificationService.ts
@@ -0,0 +1,51 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { rest } from './axiosInstances'
+
+// Mirrors NotificationSummary (v1 NotificationRestService /notifications/summary).
+export interface NotificationSummary {
+  user?: string
+  totalCount: number
+  totalUnacknowledgedCount: number
+  userUnacknowledgedCount: number
+  teamUnacknowledgedCount: number
+}
+
+const empty = (): NotificationSummary => ({
+  totalCount: 0,
+  totalUnacknowledgedCount: 0,
+  userUnacknowledgedCount: 0,
+  teamUnacknowledgedCount: 0
+})
+
+export const getNotificationSummary = async (): Promise<NotificationSummary | false> => {
+  try {
+    const resp = await rest.get('/notifications/summary')
+    if (resp.status === 204) {
+      return empty()
+    }
+    return resp.data as NotificationSummary
+  } catch (err) {
+    return false
+  }
+}
diff --git a/ui/src/services/outageService.ts b/ui/src/services/outageService.ts
new file mode 100644
index 000000000000..63eac30b5cdc
--- /dev/null
+++ b/ui/src/services/outageService.ts
@@ -0,0 +1,54 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { v2 } from './axiosInstances'
+
+// OnmsOutage exposes flat nodeId/nodeLabel/ipAddress/locationName; the service
+// name is nested under monitoredService.serviceType.name.
+export interface CurrentOutage {
+  id?: number
+  nodeId?: number
+  nodeLabel?: string
+  ipAddress?: string
+  locationName?: string
+  ifLostService?: number | string
+  serviceName?: string
+  monitoredService?: { serviceName?: string; serviceType?: { name?: string } }
+}
+
+// Currently-open outages: ifRegainedService is the epoch sentinel (== null).
+const OPEN_FIQL = 'outage.ifRegainedService==1970-01-01T00:00:00.000-0000'
+
+export const getCurrentOutages = async (limit = 12): Promise<CurrentOutage[]> => {
+  try {
+    const resp = await v2.get(`/outages?_s=${encodeURIComponent(OPEN_FIQL)}&limit=${limit}`)
+    if (resp.status === 204) {
+      return []
+    }
+    return (resp.data?.outage ?? []) as CurrentOutage[]
+  } catch (err) {
+    return []
+  }
+}
+
+export const outageServiceName = (o: CurrentOutage): string =>
+  o.serviceName ?? o.monitoredService?.serviceName ?? o.monitoredService?.serviceType?.name ?? 'service'
diff --git a/ui/src/services/situationService.ts b/ui/src/services/situationService.ts
new file mode 100644
index 000000000000..cd8913d39a18
--- /dev/null
+++ b/ui/src/services/situationService.ts
@@ -0,0 +1,47 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { v2 } from './axiosInstances'
+
+// Situations are alarms flagged isSituation; the relevant extra fields come
+// straight from the alarm JSON.
+export interface Situation {
+  id: number | string
+  severity: string
+  situationAlarmCount?: number
+  affectedNodeCount?: number
+  lastEventTime?: number
+  logMessage?: string
+}
+
+export const getPendingSituations = async (limit = 12): Promise<Situation[]> => {
+  try {
+    const fiql = encodeURIComponent('isSituation==true')
+    const resp = await v2.get(`/alarms?_s=${fiql}&limit=${limit}&orderBy=lastEventTime&order=DESC`)
+    if (resp.status === 204) {
+      return []
+    }
+    return (resp.data?.alarm ?? []) as Situation[]
+  } catch (err) {
+    return []
+  }
+}
diff --git a/ui/src/services/statusService.ts b/ui/src/services/statusService.ts
new file mode 100644
index 000000000000..dcd8247c6f27
--- /dev/null
+++ b/ui/src/services/statusService.ts
@@ -0,0 +1,86 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { v2 } from './axiosInstances'
+
+// The status summary endpoints return c3-style [label, count] column pairs,
+// e.g. [["Critical", 2], ["Minor", 1]]. Labels are title-case severity/status
+// names (Normal/Warning/Minor/Major/Critical).
+export interface StatusSummaryEntry {
+  label: string
+  count: number
+}
+
+const fetchSummary = async (path: string): Promise<StatusSummaryEntry[]> => {
+  try {
+    const resp = await v2.get(path)
+    if (resp.status === 204 || !Array.isArray(resp.data)) {
+      return []
+    }
+    return (resp.data as unknown[])
+      .filter((row): row is [string, number] => Array.isArray(row) && row.length >= 2)
+      .map((row) => ({ label: String(row[0]), count: Number(row[1]) }))
+  } catch (err) {
+    return []
+  }
+}
+
+export const getNodesByAlarms = (): Promise<StatusSummaryEntry[]> =>
+  fetchSummary('/status/summary/nodes/alarms')
+
+export const getNodesByOutages = (): Promise<StatusSummaryEntry[]> =>
+  fetchSummary('/status/summary/nodes/outages')
+
+// Named status lists (business services / applications) — only those with a
+// pending problem (severity worse than NORMAL), matching the legacy boxes.
+export interface StatusListItem {
+  id: number
+  name: string
+  severity: string
+}
+
+const PROBLEM_SEVERITIES = new Set(['WARNING', 'MINOR', 'MAJOR', 'CRITICAL'])
+
+const severityString = (s: unknown): string =>
+  (typeof s === 'string' ? s : ((s as any)?.label ?? (s as any)?.name ?? '')).toUpperCase()
+
+const fetchStatusList = async (path: string, key: string): Promise<StatusListItem[]> => {
+  try {
+    const resp = await v2.get(path, { headers: { Accept: 'application/json' } })
+    if (resp.status === 204 || !resp.data) {
+      return []
+    }
+    const raw = resp.data[key]
+    const arr = Array.isArray(raw) ? raw : raw ? [raw] : []
+    return arr
+      .map((x: any) => ({ id: Number(x.id), name: x.name, severity: severityString(x.severity) }))
+      .filter((x: StatusListItem) => PROBLEM_SEVERITIES.has(x.severity))
+  } catch (err) {
+    return []
+  }
+}
+
+export const getBusinessServicesStatus = (): Promise<StatusListItem[]> =>
+  fetchStatusList('/status/business-services', 'businessservice')
+
+export const getApplicationsStatus = (): Promise<StatusListItem[]> =>
+  fetchStatusList('/status/applications', 'application')
diff --git a/ui/src/services/topnService.ts b/ui/src/services/topnService.ts
new file mode 100644
index 000000000000..20879154fd83
--- /dev/null
+++ b/ui/src/services/topnService.ts
@@ -0,0 +1,172 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { rest } from './axiosInstances'
+import { TimeframePreset, type Timeframe } from '@/types/dashboard'
+
+// A KPI describes how to find the measurement source for each ranked entity and
+// how to present its value. Extensible — add interface traffic, CPU, etc. here.
+export interface TopnKpiDef {
+  id: string
+  label: string
+  unit: string
+  scale: number // multiply the raw RRD value (e.g. icmp is microseconds -> ms)
+  // returns the attribute name to query if this child resource carries the KPI
+  match: (childResourceId: string, attributeKeys: string[]) => string | null
+}
+
+export const TOPN_KPIS: TopnKpiDef[] = [
+  {
+    id: 'response-time',
+    label: 'Node Response Time (ICMP)',
+    unit: 'ms',
+    scale: 0.001,
+    match: (id, attrs) => (id.includes('responseTime') && attrs.includes('icmp') ? 'icmp' : null)
+  }
+]
+
+export const DEFAULT_TOPN_KPI = 'response-time'
+export const DEFAULT_TOPN_N = 5
+
+export interface TopnRow {
+  label: string
+  value: number
+  unit: string
+}
+
+const MAX_SOURCES = 250 // cap candidate resources per query
+
+export const timeframeRange = (tf: Timeframe): { start: number; end: number } => {
+  const now = Date.now()
+  const hour = 3_600_000
+  const day = 24 * hour
+  const startOfDay = () => {
+    const d = new Date()
+    d.setHours(0, 0, 0, 0)
+    return d.getTime()
+  }
+  switch (tf.preset) {
+    case TimeframePreset.Today:
+      return { start: startOfDay(), end: now }
+    case TimeframePreset.Yesterday:
+      return { start: startOfDay() - day, end: startOfDay() }
+    case TimeframePreset.ThisWeek:
+      return { start: now - 7 * day, end: now }
+    case TimeframePreset.LastWeek:
+      return { start: now - 14 * day, end: now - 7 * day }
+    case TimeframePreset.Last7Days:
+      return { start: now - 7 * day, end: now }
+    case TimeframePreset.Last30Days:
+    case TimeframePreset.ThisMonth:
+      return { start: now - 30 * day, end: now }
+    case TimeframePreset.LastMonth:
+      return { start: now - 60 * day, end: now - 30 * day }
+    case TimeframePreset.Custom:
+      return { start: tf.from ? Date.parse(tf.from) : now - day, end: tf.to ? Date.parse(tf.to) : now }
+    case TimeframePreset.Last24h:
+    default:
+      return { start: now - day, end: now }
+  }
+}
+
+interface RawResource {
+  id?: string
+  label?: string
+  rrdGraphAttributes?: Record<string, unknown>
+  children?: { resource?: RawResource[] }
+}
+
+export interface MeasurementSource {
+  resourceId: string
+  attribute: string
+  label: string
+}
+
+const collectSources = (root: { resource?: RawResource[] }, kpi: TopnKpiDef): MeasurementSource[] => {
+  const out: MeasurementSource[] = []
+  for (const node of root?.resource ?? []) {
+    const nodeLabel = node.label ?? node.id ?? 'node'
+    for (const child of node.children?.resource ?? []) {
+      const attrs = Object.keys(child.rrdGraphAttributes ?? {})
+      const attribute = kpi.match(child.id ?? '', attrs)
+      if (attribute && child.id) {
+        out.push({ resourceId: child.id, attribute, label: nodeLabel })
+      }
+    }
+  }
+  return out.slice(0, MAX_SOURCES)
+}
+
+// All entities (resources) carrying the given KPI — shared by Top-N and the metric chart.
+export const listKpiSources = async (kpiId: string): Promise<MeasurementSource[]> => {
+  const kpi = TOPN_KPIS.find((k) => k.id === kpiId) ?? TOPN_KPIS[0]
+  const tree = await rest.get('/resources?depth=2', { headers: { Accept: 'application/json' } })
+  return collectSources(tree.data ?? {}, kpi)
+}
+
+export const queryTopn = async (
+  kpiId: string,
+  timeframe: Timeframe,
+  n: number,
+  direction: 'asc' | 'desc'
+): Promise<TopnRow[]> => {
+  const kpi = TOPN_KPIS.find((k) => k.id === kpiId) ?? TOPN_KPIS[0]
+  try {
+    const sources = await listKpiSources(kpi.id)
+    if (!sources.length) return []
+
+    const { start, end } = timeframeRange(timeframe)
+    // Use a normal resolution step (a single huge bucket returns NaN from RRD);
+    // the series is averaged below. Cap to ~1000 points per source.
+    const step = Math.max(300_000, Math.floor((end - start) / 1000))
+    const payload = {
+      start,
+      end,
+      step,
+      maxrows: 2000,
+      relaxed: true,
+      source: sources.map((s, i) => ({
+        label: `s${i}`,
+        resourceId: s.resourceId,
+        attribute: s.attribute,
+        aggregation: 'AVERAGE',
+        transient: false
+      }))
+    }
+    const resp = await rest.post('/measurements', payload, { headers: { Accept: 'application/json' } })
+    const labels: string[] = resp.data?.labels ?? []
+    const columns: { values?: number[] }[] = resp.data?.columns ?? []
+
+    const rows: TopnRow[] = []
+    labels.forEach((_label, i) => {
+      const values = (columns[i]?.values ?? []).filter((v) => Number.isFinite(v))
+      if (!values.length) return
+      const avg = values.reduce((a, b) => a + b, 0) / values.length
+      rows.push({ label: sources[i]?.label ?? `s${i}`, value: avg * kpi.scale, unit: kpi.unit })
+    })
+
+    rows.sort((a, b) => (direction === 'asc' ? a.value - b.value : b.value - a.value))
+    return rows.slice(0, Math.max(1, n))
+  } catch (err) {
+    return []
+  }
+}
diff --git a/ui/src/stores/dashboardStore.ts b/ui/src/stores/dashboardStore.ts
new file mode 100644
index 000000000000..2d106dcc2e60
--- /dev/null
+++ b/ui/src/stores/dashboardStore.ts
@@ -0,0 +1,203 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { defineStore } from 'pinia'
+import { v4 as uuidv4 } from 'uuid'
+import type { DashboardFilter, DashboardLayout, DashboardPanel, PanelHeightMode, Timeframe } from '@/types/dashboard'
+import { createDefaultLayout } from '@/components/Dashboard/defaultLayout'
+import { getPanelDefinition } from '@/components/Dashboard/registry'
+import { getSystemDashboard, saveSystemDashboard } from '@/services/dashboardService'
+
+interface DashboardStoreState {
+  layout: DashboardLayout
+  isLoading: boolean
+  isSaving: boolean
+  isDirty: boolean
+  editMode: boolean
+  refreshTick: number
+}
+
+export const useDashboardStore = defineStore('dashboardStore', {
+  state: (): DashboardStoreState => ({
+    layout: createDefaultLayout(),
+    isLoading: false,
+    isSaving: false,
+    isDirty: false,
+    editMode: false,
+    refreshTick: 0
+  }),
+  getters: {
+    panels: (state): DashboardPanel[] => state.layout.panels,
+    isPaused: (state): boolean => state.layout.refresh.paused,
+    refreshSeconds: (state): number => state.layout.refresh.seconds,
+    // Effective filter / timeframe / cadence for a panel: override wins, else global.
+    resolvedFilter:
+      (state) =>
+        (panel: DashboardPanel): DashboardFilter =>
+          panel.filterOverride ?? state.layout.globalFilter,
+    resolvedTimeframe:
+      (state) =>
+        (panel: DashboardPanel): Timeframe =>
+          panel.timeframeOverride ?? state.layout.globalTimeframe,
+    resolvedRefreshSeconds:
+      (state) =>
+        (panel: DashboardPanel): number =>
+          panel.refreshSeconds ?? state.layout.refresh.seconds,
+    // Effective height mode: panel override, else registry default, else 'auto'.
+    resolvedHeightMode:
+      () =>
+        (panel: DashboardPanel): PanelHeightMode =>
+          panel.heightMode ?? getPanelDefinition(panel.type)?.defaultHeightMode ?? 'auto'
+  },
+  actions: {
+    async load() {
+      this.isLoading = true
+      try {
+        this.layout = await getSystemDashboard()
+        this.isDirty = false
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async save(): Promise<boolean> {
+      this.isSaving = true
+      try {
+        await saveSystemDashboard(this.layout)
+        this.isDirty = false
+        return true
+      } catch (error) {
+        // keep isDirty so the user can retry; surfacing UI comes with the snackbar wiring
+        console.error('Failed to save dashboard layout:', error)
+        return false
+      } finally {
+        this.isSaving = false
+      }
+    },
+    // Reload from the server (or default), discarding unsaved edits.
+    async reset() {
+      await this.load()
+    },
+    // Replace the working layout with the built-in factory default (legacy
+    // homepage parity, incl. the Regional Map). Persists only on Save.
+    applyFactoryDefault() {
+      this.layout = createDefaultLayout()
+      this.isDirty = true
+    },
+    setEditMode(on: boolean) {
+      this.editMode = on
+    },
+    togglePaused() {
+      this.layout.refresh.paused = !this.layout.refresh.paused
+      this.isDirty = true
+    },
+    setRefreshSeconds(seconds: number) {
+      this.layout.refresh.seconds = seconds
+      this.isDirty = true
+    },
+    setGlobalTimeframe(timeframe: Timeframe) {
+      this.layout.globalTimeframe = timeframe
+      this.isDirty = true
+    },
+    setGlobalFilter(filter: DashboardFilter) {
+      this.layout.globalFilter = filter
+      this.isDirty = true
+    },
+    // Persist grid geometry coming back from the layout engine. Collapsed panels
+    // report a header-only height, so we keep their stored (expanded) height.
+    syncGeometry(items: { i: string; x: number; y: number; w: number; h: number }[]) {
+      let changed = false
+      for (const item of items) {
+        const panel = this.layout.panels.find((p) => p.id === item.i)
+        if (!panel) continue
+        // Don't persist grid height for collapsed (header-only) or auto-height
+        // panels — those are derived at runtime, not user-set.
+        const derivedH = panel.collapsed || this.resolvedHeightMode(panel) === 'auto'
+        const nextH = derivedH ? panel.h : item.h
+        if (panel.x !== item.x || panel.y !== item.y || panel.w !== item.w || panel.h !== nextH) {
+          panel.x = item.x
+          panel.y = item.y
+          panel.w = item.w
+          panel.h = nextH
+          changed = true
+        }
+      }
+      if (changed) this.isDirty = true
+    },
+    addPanel(type: string) {
+      const def = getPanelDefinition(type)
+      if (!def) {return}
+      // place the new panel below everything currently laid out
+      const nextY = this.layout.panels.reduce((max, p) => Math.max(max, p.y + p.h), 0)
+      this.layout.panels.push({
+        id: uuidv4(),
+        type,
+        x: 0,
+        y: nextY,
+        w: def.defaultSize.w,
+        h: def.defaultSize.h,
+        collapsed: false,
+        titleOverride: null,
+        filterOverride: null,
+        timeframeOverride: null,
+        refreshSeconds: null,
+        options: {}
+      })
+      this.isDirty = true
+    },
+    removePanel(id: string) {
+      this.layout.panels = this.layout.panels.filter((p) => p.id !== id)
+      this.isDirty = true
+    },
+    setPanelCollapsed(id: string, collapsed: boolean) {
+      const panel = this.layout.panels.find((p) => p.id === id)
+      if (panel) {
+        panel.collapsed = collapsed
+        this.isDirty = true
+      }
+    },
+    setPanelTitle(id: string, title: string | null) {
+      const panel = this.layout.panels.find((p) => p.id === id)
+      if (panel) {
+        const trimmed = title?.trim()
+        panel.titleOverride = trimmed ? trimmed : null
+        this.isDirty = true
+      }
+    },
+    setPanelOptions(id: string, options: Record<string, unknown>) {
+      const panel = this.layout.panels.find((p) => p.id === id)
+      if (panel) {
+        panel.options = { ...options }
+        this.isDirty = true
+      }
+    },
+    setPanelHeightMode(id: string, mode: PanelHeightMode) {
+      const panel = this.layout.panels.find((p) => p.id === id)
+      if (panel) {
+        panel.heightMode = mode
+        this.isDirty = true
+      }
+    },
+    tickRefresh() {
+      this.refreshTick++
+    }
+  }
+})
diff --git a/ui/src/types/dashboard.ts b/ui/src/types/dashboard.ts
new file mode 100644
index 000000000000..a819c5517194
--- /dev/null
+++ b/ui/src/types/dashboard.ts
@@ -0,0 +1,102 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+// Type model for the configurable system-wide dashboard (NMS-19851).
+// The persisted layout document is intentionally self-describing so that
+// future per-user / multiple-named dashboards are additive (change `scope`),
+// not a rewrite.
+
+export enum TimeframePreset {
+  Last24h = 'LAST_24H',
+  Today = 'TODAY',
+  Yesterday = 'YESTERDAY',
+  ThisWeek = 'THIS_WEEK',
+  LastWeek = 'LAST_WEEK',
+  Last7Days = 'LAST_7D',
+  Last30Days = 'LAST_30D',
+  ThisMonth = 'THIS_MONTH',
+  LastMonth = 'LAST_MONTH',
+  Custom = 'CUSTOM'
+}
+
+export interface Timeframe {
+  preset: TimeframePreset
+  // ISO-8601 strings, only used when preset === Custom
+  from: string | null
+  to: string | null
+}
+
+export type FilterKey = 'surveillanceCategories' | 'ipMatch'
+
+// Shared filter contract honored by every panel (NMS-10507).
+export interface DashboardFilter {
+  surveillanceCategories: string[]
+  ipMatch: string | null
+}
+
+// Global auto-refresh with pause (NMS-4404). seconds <= 0 means "off".
+export interface DashboardRefresh {
+  seconds: number
+  paused: boolean
+}
+
+export type PanelHeightMode = 'fixed' | 'auto'
+
+export interface DashboardPanel {
+  id: string
+  type: string // matches a PanelDefinition.type in the registry
+  // grid geometry (12-column grid)
+  x: number
+  y: number
+  w: number
+  h: number
+  // 'fixed' = fixed grid height with scrollbar; 'auto' = grow to fit content.
+  // undefined => use the registry default for the panel type.
+  heightMode?: PanelHeightMode
+  collapsed: boolean // NMS-11946
+  titleOverride: string | null // user rename; null => registry default title
+  filterOverride: DashboardFilter | null // null => use globalFilter
+  timeframeOverride: Timeframe | null // null => use globalTimeframe
+  refreshSeconds: number | null // null => use refresh.seconds
+  options: Record<string, unknown> // panel-specific content options
+}
+
+// Future: 'USER' and named dashboards. Only 'SYSTEM' is used today.
+export type DashboardScope = 'SYSTEM'
+
+export interface DashboardLayout {
+  scope: DashboardScope
+  version: number
+  refresh: DashboardRefresh
+  globalFilter: DashboardFilter
+  globalTimeframe: Timeframe
+  panels: DashboardPanel[]
+}
+
+// Props every panel component receives from the PanelFrame.
+export interface PanelComponentProps {
+  options: Record<string, unknown>
+  filter: DashboardFilter
+  timeframe: Timeframe
+  // increments on each global refresh tick; panels watch this to refetch
+  refreshTick: number
+}